Hướng dẫn tạo phân mục sản phẩm trong trình bày trang con wordpress : https://thietbidienpanasonic.com/danh-muc/cong-tac-o-cam/

Chèn lại mã code : themes/flatsome/woo/layouts/categories/…

<div class=”col large-12″>
<?php
do_action(‘flatsome_products_before’);

/**
* woocommerce_before_main_content hook
*
* @hooked woocommerce_output_content_wrapper – 10 (outputs opening divs for the content)
* @hooked woocommerce_breadcrumb – 20
*/
do_action( ‘woocommerce_before_main_content’ );
?>

<?php if ( have_posts() ) : ?>

<?php
do_action( ‘woocommerce_before_shop_loop’ );
?>

<?php woocommerce_product_loop_start(); ?>

<?php
$product_categories = get_categories(array(
‘parent’ => get_queried_object_id(),
‘menu_order’ => ‘ASC’,
‘hide_empty’ => 0,
‘hierarchical’ => 1,
‘taxonomy’ => ‘product_cat’,
‘pad_counts’ => 1,
));
if (empty($product_categories)) {
while ( have_posts() ) : the_post();
wc_get_template_part( ‘content’, ‘product’ );
endwhile; // end of the loop.
}
else {
foreach ( $product_categories as $category ): ?>
<div class=”product-archive-header”>
<div class=”clearfix vi-header”>
<h3 class=”vi-left-title pull-left”><a href=”<?php echo get_category_link( $category ) ?>”><?php echo $category->name ?></a></h3>
<div class=”vi-right-link pull-right”>
<a class=”vi-more” href=”<?php echo get_category_link( $category ) ?>”>Xem tất cả</a>
</div>
</div>
</div>
<?php
query_posts( array(
‘post_type’ => ‘product’,
‘posts_per_page’ => -1,
‘product_cat’ => $category->slug,
‘tax_query’ => array( array( ‘taxonomy’ => ‘product_cat’, ‘field’ => ‘slug’, ‘terms’ => $category->slug, ‘include_children’ => false ) )
) );
if (have_posts()) while ( have_posts() ) : the_post();
wc_get_template_part( ‘content’, ‘product’ );
endwhile; // end of the loop.
wp_reset_query();
endforeach;
}
?>

<?php woocommerce_product_loop_end(); ?>

<?php
/**
* woocommerce_after_shop_loop hook
*
* @hooked woocommerce_pagination – 10
*/
do_action( ‘woocommerce_after_shop_loop’ );
?>

<?php elseif ( ! woocommerce_product_subcategories( array( ‘before’ => woocommerce_product_loop_start( false ), ‘after’ => woocommerce_product_loop_end( false ) ) ) ) : ?>

<?php wc_get_template( ‘loop/no-products-found.php’ ); ?>

<?php endif; ?>

<?php
do_action(‘flatsome_products_after’);
/**
* woocommerce_after_main_content hook
*
* @hooked woocommerce_output_content_wrapper_end – 10 (outputs closing divs for the content)
*/
do_action( ‘woocommerce_after_main_content’ );
?>

</div>

MÃ CSS BỔ SUNG :

.vi-left-title a {
color: #fff;
}
.vi-left-title:after {
border: 0px solid transparent;
border-left-color: #089345;
border-bottom-color: #089345;
position: absolute;
top: 0;
left: 100%;
content: “”;
}
.vi-header {
border-bottom: solid 1px #089345;
margin-bottom: 10px;
}
.pull-left {
float: left;
}
.pull-left {
margin-left: 0!important;
}
.vi-left-title {
width: auto;
background: #089345;
color: #fff;
padding: 3px 10px;
font-size: 18px !important;
position: relative;
margin: 0;
}