How to Show Products by Category in WooCommerce with Elementor (Easy Guide for Beginners)
WooCommerce and Elementor are a powerful duo for building stunning and effective online stores. One common task is showing products grouped by their categories. This makes navigation easier for your customers and increases the chances they’ll find what they’re looking for. Think of it like a well-organized supermarket – sections are clearly labeled, making shopping a breeze. This article will guide you through the process of displaying products by category using Elementor in WooCommerce, even if you’re a complete beginner.
Why Show Products by Category?
Before we dive in, let’s quickly understand *why* this is important. Imagine you’re selling clothes. You wouldn’t want to dump *all* your shirts, pants, and jackets on a single page, would you? That would be chaotic! Showing products by category:
- Improves user experience: Customers can quickly find what they need. Someone looking for “Summer Dresses” doesn’t have to wade through pages of winter coats.
- Increases sales: Easier navigation leads to more browsing, which can translate into more purchases.
- Enhances SEO: Properly categorized products help search engines understand your site’s structure and content.
- WordPress: A working WordPress installation.
- WooCommerce: The WooCommerce plugin installed and activated.
- Elementor: The free or Pro version of Elementor installed and activated.
- Products with Categories: You’ve already added products to your WooCommerce store and assigned them to relevant categories. Go to *Products -> Categories* to see your existing categories or create new ones.
- Query: Under the “Content” tab, find the “Query” section.
- Source: Make sure the “Source” is set to “Products”.
- Include by: Select “Terms”. This allows you to filter by categories.
- Term: Click in the “Term” box. A dropdown will appear listing your WooCommerce categories. Select the category you want to display. For example, “T-Shirts”.
- Posts Per Page: Specify how many products from that category you want to show.
- Use the “Products” widget (like in Method 1).
- Under the “Query” section, set “Source” to “Current Query.” This makes the widget dynamically display products from *whatever category page* the template is applied to. You *don’t* manually select a category here. Elementor dynamically picks it up from the page being viewed.
- Include: Choose “Product Category” and then select the specific category (e.g., “Shoes”) for which this template should be used. You can create *multiple* templates, one for *each* category, if you want different layouts for different categories.
Prerequisites
Make sure you have the following:
Method 1: Using Elementor’s “Products” Widget (Basic)
This is the simplest method, perfect for beginners. Elementor’s “Products” widget provides basic category filtering.
1. Create or Edit a Page/Template: Open the page or template where you want to display your products by category using the “Edit with Elementor” button.
2. Search for the “Products” Widget: In the Elementor editor, search for the “Products” widget in the left-hand panel.
3. Drag and Drop: Drag the “Products” widget to the desired location on your page.
4. Configure the Widget: This is where the magic happens!
5. Styling (Optional): Use the “Style” tab to customize the look and feel of the product grid – columns, spacing, colors, etc.
Example: Imagine you’re creating a dedicated “T-Shirt” page. You’d drag the “Products” widget onto the page and, using the steps above, configure it to only show products belonging to the “T-Shirt” category. Easy peasy!
Method 2: Using Elementor Pro’s “Products Archive” Template (Advanced – Elementor Pro Required)
If you have Elementor Pro, you can create dynamic product archive templates for each category, providing more control and consistency across your store.
1. Go to Elementor -> Templates -> Theme Builder: This is where you manage your theme templates.
2. Add New Template: Click “Add New”. Choose “Product Archive” as the template type.
3. Name Your Template: Give the template a descriptive name (e.g., “Category Archive – Shoes”).
4. Design Your Archive: This is where you’ll design the layout for your product category page. You can use various Elementor widgets, including the “Products” widget (configured as in Method 1). However, the key difference is that we’ll make it dynamic.
5. Dynamic Category Setting:
6. Set Display Conditions: Click the little arrow next to the “Publish” button, then click “Display Conditions.”
7. Publish: Publish your template.
Example: You want a unique look for your “Shoes” category page. You create an Elementor Pro Product Archive template, design it with a stylish grid layout, set the “Products” widget’s Source to “Current Query”, and then set the Display Conditions to show this template only for the “Shoes” product category. Now, when someone visits the “Shoes” category page on your store, they’ll see *exactly* the layout you designed!
Method 3: Using the WooCommerce Shortcode and Elementor’s “Shortcode” Widget (Alternative)
While less flexible than the other methods, the WooCommerce shortcode allows you to display products from a specific category.
1. Find the Category ID: Go to *Products -> Categories*. Hover over the category you want to display. In the URL at the bottom of your browser window, you’ll see `taxonomy=product_cat&tag_ID=X` (where X is a number). That number is the Category ID.
2. Use the WooCommerce Shortcode: Construct the shortcode using the category ID:
[products category="your-category-slug" columns="4" limit="8"]
Replace `”your-category-slug”` with *either* the category slug (the URL-friendly version of the category name, found on the category edit page) *or* the category ID you found in step 1. `columns` defines how many columns wide the product grid will be, and `limit` defines how many products to display.
3. Add Elementor’s “Shortcode” Widget: On your page/template in Elementor, search for the “Shortcode” widget and drag it to the desired location.
4. Paste the Shortcode: Paste the WooCommerce shortcode you created into the “Shortcode” field of the widget.
Example: You want to show 6 products from the “Hats” category in 3 columns. The category slug for “Hats” is “hats”. Your shortcode would be:
[products category="hats" columns="3" limit="6"]
Troubleshooting Tips
- Products Not Showing? Double-check that you’ve correctly assigned products to the category and that the category is published (not in draft mode).
- Category Slug vs. Category ID: If using the shortcode method, ensure you’re using the *correct* category identifier – either the slug or the ID, and that you’re using it correctly in the shortcode.
- Theme Conflicts: Sometimes, theme CSS can interfere with Elementor’s styling. Try temporarily switching to a default WordPress theme (like Twenty Twenty-Three) to see if that resolves the issue.
- Elementor Cache: Clear Elementor’s cache (Elementor -> Tools -> Regenerate CSS & Data).
Conclusion
Displaying products by category is a crucial aspect of creating a user-friendly and effective WooCommerce store. By utilizing Elementor’s “Products” widget, Elementor Pro’s Product Archive Templates, or even the WooCommerce shortcode, you can easily organize and present your products in a way that enhances the shopping experience and drives sales. Experiment with these methods to find the one that best suits your needs and your store’s design. Happy selling!
