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

How to Mix Dropdowns and Swatches for Better WooCommerce Variations

43 threads Sep 16, 2025 Plugin → Variation swatches for woocommerce

Content

Many WooCommerce store owners face a common dilemma: they want the visual appeal of swatches for some product attributes (like color) but need the compact efficiency of a dropdown for others (like size or a long list of options). Manually managing this can be frustrating and often leads to a cluttered, inconsistent user experience.

This issue typically arises because WooCommerce's default behavior is to display all variation attributes in the same format, either as dropdowns or, if a plugin is active, as a uniform type of swatch. The need to mix and match formats is a common request to improve both aesthetics and functionality on product pages.

Solution: Using the 'Select' Type for Dropdowns

Based on community discussions and solutions, the 'Variation Swatches for WooCommerce' plugin allows for this mixed display. The key is in how you configure your product attributes within the plugin.

Here is the standard process to achieve a mix of dropdowns and swatches:

  1. Configure Global Settings: Navigate to WooCommerce → Settings → Products → Variation Swatches for WooCommerce. Here, you can set the default display type for your attributes (e.g., set 'Color' to display as a 'Color' swatch and 'Size' to display as a 'Button').
  2. Set Specific Attribute Types to 'Select': For any attribute you wish to display as a traditional dropdown, you must ensure its type is set to 'Select'. This setting overrides any global swatch styling and forces that specific attribute to appear as a dropdown menu, while other attributes will display as the swatch type you've chosen for them.
  3. Verify on the Product Page: After saving your settings, check a variable product that uses these attributes. You should now see a combination of visual swatches and a clean, space-saving dropdown.

This method is effective for creating a more organized product page, especially when dealing with attributes that have a large number of options that would otherwise create an overly long row of buttons.

Alternative: Custom CSS for Advanced Layouts

For users with specific design requirements, such as displaying swatches in multiple columns, custom CSS can be a powerful tool. As seen in one user's solution, adding CSS to your theme (ideally a child theme) can modify the layout.

Example CSS for a grid layout:

.variations tr {
    display: grid;
    grid: minmax(60px, min-content) / repeat(auto-fill, 180px);
    float: left;
}
@media screen and (max-width: 768px) { 
    .variations tr {
        grid: minmax(50px, min-content) / repeat(auto-fill, 140px);
    }
    .variable-item:not(.radio-variable-item) {
        width: 90px;
        height: fit-content;
    }
}

Important: Always test custom code on a staging site first. The exact CSS selectors needed may vary depending on your active theme.

By understanding these configuration options, you can significantly enhance the usability and look of your product variation selections, providing a better experience for your customers.

Related Support Threads Support