WooCommerce Variants Plugin

Display product variants on shop overview pages (categories)

Reference Vivalamama Mobile

Display of the available variants on the product overview

In particular with WooCommerce shops with a large share of mobile use, the user does not always want to call up the product details page to see which Product variants there are and which of them are available. The display of available product options already on the product overview page (product archives) is therefore a great added value for the user and a gain for every WooCommerce shop with variable products.

Background on product variants in WooCommerce

In WooCommerce, there is the variable product in the standard. The characteristics of the product options are defined via product properties. Classic product properties are colours, size, package size, etc. Since a variant can be a combination of several product properties, the number of possible variants per product increases. Already with a T-shirt in 7 different sizes (S-XXL) and 7 different colours, the number of possible variants per product increases. there are 49 variants from which the potential customer can choose.

Slow product overview due to many product variants

The above T-shirt example results in a large number of product variants. Each variant may have its own availability, price and images. If the shop has many of these variable products and if there are product overviews (product archive pages), it can quickly lead to Performance problems come. The following example: A product category page (e.g. T-shirts) contains 24 main products. If the main product has 49 variants (colour, size), only on this Shop page almost 1200 products be loaded. With a target loading time of < 0.5 seconds, this cannot be achieved without extra caching of the products for the list view.

Poor performance with other plugins

Analysis of existing plugins for "WooCommerce Variation Swatches

There are many ways to display product variants on product overview pages. We have some from this tried and not one presented plugin for "WooCommerce Variation Swatches" was satisfying. Because none of the presented WooCommerce Variation Plugins brings a own caching with. Which is why these plugins only work with a small number of products and product properties.

Buttons (swatches) instead of dropdowns

In the standard version, the user can select the variants via dropdowns on the product detail page. Especially with colours or sizes, this display is not optimal, as it is difficult for the user to get an overview. The alternative display of buttons (swatches) is therefore very popular and is also included in our WooCommerce variants plugin. In addition, unavailable product options are displayed to the user by crossing out or greying out the corresponding option.

Image change when selecting the variant on the product category page

Our plugin not only provides the high-performance display of the available product options on the overview page, it also enables a change of the product image on hover (mobile -> click) on the corresponding product option.

Examples for our Variant Plugin

Our WooCommerce variants plugin for a performative and intuitive display of product variants is already in use here.

Display of the available product property "Colour" on the category page

Test without obligation

You can test our Pro version of the plugin free of charge and without obligation for 4 weeks. If you like it, we charge 20 euros net/month for an annual subscription. 

We are happy to adapt the plugin to your WooCommerce shop or extend it according to your wishes.