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 configuration or your site's setup is preventing them from displaying.

Variable products are one of the more complex parts of WooCommerce. Unlike simple products, they require several pieces of configuration to work together: the product type needs to be set correctly, attributes need to be configured and assigned, and individual variations need to be created for each combination of options. If any of these steps are incomplete or misconfigured, 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 configuration issues that trip up most people.

Check that the product type is set to "Variable"

This 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 on the front end, regardless of how your attributes are configured. Changing it to "Variable product" will reveal the Variations tab where you can set up the individual variations.

Check your attribute configuration

WooCommerce variations are built on product attributes (like size, colour, material). For variations to work, the attributes need to be configured correctly in two specific ways.

Open the product, go to the Attributes tab in the Product data section, and check the following for each attribute:

First, make sure the attribute has values assigned. If you're using global attributes (created under Products → Attributes), the relevant terms 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 to use as a variation option. If this checkbox isn't selected, the attribute will appear in the product's "Additional information" tab as descriptive text, but it won't generate any selectable variation options on the product page.

After checking your attributes, click Save attributes before moving on.

Create the actual variations

Having attributes configured with "Used for variations" ticked is only half the setup. You also need to create the individual variations themselves in the Variations tab.

Go to the Variations tab in the Product data section. If no variations exist yet, you'll see an empty list. Use the dropdown to select "Create variations from all attributes" and click Go. WooCommerce will generate a variation for every possible combination of your attribute values.

For example, if you have a "Size" attribute with Small, Medium and Large, and a "Colour" attribute with Red and Blue, WooCommerce will create six variations: Small/Red, Small/Blue, Medium/Red, Medium/Blue, Large/Red and Large/Blue.

Each variation needs at minimum a price set. Expand each variation and enter a Regular price. Variations without a price won't appear as selectable options on the front end. If you want all variations to use the same price, you can use the bulk edit dropdown at the top of the variations list to set the regular price for all variations at once.

After creating and configuring your variations, 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 on the front end if they're individually disabled or out of stock.

Expand each variation in the Variations tab and check:

The Enabled checkbox should be ticked. If a variation is unchecked, it won't appear as an option.

If you're managing stock at the variation level, check the Stock quantity for each variation. A variation with zero stock will be greyed out or hidden on the front end depending on your WooCommerce settings.

Also check the global stock visibility setting under WooCommerce → Settings → Products → Inventory. The "Hide out of stock items from the catalogue" option, if enabled, can remove out-of-stock variations from the dropdown entirely rather than just greying them out.

Check the parent product's visibility and status

The parent variable product itself also has visibility and stock settings that can prevent variations from displaying.

Make sure the product is published (not in draft, pending review or private). Check the Catalogue visibility in the Publish panel; while "Hidden" products should still be accessible by direct URL, test this to make sure your theme handles it correctly.

If you're managing stock at the parent product level rather than per-variation, check that the parent product is marked as "In stock." A parent product marked as out of stock will hide all of its variations, even if the individual variations have stock available.

Check for attribute term count limits

This is a less obvious cause that catches people with products that have many options. WooCommerce uses WordPress's taxonomy system to manage global product attributes, and WordPress has a default query limit on how many terms it loads at once.

If you have an attribute with a very large number of values (for example, 50 or more colour options, or a size attribute with dozens of entries), not all of them may be loaded on the product page. This can cause some variations to appear while others are silently missing.

This is a technical issue that typically requires a code-level fix to increase the term query limit. If you suspect this is the problem (particularly if only some variations are missing and you have attributes with many values), this is worth getting professional help with.

Check for theme issues

WooCommerce product pages rely on theme templates to display the variation selector, the dropdown menus and the add-to-cart button. If your theme has a custom product template that's outdated, incomplete or poorly implemented, variations may not display correctly.

The quickest test is to switch to a default WordPress theme (such as Twenty Twenty-Four) temporarily and check whether the variations appear on the product page. If they do, the problem is in your theme's WooCommerce templates.

Check WooCommerce → Status → System Status for any template overrides flagged as outdated. If your theme overrides WooCommerce's variable.php or add-to-cart/variable.php templates and these are out of date, they may be missing the code that renders the variation selector.

If outdated templates are flagged, you'll need to update them to match the current WooCommerce version or contact your theme developer for an updated version.

Check for JavaScript conflicts

The WooCommerce variation selector relies on JavaScript to function. When a customer selects an option from a dropdown, JavaScript handles updating the available options, displaying the correct price, showing the variation image and enabling the add-to-cart button. If a JavaScript error prevents this code from running, the dropdowns may appear but not respond, or they may not appear at all.

Open your browser's developer tools (F12) and check the Console tab for errors highlighted in red while viewing the product page. A JavaScript error from any plugin or theme can prevent the variation selector from initialising.

If you see errors, try deactivating plugins one at a time to identify the conflict. Start with plugins that add functionality to product pages, inject custom JavaScript or modify the front-end display. Page builder plugins, custom product tab plugins, image gallery plugins and quick-view plugins are common culprits.

Clear all caches

If you've made changes to your product configuration but the front end still shows the old state (no variations, missing dropdowns), caching may be serving an outdated version of the product page.

Clear your browser cache, your caching plugin's cache, any server-side cache from your hosting provider, and your CDN cache if you use one. See our guide to fixing WordPress sites not updating for a detailed walkthrough of clearing each caching layer.

WooCommerce also has its own internal transient cache for product data. You can clear WooCommerce transients under WooCommerce → Status → Tools by clicking the "Clear transients" button. This forces WooCommerce to regenerate its cached product data from the database.

Need help with WooCommerce product variations?

If variations still aren't displaying after working through these steps, or if the configuration is more complex than you're comfortable managing (large numbers of variations, conditional logic, custom pricing rules), my emergency WordPress support service covers WooCommerce product configuration, theme template issues and plugin conflict resolution.