Elementor Woo CTA Widget Tutorial

Intro

The Elementor Woo CTA widget, available from Premium Addons, will let you create unique call-to-action buttons for your WooCommerce products. This widget offers a range of customizing choices to make sure your call-to-action buttons are ideally in line with the design and operation of your online store.

Check Elementor Woo CTA Widget demo.

Requirements:

• You will need Premium Addons free plugin installed and activated on your website.
• Ensure the feature is enabled to find it in the Elementor editor.
• Premium Addons Pro is required for:
  • Changing the button action to “Add to Wishlist”
  • Changing the button action to “Add to Compare”
• Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated.

Key Features

• General Settings
• Button
• Style Customizations

General

WooCommerce Wishlist button requires installing YITH or MC WordPress plugins, and for WooCommerce Add to Compare button requires installing YITH or Ever Compare WordPress plugins.

Please note that the button actions "Add to Wishlist" or "Add to Compare" to require Premium Addons PRO installed and activated on your website.

• Button Type: Select from Add to Cart, Add to Wishlist, or Add to Compare.
• Use Current Product: When set to Yes, the CTA is linked to the product being viewed.
• Select Products: Select from a dropdown menu with available products to select from. (This option is enabled when Use Current Product is set to No.)
• Show Quantity Field: Displays a quantity selector for the product.
• Product Unavailable Message: Set a custom message for when the product is out of stock.

Button

• Icon: Enable or disable the icon on the button.
  • Icon Type: Options are Icon, Image, Lottie Animation, SVG Code.
  • Draw Icon: Enable this to animate the icon with a drawing effect.
    • Path Thickness: Slider to adjust the thickness of the drawn path.
    • Draw All Paths Together: Control whether all paths are drawn simultaneously.
    • Loop: Toggle to loop the icon animation.
    • Speed: Slider to adjust the animation speed.
    • Reverse: Reverse the animation direction.
    • Only Play on Hover: Play the animation only when hovered over.
    • Yoyo Effect: Enable this effect for a back-and-forth animation.
  • Icon Position: Select the icon position to be Left, Right, Top, Bottom.
  • Icon Size: Adjust the icon size.
  • Icon Spacing: Set the spacing between the icon and the text.
  • Alignment: Set the icon’s alignment to be Left, Center, Right
  • Hover Effect: Select the hover effect to be Slide, Fade, Grow, Shrink, etc.

Style

The Style tab offers extensive customization options for both the button and the product message, allowing you to achieve the desired look and feel.

Button Style

• Typography: Customize the button text font.
• After Draw Fill Color: Set the color that fills the icon after it has been drawn.
• Text Color: Choose the color for the button text.
• Icon Color: Set the color for the icon.
• Background Type: Set the background type to be Color, Gradient, Image.
• Border Type: Select the border type to be None, Solid, Dotted, Dashed, etc.
• Border Radius: Adjust the curvature of the button’s corners.
• Margin: Set the outer spacing around the button.
• Padding: Set the inner spacing within the button.

Product Message Style

• Text Color: Choose the text color for the product message.
• Typography: Customize the font for the product message.
• Margin: Set the outer spacing around the product message.

Grouped/Variations Table Product Style

The Grouped/Variations Table Product Style section allows you to customize the appearance of the product variations and grouped products table.

• Table Variation Style:
  • Background Type: Choose the background type for the table (e.g., color, gradient, or image).
  • Padding: Set the inner spacing within the table cells.
  • Border Type: Select the border type for the table (e.g., None, Solid, Dotted, etc.).
  • Border Width: Adjust the thickness of the table borders.
  • Border Color: Choose the color for the table borders.
  • Border Radius: Adjust the curvature of the table’s corners.

• Attribute Name Style:
  • Label Typography: Customize the font used for the attribute labels.
  • Label Color: Choose the color for the attribute labels.
  • Odd Background Color: Select the background color for odd-numbered rows.
  • Even Background Color: Select the background color for even-numbered rows.
  • Padding: Set the inner spacing within the attribute cells.

• Content Table Style:
  • Content Typography: Customize the font used for the table content.
  • Color: Choose the color for the table content.
  • Odd Background Color: Select the background color for odd-numbered rows.
  • Even Background Color: Select the background color for even-numbered rows.

• Select Style:
  • Border Type: Choose the border style for the selection dropdown (e.g., None, Solid, Dotted, etc.).
  • Border Radius: Adjust the curvature of the selection dropdown’s corners.

Conclusion

The Elementor Woo CTA widget by Premium Addons offers a versatile range of settings and styles for creating impactful call-to-action buttons. Whether you need a simple ‘Add to Cart’ button or a more animated and styled CTA, this widget provides the tools you need to enhance your WooCommerce product pages effectively.

If you still need any further assistance, feel free to contact Premium Addons support team. We would be more than glad to help 😁

Join the Community

You’re most welcome to join our Facebook group and YouTube channel to get updates about new features, improvements, and bug fixes.