How to filter WooCommerce Variable Products in your Shop/Product Archives? AJAX? Sure!

Nenad Mihajlovic
May 11, 2017 · 3 min read

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!

Variable Products Demo is here or get the Product Filter here!

This article is a re-post! Original article is here! Thanks!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store