Variable Products based on Image Swatches, with Associated Color Names

This topic has 5 replies, 3 voices, and was last updated 1 minute ago ago by Tony Rodriguez

  • Avatar: enduratex@gmail.com
    Enduratex
    Participant
    February 2, 2026 at 06:44

    Hello,
    Our store is based on Vinyl Products with Image Swatch variations.
    We also have mapped a single standard color name to each Image Swatch,
    solely for the purpose of enabling “Filter by Color” functionality on the shop page.

    The Problem:
    These 2 attributes are not intended to work in the same way that normal Size & Color would work.
    i.e. Where you would normally have small through large X all the colors to generate numerous variations.
    In that ( standard model ) – you must pick a Size & Color together in order to “Add to Cart”.

    But that’s not the functionality we need.
    What We Actually Want:
    1. Image Swatches ONLY are visible on the product pages
    2. Visitor can click through any or all Image Swatches to see them.
    3. The “color names” are not visible, but are used on the Shop page for filtering.

    Unfortunately, the product page is not letting anybody just pick a swatch and add-to-car.
    It is insisting that the user also pick the matching color.

    The Question:
    How do we get around this limitation?
    Also disabling the “visible on product page” option for the Color Attribute has no effect.
    The colors still show up and the single color option available for each Image Swatch must still be selected before you can add to cart.

    If we remove the color attribute, then there is no way for visitors on the shop page to “Filter by Color”
    But when we add the color attribute to each image swatch, then it acts like as if it were a normal required Size & Color combo.

    There has got to be a standard answer for this?
    Worse yet, IF I add jQuery to automatically find and auto-click the single, mapped color name for each image swatch, then the product page “greys out” all other image swatches making them un-clickable until you click on the “Clear” link to un-do the variation selections currently active.

    Please Advise:
    How can we have Image Swatch-base variable products but WITH filterable mapped color names as well?

    Thank You

    Files is visible for topic creator and
    support staff only.
    4 Answers
    Avatar: Jack Richardson
    Jack Richardson
    Support staff
    February 2, 2026 at 09:02

    Hello @Enduratex,

    Could you please clarify the main purpose of using an additional plugin for swatches? Was it intended as a design enhancement to make the swatches larger and include tooltips? Please note that, according to the WooCommerce code, if a product has variation attributes, each attribute type must be selected to determine the variation ID for that combination. This behavior is not a bug or issue related to our theme.

    If your goal is simply to adjust the design of the swatches, we recommend using only our built-in swatches by setting the image types for the relevant attributes (https://prnt.sc/4HB91a1pHMDH) and then refining the design with custom CSS, for example:

    .cart .sten-li-disabled:after, .cart .type-color:after, .cart .type-image:after {
        transform: translateX(-50%);
        width: 100%;
        background: #1e1e1e;
        color: #fff;
    }
    
    form.cart li.type-image {
        min-width: 150px;
        min-height: 150px;
    }

    Frontend example: https://gyazo.com/40db17b1456d7cee75c47e34108fee65

    We would be happy to assist you in improving the custom CSS if you could confirm that this solution works for you when using only our built-in swatches with a redesigned appearance.

    Best regards,
    Jack Richardson
    The 8Theme’s Team

    Avatar: enduratex@gmail.com
    Enduratex
    Participant
    February 2, 2026 at 10:20

    Hi Jack,
    Thank you for the reply.
    Actually, we are already using your built-in Image Swatches functionality:
    We had originally needed a plugin because the 1250 unique image swatch variation attribute names were added as Local Attributes, and your theme does not support that type of image swatch.

    But we just finished converting all 80 products and 1200 variations back to use a global “Swatch” attribute and it’s working fine.

    We also had a mis-understanding about how to apply a “Standard Color Name” to every Image Swatch ( for shop & archive page filtering purposes only ).

    Now that we’ve realized there’s no way to have 2 searchable attributes, with only 1 used for variations…
    Our entire question above has become moot and irrelevant.

    The correct answer has been found:
    1. We need to add custom data to variations, not attempt to use an extra attribute. IconicWP “Custom Fields for Variations” should do that for us.
    2. If we want to map “Standard Color Names” to all of our Image Swatch variations, then that’s an extra meta data field to add to each variation, not an extra attribute.

    Then we can properly Filter by Color on the Shop Page
    and show Single Variations search results using yet another plugin to enable “Variations as Single Products” when a custom filter is applied.

    Thank you for the answer, but I believe that our approach to the problem was all wrong, and our requirements were outside the scope of what I could ask from you as the Theme vendor.

    We’ll close out this ticket and mark it resolved.

    Thank You

    Avatar: enduratex@gmail.com
    Enduratex
    Participant
    February 2, 2026 at 10:24

    Thanks for the support! My topic “Variable Products based on Image Swatches, with Associated Color Names” has been successfully resolved.

    Avatar: Tony Rodriguez
    Tony Rodriguez
    Support staff
    February 2, 2026 at 10:24

    Dear Enduratex,

    We really appreciate your time and engagement within the WordPress & WooCommerce community

    Your feedback drives every improvement we make in XStore — helping us deliver a smoother and more flexible experience with each update.

    Your input makes a real difference.

    Topic closed.
    The 8Theme Team

  • Viewing 5 results - 1 through 5 (of 5 total)

The issue related to '‘Variable Products based on Image Swatches, with Associated Color Names’' has been successfully resolved, and the topic is now closed for further responses

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.