Product color variants as images instead of a dropdown

Hello,

Thank you for reaching out to us.

You can find detailed information about Variation Swatches in our documentation here:
https://www.8theme.com/documentation/xstore/xstore-features/variation-swatches-3/

If you have any further questions or need additional assistance, please feel free to ask. We are happy to help!

Best Regards,
8Theme’s Team

Hello,

Thank you for reaching out to us.

WooCommerce provides two types of product attributes:
– Global Attributes: These attributes are created under WP-Admin > Products > Attributes. They are available for all products across the website and can be used for filtering.
– Local Attributes: These attributes are created when editing an individual product. They are only visible on the product page and cannot be used for filtering.

The XStore theme only supports global attributes for variation swatches. Ensure that your product variations are set up using global attributes – https://prnt.sc/0ozDvEaeUDFR
Here is a video example – https://www.youtube.com/embed/LgzC4iK-j6A

Best regards,
8Theme’s Team

Hello,

Thank you for reaching out to us.

To adjust the width and height of the variant images, custom CSS code can be used, for example:

.single-product ul.st-swatch-size-large li.type-image {
    width: 60px;
    height: 60px;
}

https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

Best regards,
8Theme’s Team

Hello,

We appreciate your prompt response.

We’ve changed your custom CSS code from https://prnt.sc/YTuK4HTA1ygU to https://prnt.sc/yZTb44cvKzyu
Kindly review the changes and let us know if any further adjustments are needed.

Best regards,
8Theme’s Team