On an e-commerce website, a coupon code is given to customers so they can enter this at the time of checkout to receive discounts or deals. It is a well-known marketing tool that can have a significant impact on sales. This is why Xpro Addons include an Elementor Coupon Code widget which you can display on your website so that your loyal customers can receive discounts.
Xpro Elementor Addons includes a set of 70+ widgets in its Pro Elementor version. The Coupon Code widget is accessible only from the Xpro paid version as this widget can grow your business and website.
How to Install Elementor Coupon Code Widget by Xpro
Requirement
You need to install and activate the Pro version of Xpro Elementor Addons. If you already have the plugin installed, just make sure the Coupon Code Widget is ‘Enabled’ from the Xpro Dashboard, so you can find the widget in the Elementor editor.
To enable the widget, simply follow these steps:
Step 1
Click on the Xpro Addons option available on the WordPress Dashboard Menu.
Step 2
From the Xpro Addons Dashboard, click on the Widgets Tab, find the Coupon Code widget, and finally, toggle the button ON to enable it.
How to Use Coupon Code Widget for Elementor
The premium Elementor widget is extremely easy to use and can be set up within a minute. There are three different layouts that are comprised of two boxes: the coupon code itself and a button that can be clicked to copy the code and redirect users to another link. In further editing, you can customize the layout according to your requirements.
Step 1
Click on the Xpro Addons-Pro section available in the Elementor Editor.
Step 2
From the Xpro Addons-Pro section, simply drag’n’drop the Coupon Code widget on your desired page location.
This is the default view of the widget after you drop it into the Elementor Page.
Content Section
How to Change the Layout of the Xpro Coupon Code Widget
Under the General menu in the Content tab, select a layout type from the three given options.
How to Add Text in Button
You can enter any text in the button to let users know what this layout is about. Show how much of a discount or benefit you are providing.
You may add an icon or SVG in the button if you like. Click on Upload SVG or Icon Library to select what you want to include.
How to Add a Code in the Coupon Code Widget
You can type a code in the field next to Code that customers can copy and paste at checkout to earn discounts.
If you want to direct a user to a link after they click on the button, then enable Trigger Link and add a link in the field.
How to Style Xpro Coupon Code Widget
Style the layout by positioning the widget to left, right, or center from the alignment option. Adjust the size of the widget by increasing or decreasing the width.
How to Style Text in Button
You can set the alignment of the message within the button to left, right, or center. Furthermore, perform styling to the text from the typography option from where you can change font, size, weight, spacing, and other text customizations.
Color the text and background for normal and hover displays.
You can also modify the box’s border to make it more visually appealing. There are following five different types of borders to pick from.
- Solid
- Double
- Dashed
- Dotted
- Groove
In further editing, customize the border width, color, and radius.
How to Style Code in the Coupon Code Widget
The code menu provides you with the same styling options that you had in the Message. You can adjust alignment, style typography, add colors, and make a border.
Best Coupon Code Widget for Elementor
This is all from the Coupon Code widget by Xpro Elementor. We hope you fully understand the functionality and application of this powerful widget. Develop your business website with WooCommerce widgets that allow you to display your products in an appealing manner.
Xpro Elementor Addons offer a wide range of widgets, templates, and features that help you develop an attractive site. Check our 50+ free addons for Elementor which are enough to create a professional WordPress website. If you want to explore and add more attractive Elementor widgets then check our complete list of Pro Elementor widgets and download our Pro Elementor addons right now.