A popup gives a coupon room: a headline, a line of explanation, the code itself, a button that copies it, and a button that sends the visitor to the shop.
It is also the only place in this widget where the code is actually copied to the clipboard. The plain Click action just shows the code.
For the full settings tour of the Coupon Code widget, see Coupon Code Widget: Settings Overview.
Requirement – This widget is a part of The Plus Addons for Elementor Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Coupon Code ships only in The Plus Addons for Elementor Pro. The free plugin contains no coupon widget at all, so there is nothing to fall back to.
- Prerequisite: Elementor (free) installed and active.
- Widget to enable: go to The Plus Addons > Widgets, search for Coupon Code and turn its toggle on. This is the Widgets screen, not Extensions.
Set up the popup
- Edit the page with Elementor and drag the Coupon Code widget onto it.
- In Content > Layout, leave Coupon Type on Standard and pick one of the five pictures under Standard Style.
- In Content > Content, write the button text in Title, put the shop’s address in Redirect Link, pick a Copy Code Style and type the coupon into Code.
- Set Select Action to Popup. The popup’s own fields appear underneath.
- Fill in Title, Description, Copy Button, After Copy, Visit Button, Close Icon and Code Alignment.
The popup fields
| Setting | What it does | Default |
|---|---|---|
| Title | The heading inside the popup. | Here is your coupon code |
| Description | One line under the heading. | Use code on site |
| Copy Button | The label on the copy button. | Copy Code |
| After Copy | What the copy button says for two seconds after it is pressed. | Copied! |
| Visit Button | The label on the button that opens Redirect Link. | Visit Site |
| Close Icon | The icon on the close button. | empty |
| Code Alignment | Where the code sits inside the popup. | centre; responsive |
| Tab Reverse | Sends Redirect Link to the current tab and opens the popup in a new one. | off |
| Loop | Gives each rendered copy of the widget a page-unique id – needed inside a listing. Turning it on also reveals Popup Background Image. | off |
Content > Extra Options adds two more: Popup Width, in pixels or per cent, and On Scroll, which gives the popup its own Height and a scrollbar when the content is taller than that.
How It Behaves
- The popup opens over the page. Measured on a published page: clicking the coupon opened a 500 × 300 modal reading Here is your coupon code, Use code on site, the code, Copy Code and Visit Site, with a close button in the corner.
- Copy Code really copies. After the click, reading the system clipboard back gave exactly the coupon code, and the button’s label changed to Copied! before returning to Copy Code.
- Visit Site uses Redirect Link. If you leave Redirect Link empty the button has nowhere to go.
- The close button closes it. The popup and its overlay disappear and the page is as it was.
Limitations
- Closing the popup rewrites the address bar. The close handler strips the query string from the URL, so a visitor who arrived on
?utm_source=…or on any filtered or paginated address loses it the moment they close the popup. Measured: a page opened at/?page_id=4610showed/after the popup was closed. - Put one coupon popup on a page, not several. The popup’s open and close handlers, and the Popup Width setting, are written against every coupon popup on the page rather than the one widget, so two popup coupons on the same page interfere with each other. Only one popup coupon per page was measured.
- The popup is not a page-wide popup system. It only opens when the visitor clicks this coupon. For popups on a timer, on exit intent or on scroll, use the Popup widget instead.
- Icons can render as empty boxes. The widget’s scissors icon and the Close Icon use Font Awesome, which The Plus Addons does not load by itself. On a page with no other Font Awesome icon they can come out blank.
Not verified
So you know exactly what has and has not been checked:
- Popup Background Image. The field’s condition was confirmed (Standard + Popup + Loop enabled) but no image was set and the rendered popup background was not observed.
- On Scroll and its Height slider, and the Popup Scroll Bar style section. Labels, defaults and conditions only.
- The Style tab. Standard Style 1 and Style 3 were rendered; no colour, typography, border or popup-styling control was exercised.
- Popup Width. The control exists and writes a maximum width; no value was applied and measured.
Troubleshooting
Nothing happens when I click
Check the published page rather than the Elementor preview. Then check Select Action is still Popup – switching Coupon Type away from Standard hides the whole popup section.
The copy button does nothing
Copying needs a page served over HTTPS in most browsers. On a plain HTTP staging site the button may change to Copied! without anything reaching the clipboard.
The visitor loses their tracking parameters
Closing the popup rewrites the address bar without the query string. If you depend on campaign parameters, read them before the popup is closed, or use the Click action instead.
The close icon is an empty square
Pick an icon in Close Icon, and make sure Font Awesome is loaded on the page – the widget does not load it.
