---
title: "How to Customize the WooCommerce Pop-Up Modal Template"
description: Edit the HTML template behind WooCommerce popup notices to change structure, classes or wrapper markup.
url: "https://wpfactory.com/docs/woocommerce-popup-modal-template/"
updated: "2026-09-27"
category: Developers
---

# How to Customize the WooCommerce Pop-Up Modal Template

The modal template is the HTML that builds the pop-up. Editing it lets a developer change the structure, classes, or wrapper markup. [Popups for WooCommerce: Add to Cart, Checkout & More](https://wpfactory.com/item/popup-notices-for-woocommerce/) exposes the template as an editable field, and this is available in the free version.

![Modal template field in Custom style](https://wpfactory.com/wp-content/uploads/step35.popup_-1024x495.png)

### Where to edit it

Go to **WPFactory > Popups** (also reachable at **WooCommerce > Settings > Pop-up Notices**), open the **Custom style** group, and edit **Modal template** (`ttt_pnwc_opt_modal_template`).

### The default template

```
<div class="ttt-pnwc-modal micromodal-slide" id="ttt-pnwc-notice" aria-hidden="true">
  <div class="ttt-pnwc-overlay" tabindex="-1" data-micromodal-close>
    <div class="ttt-pnwc-container" role="dialog" aria-modal="true" aria-labelledby="modal-1-title">
      <div class="ttt-pnwc-wrapper">
        <header class="ttt-pnwc-header">{header_content}</header>
        <div class="ttt-pnwc-content" id="modal-1-content" data-content="true"></div>
        <footer class="ttt-pnwc-footer">{footer_content}</footer>
      </div>
    </div>
  </div>
</div>
```

### Rules to keep

- Keep the `{header_content}` and `{footer_content}` placeholders; the plugin swaps in the close button and any footer content there.
- Keep the `ttt-pnwc-content` element with `data-content="true"`: the notice text is injected into it.
- Keep a close control carrying `data-micromodal-close`, or customers cannot close the pop-up.
- The `data-micromodal-close` attribute on `.ttt-pnwc-overlay` is what closes the pop-up on an outside click. Enabling **Prevent closing if clicking outside** removes it automatically, so do not hand-edit that behavior.

**Tip:** prefer the `ttt_pnwc_modal_template`, `ttt_pnwc_header_content`, and `ttt_pnwc_footer_content` filters for programmatic changes so your edits survive setting resets. See the [Developer hooks, filters and shortcodes reference](https://wpfactory.com/docs/popup-notices-for-woocommerce/).

### Need a hand?

Our team answers developer questions on the [Popup Notices support forum](https://wpfactory.com/support/item/popup-notices-for-woocommerce/).

Related articles

- [How to Customize Pop-Up Notices in WooCommerce Pro](https://wpfactory.com/docs/enhance-pop-up-notices/)
- [Template Variables in Pop Up Notices](https://wpfactory.com/docs/template-variables-popup/)
- [How to Style WooCommerce Pop-Up Notices with the Customizer](https://wpfactory.com/docs/woocommerce-popup-notices-custom-style/)
- [How to Play a Sound When a WooCommerce Pop-Up Opens](https://wpfactory.com/docs/woocommerce-popup-audio/)
- [How to Load WooCommerce Pop-Ups Only on Specific Pages](https://wpfactory.com/docs/woocommerce-popup-restrictive-loading/)