Variable products

FiboFilters considers variation attributes, price, and stock status

FiboFilters offers a state-of-the-art solution for stores offering products with variants. It is common for other filtering plugins to miss stock statuses of product variants, and product variants on sale. The filtering results are incorrect, leading to customer confusion. WooCommerce has struggled with this issue for years – you can read more about it here. The topic is also covered by a comprehensive article on the WooCommerce blog.

We’re proud to announce that with FiboFilters we’ve solved all filtering problems stemming from product variants concerning stock state, sale value, or product attributes.

Table of Contents

Support for stock status for product variations

By default, FiboFilters hides out of stock variations, regardless of the WooCommerce setting “Hide out of stock items from the catalog” in WooCommerce > Settings > Products > Inventory > Out of stock visibility. Customers will still see all possible filter options, but unavailable ones cannot be selected.

Let’s consider the following example. A store sells three types of trousers:

  • Pair 1
    • Color: green
    • Sizes: M, S, XL (size XL is out of stock)
  • Pair 2
    • Colors: red, yellow
    • Sizes: S, XL, XXL
  • Pair 3
    • Colors: blue, yellow (color yellow is out of stock)
    • Sizes: L, M, XS (size L is out of stock)

The L size appears under “Size”, but it cannot be selected because it’s out of stock:

Although two products have yellow variations, once the customer selects yellow under “Color”, only one pair is shown:

This happens because the yellow variation of pair 3 is out of stock.

Allow filtering by unavailable options

If you want customers to be able to filter by variations that are out of stock, add the following snippet to your website:

add_filter( 'fibofilters/indexer/filters_source_query/exclude_out_of_stock_product_variations', '__return_false' );

Learn how to add this snippet to your WordPress.

After adding the code, rebuild the index in WooCommerce > FiboFilters > Indexer.

Note:
This code won’t have any effect if you decide to hide out of stock products from the catalog in WooCommerce settings.

Support for counters for product variation attributes

To illustrate this, let’s use a real-life scenario:

You have an online clothing store, selling T-shirts. One of them is a variable product – with lots of different options, involving combinations of T-shirt sizes and colors. Let’s assume that your customers are looking for a “Green T-shirt in size S”.

If your customers select the “Color” filter as green, all counters from the “Size” filter will be dynamically recounted to correspond with the first filter choice –  the “green” color in this case. If there are no “S” sized green T-shirts in your stock, the value presented near the “Size” counter will be equal to 0, and the filter will be non-clickable.

Support for the sale price for product variations

Let’s analyze the consequences of this in a real-life example:

You sell T-shirts and you have a variable product in two colors: black and blue. The blue T-shirt is on sale, but the black T-shirt is not

  1. You select “blue” (but not “black”) in the filters and you select the “On sale” filter to see only “BLUE T-SHIRTS ON SALE”. The T-shirts will be included in the product list. 
  2. You select “black” (but not “blue”) in the filters and you select the “On sale” filter to only see “BLACK T-SHIRTS ON SALE”. The T-shirts will not be included in the product list.

Variations as single products

By default, WooCommerce does not show single variations on shop pages. However, there are plugins that support this feature. FiboFilters is compatible with some of them.

To show single variations in the filtered results, install one of the following plugins:

After that, go to WooCommerce > FiboFilters > Indexer and rebuild the index.

With these steps completed, FiboFilters will now display product variations as individual items in the filtered results, alongside their parent products:

Starting with version 1.9.0, FiboFilters now supports dynamically updating variable product images and links based on the selected attributes during filtering. This enhancement improves the user experience by visually reflecting attribute choices (such as color) and automatically redirecting users to the correct product variation.

How it works

When a user selects an attribute (e.g., color or size), FiboFilters:

  1. Replaces the main product image with the corresponding variation image.
  2. Updates the product link so that clicking on it leads directly to the specific variation.

Here’s an example:

FiboFilters: adjust variable product images and links by selected attributes

Enabling the feature

To enable this feature, add the following code snippet to your website:

add_filter( 'fibofilters/config/filters_affecting_variation_images_and_urls', function ( $filters ) {
	$filters[] = 'color';
	$filters[] = 'size';

	return $filters;
} );

Learn how to add this snippet to your WordPress.

color and size are URL slugs for the filters. You can find these slugs in the filter details section within the Filter Builder:

Add any other attribute slugs that should trigger product image and URL updates.