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

Troubleshooting Common Variation Swatches Display Issues on Your WooCommerce Store

19 threads Sep 10, 2025 Plugin → Variation swatches for woocommerce

Content

Variation Swatches for WooCommerce is a powerful tool for enhancing your product pages, but like any plugin, it can sometimes have display conflicts with themes or other plugins. Based on common community reports, here are the most frequent visual issues and how to resolve them.

Common Display Issues and Their Causes

Users often report problems such as swatches appearing in the wrong position, not wrapping correctly on mobile, having strange alignment, or not showing at all on shop pages. These problems typically stem from a few key areas:

  • Theme Conflicts: Many modern WooCommerce themes, such as Woodmart, Avada, OceanWP, and Cartsy, have their own built-in swatch systems. Having both enabled simultaneously is a primary cause of layout conflicts.
  • Plugin Conflicts: Another plugin's CSS or JavaScript can interfere with the swatches' styling and functionality.
  • Custom CSS: Theme or custom CSS can sometimes override the swatches' styles, affecting their appearance, alignment, or spacing.
  • Archive Page Integration: Displaying swatches on shop or archive pages is a complex feature that can be particularly sensitive to theme templates.

Step-by-Step Troubleshooting Guide

Follow these steps to identify and fix the root cause of your swatch display problems.

1. Disable Built-in Theme Swatches

This is the most common fix. If your theme has its own variation swatch feature, you must disable it to prevent conflicts.

  1. Navigate to your WordPress admin dashboard.
  2. Go to your theme's settings panel (often found under Appearance > Theme Settings or a specific menu item named after your theme).
  3. Look for options related to "Product Variations," "Swatches," or "Attribute Styles."
  4. Disable these options, save your changes, and check if the issue is resolved.

2. Perform a Conflict Test

If disabling the theme's swatches doesn't work, a full conflict test is the best way to pinpoint the issue.

  1. Switch to a Default Theme: Temporarily switch your theme to a default WordPress theme like Storefront or Twenty Twenty-One. If the swatches display correctly, the issue is with your original theme.
  2. Deactivate Other Plugins: If the issue persists with a default theme, deactivate all plugins except for WooCommerce and Variation Swatches for WooCommerce.
  3. Check if the problem is resolved. If it is, reactivate your plugins one by one, checking after each activation, to identify the conflicting plugin.

3. Apply Custom CSS Fixes

For specific visual tweaks, you can add custom CSS. Common fixes include:

Fixing Mobile Layout and Text Alignment:

.woo-variation-swatches .wvs-style-squared.variable-items-wrapper .variable-item:not(.radio-variable-item).button-variable-item {
   height: auto;
}

@media screen and (max-width: 980px){
    .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
        text-align: left;
    }
}

Adjusting Swatch Alignment and Width:

.variations td.label {
    width: 50px;
}

.woocommerce.woo-variation-swatches-stylesheet-enabled .variable-items-wrapper {
    justify-content: flex-start !important;
}

To add this CSS, go to your WordPress dashboard under Appearance > Customize > Additional CSS, paste the code, and publish your changes.

When to Seek Further Help

If these steps do not resolve your issue, the problem may be highly specific to your theme's template structure. In such cases, it is recommended to reach out to your theme's support team for assistance, as they will be most familiar with their codebase.

For users of the Pro version of Variation Swatches for WooCommerce, note that support for premium features must be handled directly through the developer's official support channel, as per WordPress.org forum guidelines.

Related Support Threads Support