Do nhu cầu mình cần lấy danh mục con trong danh mục sản phẩm đang đứng tạo điểm nhấn cũng như sự tiện lợi trong việc lựa chọn của các bạn, hôm nay AN NHIÊN sẽ giới thiệu cách hook Lấy danh mục con trong danh mục sản phẩm trong theme Flatsome, các bạn cùng theo dõi nhé.
Lấy danh mục con trong danh mục sản phẩm wordpress
CÓ THỂ BẠN QUAN TÂM
Các bài viết về theme Flatsome Wordpess
Để làm được như hình các bạn cần làm theo các bước sau:
- Bước 1: Các bạn đăng nhập vào trang quản trị của website.
- Bước 2: Vào mục Giao diện → Sửa giao diện → function.php.
- Bước 3: Sau đó các bạn thêm đoạn code bên dưới vào function.php.
// HIỆN THỊ LIST SUB CATEGORY
function list_sub_product_category()
if( !is_product() ): ;?>
<div class=”list_sub_product_category”>
<?php
if ( is_product_category() )
$term_id = get_queried_object_id();
$taxonomy = ‘product_cat’;
// Get subcategories of the current category
$terms = get_terms([
‘taxonomy’ => $taxonomy,
‘hide_empty’ => true,
‘parent’ => get_queried_object_id()
]);
$output = ‘<ul class=”subcategories-list”>’;
// Loop through product subcategories WP_Term Objects
foreach ( $terms as $term )
$term_link = get_term_link( $term, $taxonomy );
$output .= ‘<li class=”‘. $Term->slug .’”><a href=”‘. $Term_link .’”>’. $Term->name .'</a></li>’;
echo $output . ‘≪/ul>’;
?>
</div>
<?php if(!wp_is_mobile());?>
<style>
ul.subcategories-list
display: flex;
list-style: none;
ul.subcategories-list li
margin-right: 15px;
background-color: #7d7d7d3d;
padding: 3px 8px;
border-radius: 7px;
ul.subcategories-list li:hover
background-color: #ff4200;
color: #fff !important;
</style>
<?php else
echo ‘
<style>
ul.subcategories-list
display: block;
list-style: none;
ul.subcategories-list li
margin-right: 15px;
background-color: #7d7d7d3d;
padding: 3px 8px;
border-radius: 7px;
ul.subcategories-list li:hover
background-color: #ff4200;
color: #fff !important;
</style>
‘;;
endif;
;
add_action(‘woocommerce_before_main_content’,’list_sub_product_category’);
Trong code trên mình chèn thẳng css vào, tuy nhiên bạn có thể bỏ check giao diện Mobile ( đoạn code này <?php if(!wp_is_mobile()){;?> ) bạn có thể bỏ và chèn thẳng vào css trên WP nhé.
Nếu các bạn thực hiện không thành công thì hãy nhắn tin cho An Nhiên để nhận được hỗ trợ sớm nhất nhé.
Cảm ơn các bạn đã đọc bài viết này! Chúc các bạn thành công!
