PowerPack Addons Coupon Widget for Elementor helps you display attractive coupon boxes on your Elementor website. You can showcase discount codes, promotional offers, affiliate deals, seasonal campaigns, and special announcements in a clean and engaging layout.
The widget comes with flexible customization options that let you control the coupon content, layout, styling, button actions, and more. You can also dynamically display coupons using different sources, making it easier to manage large coupon collections on your website.
Getting Started: Using the Coupon Widget#
Follow these steps to add the Coupon Widget to your page:
- Open the page where you want to add the Coupon widget in the Elementor editor.
- In the widgets panel, search for “coupons”.
- Drag and drop the Coupons Widget onto your page.
- Once added, you’ll see two main tabs in the left panel:
- Content
- Style
Let’s go through each setting in detail.
Content Tab#
Content Tab includes the following sections:
- General
- Coupons
- Link
The available options may vary depending on the coupon source you choose. For example, selecting Posts as the source will display additional Query options.
General#
General section allows you to configure the basic structure and display settings of the Coupons Widget.
- Source: Lets you choose how coupon items are added to the widget. Available source options include:
- Custom: Add coupon items manually inside the widget.
- Posts: Dynamically fetch coupons from posts or custom post types.
When you select Custom, you can manually create and manage individual coupon items directly from the widget settings.
If you choose a dynamic source like Posts, additional options such as Query options will appear to help you filter and display coupon data dynamically.
- Layout: Allows you to choose how the coupons are displayed on the page. For example: In a Grid or Carousel layout!
- Columns: Lets you control the number of coupon columns displayed in the layout.
- Coupon Style: Controls how the coupon code behaves and appears to visitors. Available styles include:
- Click to Copy Code
- Click to Reveal Code and Copy
- No Code Needed
- Coupon Icon: Lets you add an icon or image to represent the coupon visually. You can choose: No icon, Icon from the Elementor icon library, or Custom image upload.
- Choose Icon: When the icon option is enabled, the Choose Icon field appears. Click the icon area to open the Elementor icon library and select an icon for your coupon box.
- Show Discount: Enable the Show Discount toggle to display discount information on the coupon item. For example:
- 20% OFF
- Flat ₹500 Discount
- Buy 1 Get 1 Free
- Image Resolution: Controls the quality and size of coupon images displayed inside the widget.
- Title HTML Tag: Helps define the HTML heading tag used for coupon titles.
Coupons#
If you choose Custom as the Source in the General settings, you can manually create and manage coupon items from the Coupons section.
This section allows you to add multiple custom coupons and define their individual content separately.
Each coupon item contains the following tabs:
- General
- Content
- Link
You can also: Duplicate coupon items, Delete unwanted coupons, Reorder coupons using drag and drop & Add unlimited coupon items using the Add Item button.
- General: General tab contains the basic coupon information and visual elements.
- Image: Image option allows you to add a custom image for the coupon item.
- Discount: Discount field allows you to define the offer or discount text displayed on the coupon.
- Coupon Code: The Coupon Code field lets you enter the actual coupon or promo code users can copy and use. When using the “Click to Copy Code” coupon style, users can simply click the code to copy it instantly.
Managing Multiple Coupons
You can create multiple coupon items within the widget. Each coupon can have:
- Different images
- Unique discount offers
- Separate coupon codes
- Individual links and content
This makes it easy to showcase multiple deals in a single Coupons Widget layout.
Link#
Link section allows you to configure how users interact with each coupon item. Using these settings, you can add buttons, clickable areas, icons, and separators to improve the user experience and guide visitors toward your promotional links or affiliate offers.
- Link Type: Controls which part of the coupon item becomes clickable. Available options include:
- None: No clickable link is added.
- Box: Makes the entire coupon box clickable.
- Title: Adds the link only to the coupon title.
- Button: Displays a dedicated button for the coupon link.
- Button Text: Button Text field lets you customize the text displayed on the coupon button.
- Button Icon: Button Icon option allows you to add an icon alongside the button text. You can select icons from the Elementor icon library to make the button visually appealing and easier to notice.
- Icon Position: Icon Position setting controls where the icon appears relative to the button text. Available options include: Before or After
- Separator: Enable the Separator toggle to display a divider line between coupon content sections.
Query#
Query section becomes available when you select Posts as the Coupon Source in the General settings.
This section allows you to dynamically fetch and display coupons from your WordPress posts or custom post types. You can use various filtering and sorting options to control which coupons appear inside the widget.
- Post Type: Post Type option lets you choose the content source for displaying coupons. For example: Posts, Pages, Custom Post Types, WooCommerce Products (if available)
- Categories Filter Type: Categories Filter Type setting controls how category filtering works. Available options include:
- Include Categories
- Exclude Categories
- Categories: Categories field allows you to select one or multiple categories for filtering posts. For example: Deals, Coupons, Offers, Black Friday
- If you choose Include Categories, only posts from the selected categories will appear.
- If you choose Exclude Categories, posts from those categories will be ignored.
- Authors Filter Type: The Authors Filter Type option controls author-based filtering. Available options include:
- Include Authors
- Exclude Authors
- Authors: The Authors field allows you to select specific authors for the query. You can use this option to:
- Display coupons from selected authors only
- Exclude posts written by certain authors
- Posts Filter Type: The Posts Filter Type setting lets you include or exclude specific posts manually. Available options include:
- Include Posts
- Exclude Posts
- Posts: Posts field lets you select individual posts to include or exclude. This is especially useful when:
- You want to feature specific coupons.
- You want to hide expired offers.
- You want complete manual control over displayed posts.
- Date: The Date option helps filter posts based on publishing date. Available options include:
- All
- Today
- This Week
- This Month
- Past Year
- Order: The Order setting controls the sorting direction of queried posts. Available options:
- Ascending
- Descending
- Order By: The Order By option determines how the posts are sorted. Common options include:
- Date
- Title
- Author
- Modified Date
- Random
Filters#
Filters section becomes available when you choose Posts as the Coupon Source.
This feature allows users to filter coupon items on the frontend based on categories, taxonomies, or other filtering terms. It helps visitors quickly find relevant deals and offers without scrolling through all coupons.
- Show Filters: Enable the Show Filters toggle to display filter options above the coupon listing.
When enabled, visitors can interactively filter coupon items on the frontend.
- Filter By: Filter By option lets you choose which taxonomy or criteria to use for filtering. For example:
- Categories
- Tags
- Custom Taxonomies
You can also add multiple filter types using the plus (+) icon.
- Order By: Order By sets controls how filter items are sorted. Common options include: Name, Count, ID & Slug
- Order: Order option controls the sorting direction of filter items. Available options:
- Ascending
- Descending
- "All" Filter Label: "All" Filter Label field lets you customize the label displayed for all coupon items.
By default, it is set to: All. You can replace it with custom text, such as: View All, All Coupons & All Deals
- Default Active Filter: Enable the Default Active Filter option to keep a specific filter category active when the page first loads. If disabled, the widget usually displays all coupon items initially.
- Show Post Count: Enable the Show Post Count toggle to display the number of posts available under each filter category. Example: Deals (12), Offers (8) & Coupons (5)
- Dropdown Filters: The Dropdown Filters option lets you display filters in a dropdown menu instead of inline. This is useful when:
- You have many filter categories.
- You want a cleaner layout.
- You want to save horizontal space on smaller screens.
- Alignment: Alignment option controls the positioning of the filter items. Available alignment options typically include: Left, Center & Right
Pagination#
Pagination section allows you to control how coupon items are loaded and displayed across multiple pages. This is especially useful when displaying a large number of coupon posts dynamically using the Posts source.
- Pagination: Pagination option lets you choose the pagination type for the Coupons Widget. Available options include:
- None: Displays all coupon items without pagination.
- Numbers: Shows numbered pagination links.
- Numbers + Previous/Next: Displays numbered pagination along with Previous and Next navigation buttons.
- Load More Button: Loads additional coupon items when users click a button.
- Infinite: Automatically loads more coupons as users scroll down the page.
Each pagination type provides a different browsing experience depending on your website design and content structure.
- None: Selecting None disables pagination completely and displays all coupon items at once. This works well for:
- Small coupon collections
- Simple landing pages
- Minimal layouts
- Numbers: This option displays traditional numbered pagination links below the coupons. Example 1 · 2 · 3 · 4
- Numbers + Previous/Next: This option adds:
- Numbered pagination
- Previous button
- Next button
- Load More Button: The Load More Button option initially displays a limited number of coupons and loads additional items when users click the button.
- Infinite: The Infinite option automatically loads more coupon items as users scroll down the page. This creates a smooth, infinite-scrolling experience without requiring users to click pagination buttons.
- Alignment: The Alignment option controls the positioning of the pagination controls. Available alignment options generally include:
- Left
- Center
- Right
Carousel Settings#
Carousel Settings section appears when you choose Carousel as the Layout type in the General settings. These options let you control the behavior, animations, navigation, and autoplay of the coupon carousel.
- Effect: Effect option controls the transition animation between carousel slides. Common options include: Slide & Fade.
- Slider Speed: Slider Speed option controls the transition duration between slides. The value is measured in milliseconds (ms). For example:
- 300ms for faster transitions
- 500ms for smoother animations
- Higher values for slower slide effects
- Autoplay: Enable the Autoplay option to automatically rotate coupon slides without user interaction.
- Autoplay Speed: Autoplay Speed setting controls the delay between automatic slide transitions.
- Infinite Loop: Enable the Infinite Loop option to continuously cycle through carousel items. When enabled, the carousel restarts automatically when it reaches the last slide.
- Pause on Hover: Pause on Hover option temporarily stops autoplay when users hover over the carousel. This helps visitors:
- Read coupon details comfortably
- Interact with buttons easily.
- Prevent accidental slide changes.
- Grab Cursor: Enable the Grab Cursor option to display a grab-style cursor while hovering over the carousel.
- Navigation: The Navigation section controls how users manually navigate through carousel slides.
- Arrows: Enable the Arrows option to display previous and next navigation arrows on the carousel.
- Pagination: Enable the Pagination option to display pagination indicators below the carousel. Pagination helps users identify:
- Total number of slides
- Current active slide
- Pagination Type: The Pagination Type option controls the style of pagination indicators.
- Dots
- Fraction
- Direction: The Direction setting controls the direction of slide movement. Available options generally include:
- Left
- Right
Style Tab#
Style Tab allows you to fully customize the appearance of the Coupons Widget. Using these styling options, you can control the design, spacing, typography, colors, and overall visual presentation of your coupon layouts.
The Style Tab includes the following sections:
- Coupon Boxes
- Discount
- Coupon Code
- Content
- Button
- Arrows
- Pagination
Some styling options may appear conditionally depending on the selected layout or enabled features. For example, the Arrows and Pagination styling sections appear when using the Carousel layout.
Coupon Boxes#
Coupon Boxes section allows you to style the overall coupon container. You can customize Background color, Border type and width, Border radius, Box shadow, Padding and spacing, Margin, hover effects, and more.
Discount#
Discount section controls the styling of the discount label or offer text. You can customize Typography, Text color, Background color, Spacing, Border radius & Alignment.
Coupon Code#
Coupon Code section allows you to style the coupon code area displayed inside the widget. Available styling options include Typography, Text color, Background color, Border, Padding, Border radius, Hover effects.
Content#
Content section lets you style the textual content of the coupon item. You can customize the coupon title typography, Description typography, Text colors, Spacing between content elements, and alignment.
Button#
Button section controls the appearance of the coupon action button. You can style, Button typography, Text color, Background color, Border, Border radius, Padding, Hover styles, and Icon spacing
Arrows#
Arrows section appears when using the Carousel layout and navigation arrows are enabled. You can customize Arrow size, Arrow color, Background color, Border radius, Positioning, Hover styles.
Pagination: Dots#
The dots section appears when carousel pagination is enabled, and the pagination type is set to Dots. You can style, Dot size, Active dot color, Inactive dot color, Spacing between dots, Alignment.
Wrapping Up!#
This was the complete overview of the Coupons Widget for Elementor. From creating custom coupon layouts to dynamically displaying offers via posts, the widget provides everything you need to build attractive, engaging coupon sections on your website.
With flexible layout options, filtering, carousel support, pagination controls, and extensive styling settings, you can easily create professional-looking coupon displays that match your website design perfectly.
We hope this guide helps you get started with the PowerPack Coupon Widget for Elementor!