10 May

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
WooCommerce Attributes
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
Variations Tab
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!

8 thoughts on “How to filter WooCommerce Variable Products in your Shop/Product Archives? AJAX? Sure!”

  1. I am looking for a little help on the product loop images for color filtering. For example, I have a product with two variations, green and brown. I also have a green filter and a brown filter set up, However, when I filter by brown the image does not change. Lead image on the product is green, I do have images set at the variation level as well a green product and a brown product correctly mapped on the variation level.

    I do not have an Envato account but I am the website owner as well as the owner of the plugin.

  2. Hello.
    Before i purchase this plugin, can you tell me one thing?
    I have variations with color and size. And the stock quantity is on than variable.
    In your exemple the variation is composed only from size.
    Exemple:
    Product XYZ with
    Variation 1: RED S – 2 in stock
    Variation 2: RED XL – 0 in stock
    Variation 3: BLUE M – 3 in stock
    Variation 4: BLUE L – 4 in stock
    If i filter XL from all the products, the product XYZ is showing in product list?
    Thank you.

    1. Thanks for the message, yes it’ll show as you do have another attribute set and in the current version 6.5.4 PF if sees another attribute present it immediately set the product as in-stock, as the further checks would be quite complicated. We do want to improve this, but these improvements might be here in about 6-9 months. Thanks!

      1. hello, Do you have any update on this? Im interested in filtering out products which filtered variations are out of stock.
        I already left this same question on codecanyon.
        Thanks.

  3. Hello, i would like to show, on the filter size, only the product in stock,
    for example, if the 32 size is out of stock, the filter hasn’t to show the size.
    i’ve tried to follow your tips, but it doesn’t work

    thanks
    CARLO

Leave a Reply

Your email address will not be published. Required fields are marked *