How to dynamic bootstrap 4 tabs in wordpress - wordpress

Question

I want to display the product in the tab category.
I want it to display 4 items in each tab but it currently displays all product.
Do you have a solution to help me with this?
I do not want the products to be displayed in blocks, it should be displayed in tabular.
Currently displays all products from all categories but does not display each product as a specific category.
This is my code.
<div class="container pt-5">
<div class="text-center mb-4">
<h2 class="section-title px-5"><span class="px-2">Category products</span></h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$categories = get_terms( array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
) );
foreach ( $categories as $key => $cat ) { ?>
<li class="nav-item" role="presentation">
<a class="nav-link " id="<?php echo $cat->slug; ?>" data-toggle="tab" href="#<?php echo $cat->slug; ?>" role="tab" aria-controls="<?php echo $cat->slug; ?>" aria-selected="true"><?php echo $cat->name; ?></a>
</li>
<?php } ?>
</ul>
<?php foreach ( $categories as $key => $cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'product_cat' => $cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC'
);
?>
<div class="tab-content" id="<?php echo $cat->slug; ?>">
<?php
$products = new WP_Query( $args );
if( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>
<div class="tab-pane<?php echo $cat->slug; ?>" id="<?php echo $cat->slug; ?>" role="tabpanel" aria-labelledby="home-tab">
<div class="container pt-2">
<div class="row px-xl-5 pb-3">
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<?php the_post_thumbnail('', array('class' => 'img-fluid w-100')); ?>
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php the_title(); ?></h6>
<div class="d-flex justify-content-center">
<h6><?php echo "". " " . get_woocommerce_currency_symbol().$product->get_price(); ?></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<i class="fas fa-eye text-primary mr-1"></i>View Detail
<i class="fas fa-shopping-cart text-primary mr-1"></i> Add to Card
</div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile;
wp_reset_postdata(); endif; ?>
</div>
<?php } ?>
</div>

Answer 1

Your loop was off a little bit, you also used the attribute ID multiple times. This should work for you.
<div class="container pt-5">
<div class="text-center mb-4">
<h2 class="section-title px-5"><span class="px-2">Category products</span></h2>
</div>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<?php
$product_cats = get_terms(
array(
'taxonomy' => 'product_cat',
'hide_empty' => 1,
)
);
foreach ( $product_cats as $key => $product_cat ) {
?>
<li class="nav-item" role="presentation">
<a class="nav-link " id="<?php echo esc_attr( $product_cat->slug ); ?>-tab" data-toggle="tab" href="#<?php echo esc_attr( $product_cat->slug ); ?>" role="tab" aria-controls="<?php echo esc_attr( $product_cat->slug ); ?>" aria-selected="false"><?php echo esc_html( $product_cat->name ); ?></a>
</li>
<?php } ?>
</ul>
<div class="tab-content">
<?php
$c = 0;
foreach ( $product_cats as $key => $product_cat ) {
$args = array(
'post_type' => 'product',
'posts_per_page' => 4,
'product_cat' => $product_cat->slug,
'hide_empty' => 1,
'orderby' => 'name',
'order' => 'ASC',
);
?>
<div class="tab-pane <?php echo ( 0 === $c ) ? 'show active' : 'fade'; ?>" id="<?php echo esc_attr( $product_cat->slug ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $product_cat->slug ); ?>-tab"
<div class="container pt-2">
<div class="row px-xl-5 pb-3">
<?php
$products = new WP_Query( $args );
if ( $products->have_posts() ) :
while ( $products->have_posts() ) :
$products->the_post();
?>
<div class="col-lg-3 col-md-6 col-sm-12 pb-1">
<div class="card product-item border-0 mb-4">
<div class="card-header product-img position-relative overflow-hidden bg-transparent border p-0">
<?php the_post_thumbnail( '', array( 'class' => 'img-fluid w-100' ) ); ?>
</div>
<div class="card-body border-left border-right text-center p-0 pt-4 pb-3">
<h6 class="text-truncate mb-3"><?php the_title(); ?></h6>
<div class="d-flex justify-content-center">
<h6><?php echo '' . ' ' . get_woocommerce_currency_symbol() . esc_attr( $product->get_price() ); ?></h6>
</div>
</div>
<div class="card-footer d-flex justify-content-between bg-light border">
<i class="fas fa-eye text-primary mr-1"></i>View Detail
<i class="fas fa-shopping-cart text-primary mr-1"></i> Add to Card
</div>
</div>
</div>
<?php
endwhile;
?>
<?php
wp_reset_postdata();
endif;
?>
</div>
</div>
<?php
$c++;
}
?>
</div>
</div>