1. Documentation /
  2. Elementor Connector for Smart Coupons

Elementor Connector for Smart Coupons

Overview

↑ Back to top

The WooCommerce Smart Coupons widget for WooCommerce is a powerful tool designed to enhance the coupon functionality of your online store. It allows you to create, issue and manage coupons, credits, and gift certificates in a more efficient way. With this widget, you can offer discounts, deals, and special promotions to your customers, which can help drive sales, reward customer loyalty, and encourage repeat purchases. It also provides options for bulk generation and distribution of coupons, making it a valuable asset for large-scale marketing campaigns.

The Elementor Connector for WooCommerce is a plugin that seamlessly integrates various WooCommerce plugins, including WooCommerce Smart Coupons, into the Elementor page builder. For users of WooCommerce Smart Coupons, this integration brings several benefits:

  1. Enhanced Customization: Users can show available coupons using Elementor’s drag-and-drop interface.
  2. Unified Workflow: Users can manage and customize all aspects of their WooCommerce store, including Smart Coupons, from within the Elementor platform, streamlining their workflow.
  3. Advanced Controls: The plugin provides custom controls for Smart Coupons, allowing users to fine-tune how coupons are displayed on their site.
  4. Improved Marketing: With the ability to customize the look and feel of Smart Coupons, users can create more engaging marketing campaigns that better resonate with their target audience.

Overall, the Elementor Connector for WooCommerce enhances the functionality of WooCommerce Smart Coupons, providing users with greater control and customization capabilities.


Requirements

↑ Back to top

In order to use this widgets, you’ll need the following:


Available Coupons Widget – Elementor

↑ Back to top

Content Tab

  1. Title – This control allows you to set the title for the coupon section. Default value is the one set in the Smart Coupons settings page under WooCommerce > Settings > Smart Coupons. The default value is ‘Available Coupons’.

Style Tab

  1. Border – A control to set the border style, width, and radius for the coupon box. 
  2. Color – A control to set the border color for the coupon box, visible only under certain conditions.*
  3. Border Radius – A control to set the border radius for the coupon box in various units.**
  4. Hide Image – A switch control to hide any images in the coupon, set to ‘yes’ by default.
  5. Margin – A responsive control to set the margin around the coupon box in various units.**
  6. Padding – A popover toggle control to adjust the padding of various elements within the coupon box.
    1. Coupon – A control to set the padding around the coupon box in various units.**
    2. Title – A control to set the padding around the title in the coupon box in various units.**
    3. Description – A control to set the padding around the description in the coupon box in various units.**
    4. Meta – A control to set the padding around the meta data in the coupon box in various units.**
  7. Custom Dimensions – A switch control to set custom dimensions for the coupon box, set to ‘no’ by default.
  8. Width – A responsive control to set the width of the coupon box in various units, visible only under certain conditions.***
  9. Height – A responsive control to set the height of the coupon box in various units, visible only under certain conditions.***
  10. Layout – A select control to choose the layout of the coupon box. Options are ‘Flex’ and ‘Inline’. Default is ‘Flex’.
  11. Heading Fonts – A typography control to set the font family, size, weight, transform, style, decoration, line-height, and letter-spacing for the heading in the coupon box.
  12. Meta Fonts – A typography control to set the font family, size, weight, transform, style, decoration, line-height, and letter-spacing for the meta data in the coupon box.

* The Color control is only visible when the border style is not empty or ‘none’. The Width and Height controls are only visible when Custom Dimensions is set to ‘yes’.

** These controls allow you to set dimensions in pixels (px), percentage (%), or em.*** These controls are only visible when Custom Dimensions is set to ‘yes’. Default values are 300px for Width and 160px for Height.


Linked Coupons Widget – Elementor

↑ Back to top

