Skip to content

How to Show Promo Code in an Elementor Template?

Table Of Content

The plain fields on a coupon card give you a title and a line of description. That is enough for a code, and not enough for an offer.

Point the card at a saved Elementor template instead and the reveal can show anything you can build – images, buttons, countdowns, whatever the offer needs.

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.
  • Prerequisite: save the layout you want to show as an Elementor template first (Templates > Saved Templates > Add New, type Section), then publish it. The Template dropdown only lists templates that already exist.

Build the template

  1. From the dashboard go to Templates > Saved Templates and click Add New.
  2. Choose Section as the type, give it a name and click Create Template.
  3. Design the offer, then publish the template. Keep it roughly the size of the card – the card does not resize itself to fit.

Point the card at it

  1. Edit the page with Elementor and drag the Coupon Code widget onto it.
  2. In Content > Layout, choose any Coupon Type except Standard: Peel, Scratch or Slide Out. The template option does not exist for Standard.
  3. Fill in Content > Front Side as usual, or set its Content Type to Template too.
  4. Open Content > Back Side and set Content Type to Template. Title, Title Tag and Description are replaced by a single Template dropdown.
  5. Pick your template from Template.
Setting the back side content type to template in the elementor panel.
An elementor template rendered as the card back side.

The fields

SettingWhereNotes
Content TypeFront Side and Back SideDefault or Template. Hidden entirely when Coupon Type is Standard.
TemplateFront Side and Back SideLists your saved templates. Only shown when Content Type is Template.
Width / HeightContentSize the card to the template, not the other way round.

The two sides are independent. You can use a template on the back and plain text on the front, or a template on both.

How It Behaves

  • The template renders as a real template. Measured on a published page: the card’s back side contained the template’s own markup and its Elementor stylesheet, and the heading inside it displayed exactly as designed – not as escaped text.
  • The reveal is unchanged. Peel, scratch or slide as usual; what appears underneath is simply the template instead of a title and a description.
  • The template is on the page from the start, underneath the front side. It is not fetched when the card is opened.
  • Editing the template updates every card that uses it, because the card renders the saved template rather than a copy of it.
A coupon card revealing an elementor template on its back side.

Limitations

  • The Standard type cannot use a template. Content Type is hidden while Coupon Type is Standard. Templates are a card feature only.
  • The card does not grow to fit. A template taller than the card will overflow or be clipped. Set Width and Height to match the design.
  • Only editors and administrators can pick a template. A user without those capabilities sees an Unauthorized Access notice in place of the template.
  • The scratch surface is a canvas drawn from your front-side content. It is generated in the browser after the page loads, so it appears a moment late, and the front side is rendered as a flat picture – links, videos or anything interactive in it stop being interactive.

Not verified

So you know exactly what has and has not been checked:

  • A template on the front side. The control exists on both sides and was read from the panel; only the back side was rendered and observed.
  • Templates containing widgets that need their own scripts (carousels, countdowns, forms). One template with a heading was rendered.
  • Touch devices. The peel, scratch and slide-out gestures were driven with a mouse on a desktop viewport. The widget binds touch events too, but a real touch device was not used.
  • The Style tab. Standard Style 1 and Style 3 were rendered; no colour, typography, border or popup-styling control was exercised.

Troubleshooting

The Template dropdown is empty

There are no saved templates yet, or the ones you have are not published. Create one under Templates > Saved Templates first.

Content Type is nowhere in the panel

Coupon Type is still Standard. Switch to Peel, Scratch or Slide Out.

The template is cut off

Raise Height under Content > Content, or simplify the template. The card’s size comes from the widget, not from the template.

I see Unauthorized Access instead of my design

The logged-in user does not have editor or administrator capabilities. That notice is the widget’s, and it goes away once the capability is granted.

Related Docs

Related Frequently Asked Questions

Related Docs