How to add “:” character after variant name in Variant element

Author: Anna Nguyen 240 views

On the Variant Picker element, normally, it will show “Color White“, or “Size Uk3” like this:

In case you want to have a “:” character after the variant name, it will show “Color: White“, or “Size: Uk3“. Please open the element setting -> Advance -> Attributes -> Custom CSS for this element to add the below CSS code to:

span.ecom-product-variant--option-label-text:after {
    content: ":" !important;

Then this is the result:

Leave a Comment

Enjoy a free 3-day trial. Then get your first month for $1. Try Now.