Woocommerce Product Loop With Categories Filter

Question

I am trying to integrate a woocommerce product loop to use a category filter. Currently it works well if with the normal post categories but I can't get it to work with woocommerce product categories without breaking it. I have commented the parts that are giving me problem in the codes as shown below.

<ul class="portfolio-filter">
        <li><a class="active" href="#" data-filter="*">All</a></li>
        <?php
            $args = array(
                'hide_empty'=> 0,
                'orderby' => 'name',
                'order' => 'ASC'
            );

            //I want to list woocommerce categories 
            $categories = get_categories($args);
            foreach($categories as $category) { 
                echo 
                    '<li>
                        <a href="#" data-filter=".'.$category->name.'">    
                            '.$category->name.'
                        </a>
                    </li>';
            }
        ?>

    </ul>

    <div class="row">
        <div class="portfolio-items">

           <?php
                //i want to replace 'cat' => $category_id with recommended woocommerce cat id
                $args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'cat' => $category_id, 'orderby' =>'date','order' => 'DESC' );

                $loop = new WP_Query( $args );
                while ( $loop->have_posts()) : $loop->the_post(); global $product;
                if ( $attachments = get_children(
                    array(
                    'post_type' => 'attachment',
                    'post_mime_type'=>'image',
                    'numberposts' => 99,// -1 to get all images
                    'post_status' => null,
                    'post_parent' => $post->ID
                    )
                ));
            ?>
            <!--I want to display the product category name as a class to replace $category as shown below-->
            <div class="col-lg-4 col-sm-6 col-md-4 item-mgn portfolio-item <?php $category = get_the_category( $post->ID );
           echo $category[0]->cat_name;?>">
                <div class="project_thumb">
                     <?php the_post_thumbnail(); ?>
                </div>
                <div class="project_cont">
                    <a href="<?php the_permalink(); ?>">
                        <h3 class="boxeq"><?php the_title(); ?></h3>
                    </a>


                    <a href="<?php the_permalink(); ?>"><button class="btn-green">See Features</button></a>

                    <a href="#"><button class="btn-line">Acquire Property</button></a>
                </div>
            </div>


            <?php 
                endwhile;
                wp_reset_postdata(); 
            ?>  

        </div><!--portfolio-items-->

Answer 1

I was finally able to solve this problem. For the sake of those that face the same problem that might come across this, below is the updated working code for your perusal.

<ul class="portfolio-filter">
        <li>
            <a class="active" href="#" data-filter="*">All</a>
        </li>
        <?php
            $args = array(
                'hide_empty'=> 0,
                'orderby' => 'name',
                'order' => 'ASC'
            );

           $product_categories = get_terms( 'product_cat', $cat_args );
             foreach ($product_categories as $key => $category) {
                echo 
                    '<li>
                        <a href="#" data-filter=".'.$category->name.'">    
                            '.$category->name.'
                        </a>
                    </li>';
            }
        ?>

    </ul>

    <div class="row">
        <div class="portfolio-items">

           <?php

                $args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => -1, 'cat' => $category_id, 'orderby' =>'date','order' => 'DESC' );

                $loop = new WP_Query( $args );
                while ( $loop->have_posts()) : $loop->the_post(); global $product;
                if ( $attachments = get_children(
                    array(
                    'post_type' => 'attachment',
                    'post_mime_type'=>'image',
                    'numberposts' => 99,// -1 to get all images
                    'post_status' => null,
                    'post_parent' => $post->ID
                    )
                ));

                global $wp_query;
                $terms_post = get_the_terms( $post->cat_ID , 'product_cat' );
                foreach ($terms_post as $term_cat) { 

                }
            ?>

            <div class="col-lg-4 col-sm-6 col-md-4 item-mgn portfolio-item <?php echo $term_cat->name; ?>">
                <div class="project_thumb">
                     <?php the_post_thumbnail(); ?>
                </div>
                <div class="project_cont">
                    <a href="<?php the_permalink(); ?>">
                        <h3 class="boxeq"><?php the_title(); ?></h3>
                    </a>


                    <a href="<?php the_permalink(); ?>"><button class="btn-green">See Features</button></a>

                    <a href="#"><button class="btn-line">Acquire Property</button></a>
                </div>
            </div>


            <?php 
                endwhile;
                wp_reset_postdata(); 
            ?>  

        </div><!--portfolio-items-->   

    </div>