Go to athemes.com

Pro Using the Coupon Code Widget

See this widget in action here.

Want to showcase promotional codes on your website in a visually appealing way? The Coupon Code widget in aThemes Addons Pro for Elementor lets you display coupon codes with copy-to-clipboard functionality, customizable layouts, and optional redirect links.

In this guide, we’ll walk you through how to use the Coupon Code widget in aThemes Addons for Elementor.

Table of Contents
  1. Activating the Widget
  2. Exploring Widget Options
  3. Customizing Style Options

Before you get started, make sure you’ve installed and activated the aThemes Addons plugin on your WordPress site along with Elementor. This widget requires aThemes Addons Pro.

Activating the Widget

Go to your WordPress admin dashboard and navigate to the aThemes Addons dashboard. Search for Coupon Code and toggle it on to activate the widget.

Exploring Widget Options

Configuring Coupon Code Settings

The Coupon Code Settings section controls the core content and layout of your coupon display. Configure the following options:

  • Style – Select from pre-designed coupon styles to quickly set up an attractive layout.
  • Layout – Choose between inline or stacked arrangements for the coupon elements.
  • Coupon Code – Enter the promotional code visitors will copy.
  • Description – Add information about the offer or promotion.
  • Button Text – Customize the text on the copy button.
  • Text After Click – Set the confirmation message displayed after a visitor copies the code.

Control what happens after a visitor interacts with the coupon:

  • Redirect Link – Set a URL to send visitors to after they copy the code.
  • Action After Click – Choose between copy only or copy and redirect to combine both actions.

Configuring Display and Layout Settings

Fine-tune the visual arrangement of your coupon widget:

  • Alignment – Set the horizontal alignment of the coupon block.
  • Content Layout – Switch between horizontal and vertical orientations.
  • Card Style – Select from pre-designed card layouts for a polished look.

Customizing Style Options

The Style Options section provides full control over the visual appearance of your coupon widget:

  • Background Colors – Set background colors for the coupon container.
  • Border and Shadow – Add borders and box shadows for depth and definition.
  • Typography – Customize fonts for text and descriptions.
  • Button Styling – Adjust button colors, hover states, and alignment.
  • Text Colors – Set individual colors for headings, descriptions, and coupon codes.
  • Spacing and Padding – Control the internal and external spacing of all elements.

That’s it! You’ve successfully learned how to add and customize the Coupon Code widget in aThemes Addons Pro for Elementor.

Next, would you like to add eye-catching buttons to your pages? Check out our guide on using the Creative Button widget to learn more.

image_print