How to add “:” character after variant name in Variant element
On the Variant Picker element, normally, it will show “Color White“, or “Size Uk3” like this:
![](https://help.ecomposer.io/wp-content/uploads/2024/01/image-14-1024x550.png)
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:
![](https://help.ecomposer.io/wp-content/uploads/2024/01/image-15-1024x550.png)
![](https://help.ecomposer.io/wp-content/uploads/2024/05/z5419524760567_ce0bbdc5f2e6c7423886ebb08c01d792.jpg)