Product page swatch label

Hello I want to change my swatch label position and remove speace between label and colon.

see here: https://ibb.co/XVRcZ4k

I want to make it like this: https://ibb.co/prNp0yf

Hello,

Please copy and paste the below given Custom CSS code to Theme Settings >> Custom CSS >> CSS code for Desktop and check your site after removing the browser cache.

.single-product .product-design-alt table.variations tr {
    display: block !important;
    width: 30%;
    margin: auto !important;
}
.single-product .variations_form .variations .value {
    width: auto !important;
    left: 5px !important;
}

Best Regards.

working on desktop thanks. I want to get same resault on mobile how can I do this?

Hello,

Please then paste that custom CSS code in the Global Custom CSS section. It will also apply on the mobile and desktop both.

Best Regards.

thank you how can I remove space between color label and colon

https://ibb.co/XVRcZ4k

Hello,

I saw the screenshot you attached.

Please try adding the following Custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

.variations_form .variations label:after {
    margin-left: -3px;
}

.variations_form .variations label {
    margin-bottom: -8px;
}

.swatch-on-single:not(:last-child) {
    margin-right: 10px;
}

Best Regards

[Author]

Posts