WooCommerce variable products are the most complex product type to get right. A product with 10 colour and 5 size combinations means 50 potential variations, each with its own image, price, and stock status. How you present this complexity to customers determines whether they can quickly find what they want or give up and leave. This article covers the specific changes that have measurable impact on variable product conversion.
Image Switching on Variation Selection
When a customer selects a colour swatch, the main product image should switch to show that colour. WooCommerce supports this natively when variation images are set per variation in the product data panel. However, native WooCommerce image switching replaces the single main image without a gallery. For products with multiple angles per colour, you need a gallery that switches when the variation changes.
The Variation Images Gallery for WooCommerce plugin adds full gallery switching per variation – the entire image gallery (main image plus thumbnails) changes when a customer selects a variation. This is how major fashion retailers handle product photography and it significantly improves the shopping experience for products where seeing the item from multiple angles matters.
Out-of-Stock Variation Handling
How your store handles out-of-stock variations affects customer experience and conversions. Three options:
Hide out-of-stock variations – simplest, cleanest interface, but customers looking for a specific out-of-stock size or colour have no way to know it exists or when it might return. Customers leave without signing up for back-in-stock notifications.
Show grayed out – communicates that the variation exists but is currently unavailable. Customers can see the full size and colour range even when some are out of stock. Pair with a back-in-stock notification button on grayed-out swatches.
Show with strikethrough – similar to grayed out but with a visual strikethrough on the swatch. More clearly communicates “this option exists but cannot be selected currently.”
For most stores, showing grayed out with a back-in-stock notification is the highest-converting approach because it captures interest from customers who want the unavailable option rather than losing them entirely.
Need help setting this up? Describe your store setup and get a free estimate.
Variation Price Display
When a variable product has variations at different price points, WooCommerce defaults to showing a price range (“$29 – $89”). Customers cannot tell which specific options cost what without selecting each variation. Configure your theme or a plugin to update the displayed price dynamically when a variation is selected, showing the exact price for the selected combination rather than a range.
Price range display reduces purchase confidence for products with significant price variation. When a customer selects “Blue, Large” and the price updates from “$29-$89” to “$45”, they have the specific information they need to make a decision rather than mentally parsing a range.
Size Guide Integration
For clothing and footwear, a size guide accessible directly from the variation selector reduces returns and increases purchase confidence. Add a “Size Guide” link or modal trigger next to the size swatch selector using a custom hook in your theme or a size guide plugin. The guide should be visible without leaving the product page – an inline modal is better than a link that opens a new page and breaks the purchase flow.