Back to Community
Home / Community / Plugin → Variation swatches for woocommerce

How to Use Swatches for Colors and Dropdowns for Sizes in WooCommerce

29 threads Sep 9, 2025 Plugin → Variation swatches for woocommerce

Content

Many WooCommerce store owners want the best of both worlds: the visual appeal of color swatches and the practicality of a standard dropdown for attributes with many options, like sizes. A common issue reported by users of the 'Variation Swatches for WooCommerce' plugin is that it automatically converts all attribute types to swatches, which isn't always ideal.

This behavior happens because the plugin has a global setting to enable swatches for all suitable attributes. Fortunately, the solution is straightforward and doesn't require any custom code.

How to Configure Selective Swatches

To use color swatches while keeping your size attribute as a standard dropdown, follow these steps:

  1. Navigate to your WordPress admin dashboard.
  2. Go to WooCommerce → Settings → Products → Variation swatches.
  3. Find the setting labeled "Enable Swatches" and uncheck the box. This global setting, when disabled, allows you to control swatches on a per-attribute basis. A user in Thread 21 confirmed this was the solution after receiving guidance from the plugin's support.
  4. Click "Save Changes".

Now, you need to configure each attribute individually:

  1. Go to Products → Attributes.
  2. Edit your "Color" attribute (or whatever you have named your color attribute).
  3. For the "Type" field, select "Color" from the dropdown menu. Save the changes.
  4. Next, edit your "Size" attribute.
  5. For the "Type" field, select "Select" from the dropdown menu. This will ensure it displays as a standard WooCommerce dropdown and not as button swatches. Save the changes.

This method, referenced in multiple threads (2, 3, 18, 21, 24), is the officially suggested way by the 'Variation Swatches for WooCommerce' team to achieve a mixed interface of swatches and dropdowns.

Troubleshooting Tip

If you have followed these steps and the size attribute is still displaying incorrectly, clear your website's cache (both any caching plugins you have and your browser cache) and check again. The changes should take effect immediately.

By configuring these settings, you can create a more user-friendly product page that caters to the specific needs of each product attribute.

Related Support Threads Support