javascript - How to display woocommerce product category in tabs

one text

Solution:

First, you have to get all categories and after that, you have to start a loop of categories and inside that loop get all products by category. check below code.

<?php 

function load_scripts() {
    wp_enqueue_style( 'jquery-ui-css', get_template_directory_uri().'/assets/css/jquery-ui.css', '' );
    wp_enqueue_script( 'jquery-ui-js', get_template_directory_uri().'/assets/js/jquery-ui.js', array('jquery'), time() , false);
}    

add_action('wp_enqueue_scripts', 'load_scripts');

function show_product_categories_tabs( $args ){

    $atts = shortcode_atts( array(
        '' => '',
    ), $atts, 'show_product_categories_tabs' );

    ob_start();
    ?>
        <div id="tabs">
            <ul>
                <?php
                $categories = get_terms( array(
                    'taxonomy'   => 'product_cat',
                    'hide_empty' => 1,
                ) );

                foreach ( $categories as $key => $cat ) { ?>
                    <li><a href="#<?php echo $cat->slug; ?>"><?php echo $cat->name; ?></a></li>
                <?php } ?>
            </ul>
            <?php foreach ( $categories as $key => $cat ) { 

                $args = array(
                    'post_type'      => 'product',
                    'posts_per_page' => 100,
                    '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(); ?>

                        <h1><?php the_title(); ?></h1>
                    <?php endwhile; wp_reset_postdata(); endif; ?>
                </div>
            <?php } ?>
        </div>
        
        <script>
            ( function( $ ) {
                $( "#tabs" ).tabs();
                $("#tabs ul li").delegate('a', 'click', function(e){
                    e.preventDefault();
                    return false;
                });
            } )(jQuery);
        </script>
    <?php 

    $html = ob_get_clean();
    return $html;
}
add_shortcode( 'show_product_categories_tabs', 'show_product_categories_tabs', 10, 1 );

?>

Tested and works.

Source