Coupon Code Widget

ElementsKit is an all-in-one addon for Elementor that comes with dozens of advanced widgets and features to enhance the page-building experience with Elementor. This includes a Coupon Code widget that lets you display coupon codes in a stylish way that grabs attention.

Features:

• Provides stylish ways to show coupon codes.
• 5 different layouts to display coupon codes.
• Users can copy code with one click.
• Customize the style of the coupon code section.

Read this documentation to learn how to use the Elementor Coupon Code Ticker widget of ElementsKit.

Step 1: Add Coupon Code on website with ElementsKit #

To add coupon code to your website, first enable the widget from WordPress dashboard, then open the Elementor editor and drag & drop the coupon code widget into the design area.

Enable Coupon Code widget #

Firstly, you need to enable the widget from the WordPress dashboard. To enable the Coupon Code widget:

1. Navigate to ElementsKit > Widgets.
2. Find the Coupon Code and enable the widget.
3. Click on the SAVE CHANGES.

Drag and drop the widget #

After that, drag and drop the ElementsKit Content Ticker widget into the Elementor editor.

Step 2: Configure the Coupon Code and label content #

Now you can configure the coupon style, coupon label content, enter coupon code, and customize button styles.

Coupon Styles:

ElementsKit Coupon Code widget comes with 5 different styles of displaying coupons. They are:

1. Slide, 2. Slide with Curve, 3. Slide Angle, 4. Right Curve, and 5. Button with Input.

Coupon:

Enter the coupon code under the Coupon field.

Coupon Label: 

(Available for the following Coupon Styles: Slide, Slide with Curve, Slide with Angle, & Right Curve)

Add label content for a button that appears on the cover of the coupon code.

Button Icon:

You can show an Icon alongside a coupon label. Choose an icon from the icon library or upload SVG. Also, set the Icon Position to Before or After the Label.

Select Action: 

(Available for the following Coupon Styles: Slide, Slide with Curve, Slide with Angle, & Right Curve)

You can select the action type when users click on the button. There are two options available: Click and Popup.

Button Label: 

(Available for Coupon Style: Button with Input)

Add a copy button label where users can copy the coupon with a click.

After Copy:

(Available for Coupon Style: Button with Input)

Enter the text to appear when the coupon code is copied.

Step 3: Customize the Icon, button, and content styles #

You can customize the styles of the coupon code section, buttons, and more.

Button #

In the button section, you can customize the following options:

1. Text Alignment: Set the alignment of the button text to left, right, or center. (Not available for Coupon Style: Button with Input.)
2. Typography: Set the typography for the button text.
3. Button Label Width: Adjust the width of the label, that covers the coupon code. (Not available for Coupon Style: Button with Input.)
4. Text Color: Choose the color text.
5. Background Type: Choose the background color type of the button label.
6. Color: Select a background color for the button label.
7. Border Type: Choose a border type for the button from the given options.
8. Box Shadow: You can set a box shadow if you want.
9. Border Radius: Adjust the border radius for the button.
10. Padding: Adjust the button padding.

Note: You can choose separate Button Label Width, Text Color, Background Type & Color, Border Type, and Box Shadow for Normal and Hover styles.

Icon #

You can customize the button icon by changing the following attributes:

1. Font Size: Adjust the size of the icon.
2. Color: Choose the color of the icon.
3. Background Color: Choose an icon background color. 
4. Spacing: Adjust the space between the icon and button text.
5. Border Type, Width, and Color: You can choose a border type, then adjust the border width, and set a border color.
6. Border Radius: Adjust the border radius of the icon border.
7. Padding: Adjust the padding of the icon.

Coupon #

After that, you can aslo customize the appearance of the coupon code.

1. Code Alignment: Set the alignment of the coupon code to left, right, or center.
2. Typography: Set the typography for the coupon code.
3. Color: Choose a text color for the code.
4. Hover Color: Choose a color for the code that will appear when hovered.
5. Background Type and Color: Choose a background color type for the coupon code and select a background color.

Like the Coupon Code widget, ElementsKit comes with hundreds of advanced elements for Elementor. Get ElementsKit and use those elements to build WordPress websites with full of features.