How To Display Woocommerce Products By Category In WordPress

How to Display WooCommerce Products by Category in WordPress: A Beginner’s Guide

So, you’ve got a fantastic WooCommerce store brimming with amazing products. But are your customers finding what they’re looking for easily? One of the best ways to improve their shopping experience is to display your WooCommerce products by category. This allows visitors to quickly navigate to the specific types of items they’re interested in, leading to increased sales and happier customers.

Don’t worry if you’re new to WordPress and WooCommerce. This guide will walk you through several simple methods, perfect for beginners, to showcase your products by category. We’ll explain why it’s important and provide real-life examples to illustrate each technique.

Why Display Products by Category?

Think of a real-life department store. They don’t just throw all their clothes, electronics, and home goods into one giant pile, do they? Instead, they organize everything by department (category) to make shopping easier. Your online store should be no different. Here’s why displaying products by category is crucial:

• Improved User Experience: Customers can quickly find the products they want without endless scrolling. Imagine someone looking for “Running Shoes.” Instead of sifting through hundreds of shoes, they can click on the “Running Shoes” category and find exactly what they need.
• Better Website Navigation: Clear category organization makes your website more user-friendly and easier to navigate. This leads to a more enjoyable shopping experience.
• Increased Sales: When customers can easily find what they want, they’re more likely to make a purchase. A streamlined browsing experience translates directly into higher conversion rates.
• Improved SEO: Search engines like Google love well-organized websites. Using categories helps them understand your site’s structure, potentially boosting your search engine rankings.

Method 1: Using the WooCommerce Product Category Widget

This is the simplest and most straightforward method. WooCommerce comes with a built-in “Product Category” widget that you can easily add to your sidebar or footer.

1. Go to Appearance > Widgets in your WordPress dashboard.

2. Find the “WooCommerce Product Categories” widget.

3. Drag and drop the widget to your desired sidebar or footer area.

4. Configure the widget options:

• Title: Give your widget a title (e.g., “Shop by Category”).
• Display as dropdown: Choose whether to display the categories as a list or a dropdown menu. A dropdown is often better for sites with many categories.
• Show product counts: Display the number of products in each category. This helps customers understand the range of items available.
• Hierarchical: Show subcategories under their parent categories.
• Hide empty categories: Don’t display categories with no products in them.

Example: You might place this widget in your sidebar so visitors can easily jump to categories like “T-Shirts,” “Hoodies,” or “Accessories.”

Method 2: Using the `[product_category]` Shortcode

Shortcodes are small snippets of code that WordPress understands and replaces with dynamic content. The `[product_category]` shortcode allows you to display products from a specific category on any page or post.

1. Find the category slug: Go to Products > Categories in your WordPress dashboard. Hover over the category you want to display and look at the URL in your browser’s status bar. The category slug is the part after `category/` (e.g., if the URL is `example.com/wp-admin/term.php?taxonomy=product_cat&tag_ID=5&post_type=product&wp_http_referer=%2Fwp-admin%2Fedit-tags.php%3Ftaxonomy%3Dproduct_cat%26post_type%3Dproduct`, the slug might be “t-shirts”). Alternatively, you can edit the category and find the “Slug” field.

2. Add the shortcode to a page or post: In the WordPress editor, add the following shortcode, replacing “t-shirts” with your actual category slug:

`[product_category category=”t-shirts”]`

3. Customize the shortcode (optional): You can add attributes to the shortcode to customize the display. For example:

• `per_page=”12″`: Display 12 products per page.
• `columns=”4″`: Display the products in 4 columns.
• `orderby=”date”`: Order the products by date.
• `order=”DESC”`: Order the products in descending order (newest first).

Example: `[product_category category=”t-shirts” per_page=”8″ columns=”2″ orderby=”date” order=”DESC”]`

Example: You could create a dedicated “T-Shirt Collection” page and use the `[product_category]` shortcode to display all your t-shirts on that page.

Method 3: Using a Page Builder (Elementor, Beaver Builder, etc.)

If you’re using a page builder like Elementor or Beaver Builder, you’ll likely have access to WooCommerce-specific widgets or modules that make displaying products by category even easier.

1. Open the page you want to edit with your page builder.

2. Look for a WooCommerce product grid or product category module. (The name may vary depending on your page builder.)

3. Drag and drop the module onto your page.

4. Configure the module settings: Usually, you’ll have options to:

• Select the category to display.
• Set the number of columns.
• Choose the number of products to display.
• Customize the appearance (e.g., button styles, image sizes).

Example: Using Elementor, you can use the “Products” widget and filter by category. You can then customize the layout, styling, and number of products displayed.

Method 4: Custom Coding (Advanced)

This method is for more advanced users who are comfortable with PHP and WordPress theme development. You can create a custom template file to display products by category.

1. Create a child theme: Never edit your parent theme directly! This ensures your changes won’t be overwritten when the theme is updated.

2. Create a new template file (e.g., `category-template.php`) in your child theme.

3. Use the `WP_Query` class to query products from a specific category.

<?php
/*
Template Name: Category Template
*/

get_header();

$category_slug = ‘your-category-slug’; // Replace with your actual category slug

$args = array(

‘post_type’ => ‘product’,

‘tax_query’ => array(

array(

‘taxonomy’ => ‘product_cat’,

‘field’ => ‘slug’,

‘terms’ => $category_slug,

),

),

);

$loop = new WP_Query( $args );

if ( $loop->have_posts() ) {

echo ‘

‘;

while ( $loop->have_posts() ) {

$loop->the_post();

wc_get_template_part( ‘content’, ‘product’ );

}

echo ‘

‘;

} else {

echo ‘

No products found in this category.

‘;

}

wp_reset_postdata();

get_footer();

?>

4. Assign the template to a new page.

Example: You might create a custom category template to display products in a unique layout with custom filtering options.

Key Takeaways

• Organizing your WooCommerce products by category is essential for a positive user experience and increased sales.
• The WooCommerce Product Category widget is the simplest method for adding category navigation to your sidebar or footer.
• The `[product_category]` shortcode allows you to display products from a specific category on any page or post.
• Page builders offer flexible options for displaying products by category with their drag-and-drop interfaces.
• Custom coding provides the most control but requires advanced technical skills.

By implementing these techniques, you can create a well-organized and user-friendly WooCommerce store, making it easier for customers to find what they’re looking for and ultimately boosting your bottom line. Good luck!