How to filter WooCommerce Variable Products in your Shop/Product Archives? AJAX? Sure!
Adding extensions and plugins to your Shop can really boost things up. The all mighty extension, WooCommerce Product Filter, adds extended functionalities to WooCommerce. One of those is really trending today. That’s filtering variable products or variations in your Shop/Product Archives. Product Filter does this in style, supporting AJAX loading functions too.
When it gets to filtering variations, there’s no match like the Product Filter for WooCommerce!
Setting up products is the most important here. Follow this guide:
- Navigate Products > Attributes to create a few attributes for our products
- We’ll create a Size attribute, to differ our products by size
- Add some Size attribute terms, like small, medium, large
Adding Attributes for use with Variable Products
Once we’ve added attributes and terms, let’s create some products!
- Create a new product and set its type to Variable Product
- Add Size attribute to your product and select terms
- Let’s create some variations! Use Create variations from all attributes option to quickly all possible variations to your product
- There are two ways of defining out of stock products. Managed stock and unmanaged stock
- Choose what suits your Shop better. If you’re having product stock quantities then use Manage Stock
Setting Variable Products In Stock/Out of Stock settings to use with the Product Filter
To sum things up, products are assigned with registered attribute terms to define their variations. Once the variations are defined as in stock or out of stock we can use the Product Filter for WooCommerce to filter them on Shop/Product Archive pages or even custom pages with shortcodes. In the Product Filter settings page we’ll select the Size attribute filter and add that to our preset. Product Filter does this filtering automatically, so by browsing Shop/Product Archives and selecting the Size attribute from the Product Filter we can only filter out results that are in stock.
Product Filter for WooCommerce goes a step further with this, allowing you to use variation images in product loops. We can create a Color attribute similarly as the Size attribute, add Color attribute terms to our products and setup unique thumbnails. Now, when filtered with the Product Filter, product images will reflect selected filters. This is all supported in Product Filter AJAX mode, so no page will refresh on filtering!
This article is a re-post! Original article is here! Thanks!