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 >
    <div >
        <h2 ><span >Category products</span></h2>
    </div>
    <ul  id="myTab" role="tablist">
       
        <?php
            $categories = get_terms( array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => 1,
            ) );

            foreach ( $categories as $key => $cat ) { ?>
            <li  role="presentation">
                    <a  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  id="<?php echo $cat->slug; ?>">
       <?php
        $products = new WP_Query( $args );
        if( $products->have_posts() ) : while ( $products->have_posts() ) : $products->the_post(); ?>
        <div  id="<?php echo $cat->slug; ?>" role="tabpanel" aria-labelledby="home-tab">
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <?php the_post_thumbnail('', array('class' => 'img-fluid w-100')); ?>

                            </div>
                            <div >
                                <h6 ><?php the_title(); ?></h6>
                                <div >
                                    <h6><?php echo "". " " . get_woocommerce_currency_symbol().$product->get_price(); ?></h6>
                                </div>
                            </div>
                            <div >
                                <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" ><i ></i>View Detail</a>
                                <a href="<?php echo $product->add_to_cart_url();?>" data-quantity="1"  data-product_id="<?php the_id(); ?>"><i ></i> Add to Card</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php endwhile; 
        wp_reset_postdata(); endif; ?>
       
    </div>

    <?php } ?>

</div>

CodePudding user response：

Your loop was off a little bit, you also used the attribute ID multiple times. This should work for you.

<div >
    <div >
        <h2 ><span >Category products</span></h2>
    </div>
    <ul  id="myTab" role="tablist">

        <?php
        $product_cats = get_terms(
            array(
                'taxonomy'   => 'product_cat',
                'hide_empty' => 1,
            )
        );

        foreach ( $product_cats as $key => $product_cat ) {
            ?>
            <li  role="presentation">
                <a  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 >
        <?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  id="<?php echo esc_attr( $product_cat->slug ); ?>" role="tabpanel" aria-labelledby="<?php echo esc_attr( $product_cat->slug ); ?>-tab"
            <div >
                <div >
                    <?php
                    $products = new WP_Query( $args );
                    if ( $products->have_posts() ) :
                        while ( $products->have_posts() ) :
                            $products->the_post();
                            ?>
                            <div >
                                <div >
                                    <div >
                                        <?php the_post_thumbnail( '', array( 'class' => 'img-fluid w-100' ) ); ?>
                                    </div>
                                    <div >
                                        <h6 ><?php the_title(); ?></h6>
                                        <div >
                                            <h6><?php echo '' . ' ' . get_woocommerce_currency_symbol() . esc_attr( $product->get_price() ); ?></h6>
                                        </div>
                                    </div>
                                    <div >
                                        <a href="<?php echo esc_url( get_permalink( $product->get_id() ) ); ?>" ><i ></i>View Detail</a>
                                        <a href="<?php echo esc_attr( $product->add_to_cart_url() ); ?>" data-quantity="1"  data-product_id="<?php the_id(); ?>"><i ></i> Add to Card</a>
                                    </div>
                                </div>
                            </div>

                            <?php
                        endwhile;
                        ?>
                        <?php
                        wp_reset_postdata();
                    endif;
                    ?>
                </div>
            </div>
            <?php
            $c  ;
        }
        ?>
    </div>

</div>