---
title: "How to Style WooCommerce Pop-Up Notices with the Customizer"
description: "Style WooCommerce popup notices in the WordPress Customizer: colors, borders, the close button and icons. Pro."
url: "https://wpfactory.com/docs/woocommerce-popup-notices-custom-style/"
updated: "2026-09-27"
category: Pro Features
---

# How to Style WooCommerce Pop-Up Notices with the Customizer

Styling WooCommerce pop-up notices, their colors, borders, close button, and icons, is done in the WordPress Customizer. [Popups for WooCommerce: Add to Cart, Checkout & More](https://wpfactory.com/item/popup-notices-for-woocommerce/) Pro adds a dedicated **Popup Notices** Customizer panel with live preview. This is a Pro feature.

![Popup Notices panel in the WordPress Customizer, General Style section](https://wpfactory.com/wp-content/uploads/woocommerce-popup-notices-custom-style-1.png)

### Before you start

- WooCommerce, active.
- [Popups for WooCommerce: Add to Cart, Checkout & More](https://wpfactory.com/item/popup-notices-for-woocommerce/) Pro.
- **Enable custom style** ticked at **WPFactory > Popups** (also reachable at **WooCommerce > Settings > Pop-up Notices**), in the **Custom style** group.

### Open the Customizer panel

1. Go to **Appearance > Customize**.
2. Open the **Popup Notices** panel.
3. Use the sections below and watch the preview update live. Click **Publish** to save.

### General Style

| Control | Default |
| --- | --- |
| Popup background | #ffffff |
| Notice background | #eeeeee |
| Text color | #6d6d6d |
| Text size | 16 |
| Link color / Link hover color | #347AC3 / #54a9ff |
| Justify content / Text align | Center / Left |
| Border radius / width / color | 4 / 0 / #c1c1c1 |
| Icons - Hide | Off |
| Icons - Hide on small devices | On |
| RTL - Right to Left | Off |
| Force Settings (override theme) | Off |
| Content max height (scroll long content) | 0 (none) |

**Tip:** if your theme overrides pop-up colors, enable **Force Settings** to apply the plugin's styles with higher priority.

### Close button and notice icons

- **Close Button - External**: horizontal and vertical position and offset, background, color, and border radius of the button that sits on the pop-up corner.
- **Close Button - Internal**: an optional in-pop-up close button, with display toggle, background and text color, and button text (default "Close").
- **Success / Error / Info Notice**: each has an **Icon Class** and **Icon Color** (defaults #22bf21, #e21616, #347ac3). When **Use Font Awesome** is on, an icon picker is shown; otherwise you type an icon class.

### Ready to set this up?

The Customizer styling panel is a Pro feature of [Popup Notices](https://wpfactory.com/item/popup-notices-for-woocommerce/). [Get Popup Notices Pro](https://wpfactory.com/item/popup-notices-for-woocommerce/).

Related articles

- [How to Customize Pop-Up Notices in WooCommerce Pro](https://wpfactory.com/docs/enhance-pop-up-notices/)
- [Pop-up Notices Pro Version – Compatibility Options](https://wpfactory.com/docs/pro-version-compatibility/)
- [Pop-Up Notices General Options](https://wpfactory.com/docs/general-popup-options/)
- [How to Hide Specific Notices from WooCommerce Pop-Ups](https://wpfactory.com/docs/woocommerce-popup-ignore-messages/)
- [Troubleshooting Pop-up Notices for WooCommerce](https://wpfactory.com/docs/pop-up-notices-fixes/)