Css

Hello,

1) To reduce the size of the onsale label you need to use the following custom CSS under Global Custom CSS area Under Theme Settings >> Custom CSS.

.product-label.onsale {
font-size: 10px;
border-radius:25px;
}

If you want to reduce the size of the badge you need to decrease the size of the font as well which would cause some readability issues.

2) To change the position of the badge on the right side you need to Go to Theme Settings >> Shop >> Product Styles.

You can set it according to your requirement.

Screenshot for Clarification: https://ibb.co/CtR3Rx4

3) Please confirm if you want to change the text color or want to display colors there.

4) Select options is Already a button you change also change its styling from Theme Settings >> Shop >> Product Styles.

Screenshot for Clarification: https://ibb.co/CtR3Rx4

Best Regards.

Hello,

1) You need to increase the border radius while you are trying to reduce the font-size.

2) Unfortunately, there is no other option in Theme Settings Available to display the badge on the right side. You need to add the following custom CSS in the Global Custom CSS area under Theme Settings >> Custom CSS.

body .labels-rounded {
top: 7px;
left: auto;
right: 7px;
}

3) To Display Colors on the product grids Go to Theme Settings >> Shop >> Attribute Swatches.

Screenshot for Clarification: https://ibb.co/7Yxh1yX

4) As I mentioned in my previous reply the select option is already a button you don’t need to transform it into a button.

You can change its styling from Theme Settings >> Shop >> Product Styles.

Screenshot for Clarification: https://ibb.co/CtR3Rx4

Best Regards.