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](https://www.commercegurus.com/wp-content/uploads/2023/10/customcss-class.png)
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.
1 2 3 4 |
dialog.mystore-popup, dialog.mystore-popup .cgpopup-modal--container { border-radius: 0px; } |
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](https://www.commercegurus.com/wp-content/uploads/2023/10/customcss-class-button.png)
To increase the button font size
1 2 3 |
.custom-button { font-size: 20px; } |
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