DEV Community

Cover image for Show products related to category ~ WooCommerce
Shimanta Das
Shimanta Das

Posted on

Show products related to category ~ WooCommerce

Woocommerce is a awesome plugin, when building an e-commerce website for yourself and clients. We can use woocommerce with various popular themes. If you want to build your custom e-commerce website, then you can also use woocommerce template pages. From developer prospective, if you want to show products(post_type=’product’) related to any specific category , then below the below code reference.

This is an sample HTML section, where I would show latest products related to category ‘mobiles’.

Image description

In my woocommerce these are some categories. These are mobiles, decor, accessories etc.

Image description

Now, lets see about category(taxonomy) ‘Mobiles’. Here category name is ‘Mobiles’ and slug is ‘mobiles’. products related to this category from wp-admin here.

Image description

Now, let’s see below code about how to render all the products related to taxonomy slug ‘mobiles’.

<?php
$category_slug = 'mobiles';

// Query the posts in the specific category
$args = array(
            'post_type' => 'product',
            'posts_per_page' => 4,
            'order_by' => 'date',
            'tax_query' => array(
                array(
                    'taxonomy' => 'product_cat', // Change to 'category' for regular blog posts
                    'field' => 'slug',
                    'terms' => $category_slug,
                ),
            ),
        );

$query = new WP_Query($args);
if ($query->have_posts()) {
    while ($query->have_posts()) {
        $query->the_post();
        $thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'large');

        $categories = get_the_terms(get_the_ID(), 'product_cat');
        if ($categories && !is_wp_error($categories)) {
            foreach ($categories as $category) {
                $product_category = $category->name;
            }
        }

    }
}
?>
Enter fullscreen mode Exit fullscreen mode

Here is the below output for this …

Image description

Follow me !!
👉 My Social Media links
🤹‍♂️Linkedin: https://www.linkedin.com/in/shimanta-das-497167223
👹facebook : https://www.facebook.com/profile.php?id=100078406112813
📸Instagram : https://www.instagram.com/meshimanta/?hl=en
🐦Twitter : https://mobile.twitter.com/Shimantadas247
📬Telegram link : https://t.me/microcodesofficial
🎦Youtube : https://youtube.com/channel/UCrbf6B0CU9x-I4bQOYbJVGw

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more