How To Show Product Category Wise In Woocommerce

Showcasing WooCommerce Products: Category-Wise Done Right!

So, you’ve got a fantastic WooCommerce store loaded with goodies. But are your customers easily finding what they’re looking for? Chances are, if your products are all jumbled together, they might get lost and ultimately *leave without buying*. That’s where showcasing products category-wise comes in! This article will guide you through different methods to neatly display your WooCommerce products, grouped by their respective categories. Let’s dive in!

Think of it like this: imagine walking into a physical supermarket. Would you prefer everything from fresh produce to frozen pizzas scattered randomly? Of course not! You’d want the produce section, the frozen foods aisle, and so on. The same principle applies online. Organized product categories provide a better user experience, which leads to increased sales.

Why Show Products by Category?

Showing your WooCommerce products category-wise is crucial for several reasons:

• Improved User Experience: Easier navigation allows customers to find what they need quickly, leading to higher customer satisfaction.
• Increased Sales: When customers find relevant products easily, they are more likely to add them to their cart.
• Better SEO: Search engines can better understand your site structure and content, leading to improved rankings.
• Professional Look: A well-organized store enhances your brand image and credibility.

Method 1: Using the Built-in WooCommerce Shortcode

WooCommerce provides a handy shortcode that allows you to display products based on category on any page or post. This is the simplest method for basic category display.

#### The `` Shortcode

The shortcode is `` and the crucial attribute we’ll use is `category`. Here’s how it works:

• `category=”your-category-slug”`: Replace `your-category-slug` with the actual slug of the category you want to display. You can find the category slug in your WordPress admin panel under *Products > Categories*. Hover over the category name and look at the URL in the bottom left corner of your browser; the slug is usually there. For example, if your category name is “T-Shirts”, the slug might be “t-shirts”.
• `columns=”4″`: Specifies the number of product columns you want to display. Adjust this number based on your website’s layout.

Example:

Let’s say you have a category called “Sneakers” with the slug “sneakers”. To display all the sneakers in four columns, you would use the following shortcode:

Just paste this shortcode into any page or post, and WooCommerce will automatically display the products from that category.

Method 2: Using WooCommerce Category Pages (The Default)

WooCommerce automatically creates category archive pages. This is the simplest, *built-in* way to show products by category.

1. Navigate to Products > Categories in your WordPress admin panel.

2. Click on a category name. This will take you to the category’s edit page.

3. Look at the URL in your browser’s address bar. The URL should look something like `yourwebsite.com/product-category/your-category-slug/`.

4. The `your-category-slug` part of the URL is the category’s permalink. Visiting `yourwebsite.com/product-category/sneakers/` would show all sneakers.

This is the *default* method. The look and feel depend on your theme, and how your theme renders category archive pages. You can often customize this within your theme options.

Method 3: Customizing Category Pages with a Page Builder

For more advanced control over the layout and design of your category pages, you can use a page builder plugin like Elementor, Beaver Builder, or Divi. These builders usually have WooCommerce widgets specifically designed for displaying products by category.

Example with Elementor:

1. Install and activate Elementor.

2. Create a new page (e.g., “Sneakers Page”).

3. Edit the page with Elementor.

4. Drag and drop the “Products” widget onto the page.

5. In the widget settings, select “Category” under the “Query” section.

6. Choose the “Sneakers” category.

7. Customize the layout, columns, and other options as desired.

Page builders offer far greater flexibility than shortcodes or default category pages, letting you completely control the look and feel.

Method 4: Using a Custom Code Snippet (For Developers)

If you’re comfortable with PHP, you can create a custom code snippet to display products by category. This method requires a bit more technical knowledge but allows for maximum flexibility.

<?php
/**
Display products from a specific category.
* @param string $category_slug The slug of the category to display.
@param int    $columns       The number of columns to display.
*/
function display_products_by_category( $category_slug, $columns = 4 ) {
$args = array(
'post_type'      => 'product',
'posts_per_page' => -1, // Show all products
'product_cat'    => $category_slug,
);

$loop = new WP_Query( $args );

if ( $loop->have_posts() ) {

echo ‘

‘; // WooCommerce CSS class

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();

}

// Usage Example (place this where you want the products to appear)

display_products_by_category( ‘sneakers’, 3 ); // display products from “sneakers” category in 3 columns

?>

Explanation:

1. `display_products_by_category()` function: This function takes the category slug and the number of columns as arguments.

2. `WP_Query`: This WordPress class is used to query products from the specified category.

3. `product_cat` argument: Specifies the category slug.

4. `wc_get_template_part( ‘content’, ‘product’ )`: This WooCommerce function renders the standard product loop item.

5. Usage Example: The line `display_products_by_category( ‘sneakers’, 3 );` shows how to use the function. Place this code snippet (modified for your specific needs) in your theme’s template file (e.g., `page.php` or a custom template) where you want the products to appear.

Important:

* Add this code to your theme’s `functions.php` file or use a code snippet plugin. Directly editing the `functions.php` file can cause issues if not done carefully. A code snippet plugin is a safer option for beginners.

* Customize the CSS: The appearance of the products will depend on your theme’s CSS. You may need to adjust the CSS to match your website’s design.

* Backup your site: Before making any changes to your theme files, it’s essential to back up your website.

Choosing the Right Method

The best method for showing products category-wise depends on your technical skills and the level of customization you need:

• Beginners: The `` shortcode or default category pages are the easiest options.
• Intermediate: Using a page builder like Elementor provides more control over the layout and design.
• Advanced: Writing a custom code snippet offers maximum flexibility but requires PHP knowledge.

SEO Tips for Category Pages

Just showing your products category-wise isn’t enough. You need to optimize your category pages for search engines:

• Descriptive Category Names: Choose category names that are relevant to your target audience and include keywords. Think “Men’s Running Shoes” instead of just “Shoes.”
• Category Descriptions: Write detailed descriptions for each category, including relevant keywords. Explain what types of products are included in the category and why customers would want them. Don’t just write a paragraph; use bullet points, headings, and subheadings.
• Use Internal Linking: Link to your category pages from other relevant pages on your website.
• Optimize Images: Use descriptive alt text for all images on your category pages.

By implementing these tips, you can ensure that your WooCommerce store is easy to navigate, visually appealing, and search engine-friendly. Happy selling!