Filtering WooCommerce products by category in WordPress is a powerful way to optimize your online store and enhance the shopping experience for your customers. By allowing visitors to browse products based on specific categories, you streamline the search process and make it easier for them to find what they’re looking for.
With the Product Listing block from The Plus Blocks for Gutenberg, you can easily add a category wise filter to your product listing.
To check the complete feature overview documentation of The Plus Blocks for Gutenberg Product Listing block, click here.
Requirement – This block is a part of The Plus Blocks for Gutenberg, make sure its installed & activated to enjoy all its powers.
To do this, make sure you’ve added some products to your WooCommerce store, then follow the steps –
1. Add the Product Listing block on the page.
2. Then select Normal Page from the Type dropdown and select the appropriate style and layout.
Note: Category filter is not available in the Carousel layout.
3. Then go to the Filters tab, and turn on the Category Wise Filter toggle.
To ensure this works, make sure to assign categories to your products, only then it will show here.
Now you’ll be able to see filter options in your product listing that you can use to filter the products.
You can set the filter by category or tag from the Filter by dropdown. Let’s keep it to category.
Note: In a similar way, you can set filters by tag as well.
You can turn on the All Filter toggle to add an additional filter label to show all the products. You can edit the filter label from the All Category Text field.
From the Style and Hover Style, you can choose different styles for the category filter labels for normal and hover states.
From the Alignment section, you can align the filter.