Style Tab

  1. Background – This control allows you to set the background of the linked coupons section. You can choose between a classic or gradient background.
  2. Border – This control allows you to set the border of the linked coupons section. You can customize the border style, width, and color.
  3. Border Radius – This control allows you to set the border radius of the linked coupons section*.
  4. Margin – This control allows you to set the margin around the linked coupons section*.
  5. Padding – This control allows you to set the padding within the linked coupons section*.
  6. Fonts – This control allows you to set the typography of the text in the linked coupons section. You can customize the font family, size, weight, transform, style, decoration, line-height, and letter-spacing.
  7. Color – This control allows you to set the text color in the linked coupons section. You can choose any color from the color picker.

* For controls marked with an asterisk, you can choose the size in different units pixels (px), percentage (%), or em).


Generate Coupons Widget – Elementor

↑ Back to top

Content Tab

  1. Coupon to Duplicate – Select the coupon to duplicate for logged-in users when visiting the page/post. Default value is empty.

Style Tab

  1. Border – Customize the border of the coupon. Color control is excluded from this panel.
  2. Border Color – Set the border color of the coupon. This control appears only if the Border is not set to ‘None’ or empty.
  3. Border Radius – Adjust the border radius of the coupon*.
  4. Hide Image – Toggle to hide any images in the coupon (if available). Default is ‘Yes’.
  5. Margin – Set the margin around the coupon*.
  6. Padding – Adjust the padding within the coupon. This control opens a popover with additional padding options for the coupon, title, description, and meta*.
  7. Custom Dimensions – Toggle to enable custom dimensions for the coupon. Default is ‘No’.
  8. Width – Adjust the coupon width. This control appears only if Custom Dimensions is set to ‘Yes’. Default is 300px. Min is 0px, max is 1000px for ‘px’ and 0 to 100 for ‘%’*.
  9. Height – Adjust the coupon height. This control appears only if Custom Dimensions is set to ‘Yes’. Default is 160px. Min is 0px, max is 1000px for ‘px’ and 0 to 100 for ‘%’*.
  10. Layout – Choose between ‘Flex’ and ‘Inline’ layout for the coupon. Default is ‘Flex’.
  11. Heading Fonts – Customize the typography of the heading in the coupon.
  12. Meta Fonts – Customize the typography of the meta in the coupon.

* For controls marked with an asterisk, you can choose the size in different units pixels (px), percentage (%), or em.


Cart Additional Controls – Elementor

↑ Back to top

Style Tab

  1. Border – This control allows you to customize the border of the coupon. Color control is excluded from this panel*.
  2. Border Color – This control allows you to set the border color of the coupon. It appears only when the Border is not set to ‘None’ or empty.
  3. Border Radius – This control allows you to adjust the border radius of the coupon*.
  4. Hide Image – This switcher allows you to hide any images in the coupon (if available). Default is set to ‘Yes’.
  5. Margin – This control allows you to set the margin around the coupon*.
  6. Padding – This control allows you to adjust the padding within the coupon. It opens a popover with additional padding options for the coupon, title, description, and meta*.
  7. Custom Dimensions – This switcher allows you to enable custom dimensions for the coupon. Default is set to ‘No’.
  8. Width – This control allows you to adjust the width of the coupon. It appears only if Custom Dimensions is set to ‘Yes’. Default is 300px. Min is 0px, max is 1000px for ‘px’ and 0 to 100 for ‘%’*.
  9. Height – This control allows you to adjust the height of the coupon. It appears only if Custom Dimensions is set to ‘Yes’. Default is 300px. Min is 0px, max is 1000px for ‘px’ and 0 to 100 for ‘%’*.
  10. Layout – This control allows you to choose between ‘Flex’ and ‘Inline’ layout for the coupon. Default is ‘Flex’.
  11. Heading Fonts – This control allows you to customize the typography of the heading in the coupon.
  12. Meta Fonts – This control allows you to customize the typography of the meta in the coupon.

Note: Changes made in Elementor’s edit page will only reflect on the front-end since available coupons aren’t loaded dynamically in the Elementor editor.
*For controls marked with an asterisk, you can choose the size in different units (pixels (px), percentage (%), or em).