Fixing WooCommerce product variations not showing

If you've set up a variable product in WooCommerce but the variation dropdowns aren't appearing on the product page, the "Add to cart" button is missing or customers can't select options like size or colour, something in the variation setup or your site's configuration is stopping them from displaying.

Variable products are one of the more complex parts of WooCommerce. They need several pieces of configuration to work together: the product type needs to be set correctly, attributes need to be set up and assigned, and individual variations need to be created for each combination of options. If any of these steps are incomplete, the variations won't appear on the front end, even though everything might look correct in the admin.

The steps below work through the most common causes, starting with the settings that trip up most people.

Check that the product type is set to "Variable"

It sounds obvious, but it's one of the most common oversights. Open the product in the WordPress admin and look at the Product data dropdown near the top of the editor. It should be set to Variable product.

If it's set to "Simple product", WooCommerce won't display any variation options, however your attributes are set up. Changing it to "Variable product" reveals the Variations tab where you set up the individual variations.

Check your attribute settings

WooCommerce variations are built on product attributes, like size, colour or material.¹ Open the product, go to the Attributes tab in the Product data section and check two things for each attribute.

First, make sure the attribute has values. If you're using global attributes (created under Products → Attributes), the relevant values need to be selected for this specific product. If you're using custom attributes defined on the product itself, the values need to be entered.

Second, and this is the step most people miss, make sure the Used for variations checkbox is ticked for each attribute you want customers to choose from. If it isn't ticked, the attribute appears in the product's "Additional information" tab as descriptive text, but it won't create any options on the product page.

Click Save attributes before moving on.

Create the variations

Having attributes set up with "Used for variations" ticked is only half the job. You also need to create the variations themselves in the Variations tab.

If no variations exist yet, you'll see an empty list. Click Generate variations to create a variation for every possible combination of your attribute values, or Add manually to create only the combinations you want.¹

For example, a "Size" attribute with Small, Medium and Large and a "Colour" attribute with Red and Blue gives six variations: Small/Red, Small/Blue, Medium/Red, Medium/Blue, Large/Red and Large/Blue.

Each variation needs a price. Expand each variation and enter a Regular price. WooCommerce's documentation notes that variations without prices don't show in your store.¹ If every variation has the same price, the bulk actions dropdown at the top of the variations list lets you set the regular price for all of them at once.

Click Save changes at the bottom of the variations section, then update the product.

Check variation stock and status settings

Even if variations are created and priced correctly, they won't appear if they're individually disabled or out of stock.

Expand each variation in the Variations tab and check that:

• The Enabled checkbox is ticked. A variation that isn't enabled won't appear as an option.
• If you're managing stock per variation, the Stock quantity is above zero. Out-of-stock variations are either greyed out or hidden, depending on your settings.

Also check Hide out of stock items from the catalog under WooCommerce → Settings → Products → Inventory. When it's switched on, WooCommerce leaves out-of-stock variations out of the list of options completely, rather than greying them out.²

Check the parent product's visibility and status

The main variable product also has visibility and stock settings that can stop variations from displaying.

Make sure the product is published, not draft, pending review or private. Check its Catalog visibility setting too. A "Hidden" product shouldn't appear in the shop or search results but should still load at its own address. If it doesn't, your theme may be handling hidden products differently.

If you're managing stock on the main product rather than per variation, check that it's marked as in stock.

Products with more than 30 variations

This catches people out on products with lots of options. When a variable product has 30 variations or fewer, WooCommerce loads them all into the page and greys out or hides combinations that aren't available as the customer makes each choice.

Above 30 variations, WooCommerce stops doing this to keep the page fast. Every dropdown shows every option, whether or not that combination exists, and the choice is only checked once the customer has picked all of them. If the combination doesn't exist or is out of stock, they see "Sorry, no products matched your selection. Please choose a different combination."³

That can look like variations are broken when they're working as designed. The threshold can be raised with the woocommerce_ajax_variation_threshold filter, but a higher number means more data loaded on every page view of that product, so it's a trade-off.³ Adding code to your site carries risk, so take a backup and a copy of any file you edit first. If you're not comfortable adding code, this is a job to hand to a developer.

Check for theme issues

Classic WooCommerce themes use template files to display the variation dropdowns and the add to cart button. If your theme has its own copy of these templates and it's outdated or incomplete, variations may not display correctly.

The quickest test is to switch temporarily to a default WordPress theme and check whether the variations appear. Switching theme changes how the whole site looks to visitors, so do this on a staging copy or at a quiet time, and note which theme was active so you can switch back.

If the variations appear with a default theme, the problem is in your theme. Check WooCommerce → Status → System Status for template overrides flagged as outdated. The template that displays the variation options is single-product/add-to-cart/variable.php,⁴ so an outdated copy of it in your theme's woocommerce folder is a likely cause.⁵ Outdated templates need updating to match your WooCommerce version, which is usually a job for your theme developer. Take a backup of your theme before changing any template files.

If your site uses a block theme, product pages are built from blocks in the site editor rather than these PHP template files, so check the product template in Appearance → Editor instead.

Check for JavaScript conflicts

The variation dropdowns rely on JavaScript. When a customer picks an option, JavaScript updates the available options, shows the right price and image and enables the add to cart button. If a JavaScript error stops this code running, the dropdowns may appear but not respond, or may not appear at all.

Open your browser's developer tools (F12) and check the Console tab for errors shown in red while viewing the product page. An error from any plugin or theme can stop the variation code from starting.

If you see errors, take a backup, then deactivate plugins one at a time to find the conflict. Start with plugins that add features to product pages or change how the front end looks, such as page builders, product tab plugins, image gallery plugins and quick-view plugins. Deactivating plugins on a live shop affects customers, so do this on a staging copy or at a quiet time if you can.

Clear all caches

If you've made changes but the product page still shows the old version, caching may be serving an outdated copy.

Clear your browser cache, your caching plugin's cache, any server cache from your hosting provider and your CDN cache if you use one. Our guide to a WordPress site not updating walks through each caching layer.

WooCommerce also keeps its own temporary cache of product data. You can clear it under WooCommerce → Status → Tools using the Clear transients button next to "WooCommerce transients".⁶ This is safe to run, and WooCommerce rebuilds the data as it's needed.

Need help with WooCommerce product variations?

If variations still aren't displaying after working through these steps, or your setup is more complex than you're comfortable managing (large numbers of variations, conditional options or custom pricing rules), my WooCommerce and WordPress development and emergency WordPress support cover product setup, theme template issues and plugin conflicts.

Once the variations are showing, test the full purchase: add a variable product to the basket, place a test order and check the right options (size, colour and so on) appear in the order confirmation and in the order in WooCommerce. If the checkout itself fails, see our guide to fixing WooCommerce checkout problems.