Use Couponer widget to add coupons for sales

The Couponer widget creates coupons directly in the Elementor editor. Coupons are a great way to promote your online store and increase overall sales. You can offer discounts and deals to convince users to order your service or make a purchase immediately.

For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org

Open or create a page using Elementor to start using the Couponer widget. You will find the widget at the end of the general section.

Widget icon

Drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:

Content tab

On the Content tab of the Couponer widget, you can manage the basic settings of the coupons block such as the number of columns, source, coupon layout, display style and more.

General

The section with basic settings of the coupon block.

Source

Select which type of source you want to use for the coupons:

  • Posts – an option that allows you to display posts of a certain category as discount coupons. To do this, you need to create posts, fill in the appropriate fields and assign it to a specific category. Each regular WP post has additional fields for the Couponer.
Additional post fields of the Couponer widget
  • Custom – an option allows you to create custom coupons with the necessary content for each of them. Once you select this source, a new “Coupon” section with settings is displayed on the Content tab, where you can add and configure the required number of elements.

Columns

Specify the number of columns to display in one row for different devices. Available values ​​from 1 to 10 columns.

Coupon Style

The option allows you to choose different display styles for the discount code line. The selected style will be applied to all block elements.

  • No Code – displays the message text that you enter in the “No Code Message” field. The text can be displayed with your own icon or selected in the library.
Settings of “No Code” Coupon style type
  • Copy Code – displays a discount code and a copy code button for quick customer interaction with your store.
Settings of “Copy Code” Coupon style type
  • Expand Code and Copy – displays the message text but on hover, you can see the discount code and copy it.
Settings of Expand Code and Copy” Coupon style type

Link Type

The option allows you to apply a link to a specific coupon element. The available types are Box, Title, Button. Select Note to disable the link.

Layout

The section where all elements of the coupon layout can be added, configured and ordered.

Alignment

Manage elements alignment of the coupon layout for different devices.

Priority

Add layout elements and order them according to your needs.

Elements layout settings of the Couponer

To add a new coupon element, click “Add Item” and select one of the available item types: Discount, Code, Image, Title, Description, Button.

Layout item settings

Coupons

Add and manage the coupons with the necessary content. The section is available when the source “Custom” is selected in the general Couponer widget settings.

To add a new coupon, click “Add Item” and fill or edit all the fields.

Custom coupon settings
General
  • Choose Image – select image from media library for a new coupon
  • Discount – enter text offer to your users, for example, discount percentage
  • Coupon Code – enter a discount code that users can use when placing an order
Content
  • Title – a field to enter the title of the coupon
  • Description – a text area to enter the description of the coupon
Link
  • Link – enter link URL that will be applied for the current coupon
  • Link id – an option that allows you to add a unique identifier for the link

Style tab

On the Couponer widget styles tab, you can configure everything related to the visual style of elements: colors, typography, backgrounds, borders, and more.

Grid Boxes

The section of the Couponer widget with general coupon styles that will be applied for the entire coupon layout of the current block. To configure separate coupon elements like title, description or other, go to the appropriate settings section.

  • Column spacing – specify the column spacing for the items of the coupon block.
  • Row spacing – specify the row spacing for the items of the coupon block.
  • Margin – the setting allows managing the margin of the coupon elements in different units(px, em, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the coupon elements in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Discount/Title/Description

The sections of the Couponer widget with style settings for separate elements of the coupon layout

  • HTML Tag – select one of the available tags from the list for the text. Depending on the selected tag, the text display style will be changed. These tags also help to make your page more SEO friendly. The option is available only for the Title section.
  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Code

Code/Expand Message/Code Icon
  • Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles. The option is not available for Code Icon.
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Image

  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
  • CSS filter – the option allows you to add various CSS filters for the coupon image as Blur, Brightness, Contrast, Saturation, Hue.
Image size
  • Width – specify the width of the coupon image in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.
  • Height – specify the height of the coupon image in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.

Button

Width – specify the width of the current element in different units(px, %) for all devices or separately for desktops, tablets, or mobiles.

Normal/Hover
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Alignment – manage the current block alignment (left, center, right) for all devices or separately for desktops, tablets, or mobiles.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Button Icon
  • Margin – the setting allows managing the margin of the current element in different units(px, %) for desktop, tablets, or phones.
  • Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktop, tablets, or phones.
  • Color– specify the font color and opacity for the text of the current block using the color picker.
  • Typography – this group of settings controls everything about typography: font-size, font-weight, line-height, decoration, and other parameters.
  • Text Shadow – the setting creates a shadow from the text and it can be adjusted according to your needs specifying color, blur, horizontal, and vertical shift.
  • Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
  • Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
  • Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.

Advanced Tab

The settings in the advanced tab of the Couponer widget allow you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.

Save changes

Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.

Update page in the Elementor
Update page in the Elementor

Hosting for Elementor websites

Fast and reliable hosting is significant for any WordPress site. We recommend all our customers use SiteGround WordPress Hosting. Many unique settings and features make this hosting the number 1 for WordPress: Free Website Transfer, Staging Tools, Free SSL, CDN, and much more for 3.95/mo.

Was this article helpful to you?