Get a fast, conversion-focused WooCommerce theme in 2024. Switch to Shoptimizer.

Home Documentation CommerceGurus Popups Adding a Custom CSS Class (with Code Examples)

Adding a Custom CSS Class (with Code Examples)

You can adjust the style of a particular popup with custom CSS if you wish. Within the Triggers tab you can enter a class within the Custom CSS class input field.

When entering a custom CSS class, ensure that you do not include the dot prefix.

For example, you could include a class called mystore-popup and use this to change the styling of a particular popup. The examples below target this particular class name, but you can change it to anything you like.

Popup Custom Class

To remove the rounded corners from the popup

This CSS snippet will change the corners to be square, removing the default border radius which gives the popup rounded corners.

Adding Custom Button Classes

You can also include a custom CSS class to the primary buttons within the popup, i.e. the discount button and the close button.

Custom CSS Class on the Discount Button

To increase the button font size

Where to include Custom CSS?

Custom CSS code can be added to the styles.css file of a child theme, or within:
Appearance > Customize > Additional CSS