Home › Forums › WoodMart support forum › Swatch Selector Style

Swatch Selector Style

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 23, 2020 at 2:05 pm #253336

    shweta
    Participant

    For the link of the product attached, you can see that there is small underline below the selected size. Can we choose to have a circle/square around the selected size?

    December 24, 2020 at 1:12 am #253425

    Elise Noromit
    Member

    Hello,

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

    .swatch-on-single.swatch-enabled {
	border:2px solid transparent;
	padding:5px 7px;
}
.swatch-on-single.swatch-enabled:hover {
	border:2px solid #333333;
	padding:5px 7px;
}
.woodmart-swatch.text-only:after {
    display:none;
}

    Best Regards

    January 13, 2021 at 5:15 am #257878

    shweta
    Participant

    Hello Team,

    The boxes are not visible when I’m selecting any size in the CSS code provided by you kindly look at that. for better understanding please the attached screenshot.

    Best

    Attachments:
    You must be logged in to view attached files.
    January 13, 2021 at 12:26 pm #258036

    Elise Noromit
    Member

    Hello,

    Please replace the custom Custom CSS provided before with this one: 

    .swatch-on-single.swatch-enabled {
	border:2px solid transparent;
	padding:5px 7px;
}
.swatch-on-single.swatch-enabled:hover,
.swatch-on-single.swatch-enabled.active-swatch {
	border:2px solid #333333;
	padding:5px 7px;
}
.swatch-on-single.swatch-enabled:after {
    display:none;
}

    Best Regards

  • Author
    Posts

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)