Changing Size Swatches

Hi there, I want to change the look of the swatch, instead of black line underneath the attribute to a square box surrounding it, ive attached to screenshots – what i have now and what i want
Please help

Hello,

Please, provide your site admin access to the private area.

I will provide custom CSS for the swatches.

Best Regards

Provided in private

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.wd-swatch:hover:after, 
.wd-swatch.active-swatch:after {
    display:none;
}
body .wd-swatch.swatch-with-bg {
    border-radius: 0;
    border:2px solid #000000;
}
body .swatch-on-single.swatch-with-bg.swatch-size-xlarge {
    width:70px;
    height: 70px;
}

Best Regards

I entered it but it put square buttons on the product images swatches, not the size attributes ..
Please help

Hello,

Please replace the code with this one:

.swatch-on-single.text-only.swatch-size-large {
    font-size: 18px;
    border:2px solid #000000;
    padding:20px
    width:70px;
	  height:70px;
}
.swatch-on-single.swatch-enabled {
    font-size: 18px;
    border:2px solid #000000;
    padding:20px;
    width:70px;
    height:70px;
} 

Best Regards

[Author]

Posts