Cách hiển thị danh mục Categories sản phẩm trong WooCommerce

5/5 - (2 bình chọn)

Zubi Cloud hướng dẫn người dùng thiết kế Web bán hàng bằng WordPress sử dụng Plugin WooCommerce Cách hiển thị danh mục Categories sản phẩm trong WooCommerce, Displaying WooCommerce Product Categories

Cách Hiển Thị Danh Mục Categories Sản Phẩm Trong Woocommerce
Cách Hiển Thị Danh Mục Categories Sản Phẩm Trong Woocommerce

Rất đơn giản chỉ 1 vài thao tác quý khách có thể hiển thị danh mục Categories sản phẩm trong WooCommerce như sau:

Chèn đoạn code sau đây vào file functions.php trong theme bạn đang sử dụng:

function woocommerce_product_category( $args = array() ) {
$woocommerce_category_id = get_queried_object_id();
$args = array(
'parent' => $woocommerce_category_id
);
$terms = get_terms( 'product_cat', $args );
if ( $terms ) {
echo '<ul class="zubi-woocommerce-categories">';
foreach ( $terms as $term ) {
echo '<li class="zubi-woocommerce-product-category-page">';
echo '<a href="' . esc_url( get_term_link( $term ) ) . '" class="' . $term->slug . '">';
woocommerce_subcategory_thumbnail( $term );
echo $term->name;
echo '</a>';
echo '</li>';
}
echo '</ul>';
}
}
add_action( 'woocommerce_before_shop_loop', 'woocommerce_product_category', 100 );

Chèn đoạn code sau vào file style.css

ul.zubi-woocommerce-categories {
margin: 0 0 20px 0;
padding: 0 0 10px 0;
list-style: none;
float: left;
width: 100%;
overflow: hidden;
border-bottom: 1px solid #eee;
}
ul.zubi-woocommerce-categories li a {
font-size: 14px;
font-weight: 500;
color: #333;
display: block;
line-height: 19px;
}
ul.zubi-woocommerce-categories li {
display: -webkit-inline-box;
margin: 1%;
width: 23%;
background: #eee;
padding: 1%;
}
ul.zubi-woocommerce-categories img {
float: left;
width: 50px;
height: 50px;
border-radius: 100%;
margin: 0 7px 0 0px;
}

Vậy là xong, chúc bạn thành công

5/5 - (2 bình chọn)


Trả lời