How to place size guide under size swatch

Hello, anoop,

Regarding the separation of the cart block, it is not possible to divide it. However, you can place the Size Guide block below the entire cart block.
The “Buy Now” block can be removed by disabling it in the Elementor editor.

As for applying different styles to the size and color variation blocks, you can assign them while creating the attributes. You can find more detailed information here:

https://www.8theme.com/documentation/xstore/video-tutotials/variation-swatches/
https://www.8theme.com/documentation/xstore/woocommerce/variation-swatches-3/

Best regards,
8Theme Team

Hello @anoop,

The settings you mentioned apply only to the select field; however, there are swatches with a label type on your Single product content. If you would like to modify the colors of these items, you can use the following custom CSS:

selector ul.st-swatch-preview-single-product li.type-label {  
    background: green;  
    color: red;  
    border-color: blue;  
}

If you would like to customize only the selected item, use next custom CSS:

selector ul.st-swatch-preview-single-product li.type-label.selected {
    background: green;
    color: red;
    border-color: blue;
}

selector ul.st-swatch-preview-single-product li.type-label.selected span {
transform: scale(2);
}

Please add this CSS in Dashboard → XStore Builders → Single Product Builder → Edit with Elementor -> find the Cart Form widget → Advanced tab, then scroll to the “Custom CSS” section.

If you still require our assistance, kindly provide temporary wp-admin access in private content.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @anoop,

Please, try adding next custom CSS to modify the CSS of outofstock items:

selector ul.st-swatch-preview-single-product li.type-label.sten-li-disabled {
    border-color: blue !important;
}

selector ul.st-swatch-preview-single-product li.type-label.sten-li-disabled > span {
    color: green;
}

selector ul.st-swatch-preview-single-product li.type-label.sten-li-disabled span:after {
    background: orange;
    opacity: .3;
}

Kind regards, Jack Richardson
The 8theme’s team

Hi,

Thank you for your question. Unfortunately, it is not possible to use more than one image for the size chart at the moment. You can, however, combine multiple images into a single file and upload it as one image if needed.

Best Regards,
8Theme’s Team