Why Does WooCommerce Still Show Dropdowns After Installing The Swatches Plugin?

Installing a variation swatches plugin should replace standard WooCommerce dropdowns with color, image, or button-style options. But sometimes the product page still continues to show dropdowns.

Usually, this does not mean the plugin is broken. The issue is often related to product attributes, variation settings, plugin configuration, caching, or a theme conflict.

Here is how to find the exact cause and fix it properly.

Why WooCommerce Uses Dropdowns by Default

WooCommerce displays variable product attributes as dropdown fields by default.

For example, a T-shirt may have:

• Color: Red, Blue, Black
• Size: Small, Medium, Large

A swatches plugin normally changes how these existing variation options appear on the frontend.

So, if WooCommerce continues to show dropdowns, it usually means the swatches plugin is not successfully converting the original variation selector.

That gives us a clear place to start troubleshooting.

1. Make Sure the Product Is a Variable Product

First, edit the affected WooCommerce product.

Go to:

Products → Edit Product → Product Data

Check that the product type is set to:

Variable product

Then open the “Attributes” section.

Make sure your variation attributes exist and that “Used for variations” is enabled.

For example:

• Color
• Size
• Material

Next, open the Variations tab and confirm that actual variations have been created.

If you add attributes but do not create variations, a swatches plugin may not have the necessary variation data to work with.

This is one of the first things to verify when a product continues to show dropdowns.

2. Check the Attribute Display Type

Installing a swatches plugin does not always convert every attribute automatically.

Many plugins allow you to select how each attribute should appear.

Go to:

Products → Attributes

Edit the relevant attribute.

Depending on the plugin, you may see display options such as:

• Select
• Color
• Image
• Button
• Label
• Radio

If the attribute is still configured as “Select,” the product can continue to show dropdowns.

For a Color attribute, select a color swatch option.

For attributes such as Size, Capacity, or Style, buttons or labels often make more sense.

Save the settings and check the product page again.

3. Check Whether You Are Using Global or Custom Attributes

WooCommerce has two common ways to create attributes.

You can create a global attribute from:

Products → Attributes

Or you can manually add a custom attribute directly inside an individual product.

This difference matters because some swatches plugins provide better support for global WooCommerce attributes.

For example, instead of manually typing a Color attribute inside a product, create:

Products → Attributes → Color

Then add terms such as:

• Red
• Blue
• Black
• White

Return to your product and use that global attribute.

If your current product continues to show dropdowns, replacing custom attributes with global attributes is worth testing.

After making the change, remember to review your variations again because changing attributes can affect existing variation combinations.

4. Re-Save the Product Data and Permalinks

Sometimes the configuration is correct, but WooCommerce simply needs the data refreshed.

Open the affected product and do the following:

• Open Attributes
• Click Save attributes
• Open Variations
• Click Save changes
• Update the product

Then go to:

Settings → Permalinks

Click “Save Changes” without changing the permalink structure.

Now reload the product page.

This simple refresh can sometimes resolve a product that unexpectedly continues to show dropdowns even though the attribute settings appear correct.

5. Review the Swatches Plugin Settings

Next, check the settings of your variation swatches plugin.

Different plugins organize these options differently, but look for settings related to:

• Single product pages
• Shop pages
• Product archives
• Attribute types
• Automatic conversion
• Default variation style
• Swatch display
• Dropdown fallback

Some plugins may have swatches enabled for archive pages but disabled for individual product pages.

Others may intentionally show dropdowns whenever an attribute does not have a valid swatch type assigned.

Make sure the swatches feature is enabled for the exact location where you are testing it.

6. Clear All Available Cache

Caching can make troubleshooting much more confusing.

You may fix the product correctly but still see an older cached version of the page.

Clear any cache used by:

• Your WordPress caching plugin
• Your hosting or server
• Your CDN
• Your browser
• WooCommerce transients

After clearing the cache, test the product in an incognito or private browser window.

If the normal browser continues to show dropdowns while the private window displays swatches correctly, the problem is very likely related to cached frontend content.

Also check optimization plugins that combine, delay, or defer JavaScript files. These can sometimes interfere with scripts used by variation swatches plugins.

7. Check for a Theme Compatibility Issue

Your WordPress theme may modify WooCommerce’s standard variation form.

This is especially common with WooCommerce-focused themes that include their own product variation features.

A swatches plugin usually expects certain WooCommerce elements to be available on the page. If your theme replaces or heavily modifies those elements, the plugin may fail to convert the dropdown fields.

A useful test is to temporarily activate a standard WooCommerce-compatible theme such as Storefront.

Then open the same product again.

If the product no longer continues to show dropdowns and the swatches appear correctly, you have strong evidence that the issue is related to the theme.

At that point, check whether the swatches plugin includes a compatibility setting for your theme before making any code changes.

8. Check for Plugin Conflicts

Another WooCommerce plugin may also be modifying your variation form.

Plugins that are worth checking include:

• Product variation gallery plugins
• Product addon plugins
• Quick view plugins
• Product filter plugins
• Variation table plugins
• Product bundle plugins
• Performance optimization plugins

Temporarily deactivate other WooCommerce-related plugins while keeping WooCommerce and your swatches plugin active.

Then test the product.

If WooCommerce stops trying to show dropdowns after one plugin is disabled, you have probably found the conflict.

You can then check both plugins for compatibility settings or contact their developers with specific information about the conflict.

9. Check the Browser Console for JavaScript Errors

Variation swatches often depend on JavaScript.

If another script on the page generates an error, it can sometimes prevent the swatches script from running properly.

Open the affected product page and press:

F12 → Console

Look for red error messages.

Pay particular attention to errors involving:

• jQuery
• WooCommerce variation scripts
• Your swatches plugin
• Theme JavaScript
• Optimization or minification scripts

If the page continues to show dropdowns even though all settings look correct, a JavaScript error is an important thing to investigate.

Try resolving the first major console error and then reload the product page.

10. Create a Fresh Test Product

If you still cannot identify the problem, create a new test product.

Keep it simple.

Create:

• One variable product
• One global Color attribute
• Three terms such as Red, Blue, and Green
• Three matching variations

Then configure Color as a swatch attribute.

Do not add any additional product options while testing.

If the new product displays swatches correctly, the swatches plugin itself is probably working properly. The issue is likely specific to the original product’s data or attribute configuration.

If the new product also continues to show dropdowns, focus on plugin settings, JavaScript errors, theme compatibility, caching, or plugin conflicts.

FAQs

Conclusion

If WooCommerce continues to show dropdowns after installing a swatches plugin, start with the product configuration before reinstalling anything.

Check the product type, attributes, variations, swatch settings, and cache first. If those are correct, test for theme conflicts, plugin conflicts, and JavaScript errors.

In most cases, once you identify what is preventing the plugin from converting WooCommerce’s default selector, the swatches start working normally again.