Custom Add to Cart widget offers to apply the button to different site places by dragging the widget and selecting a WooCommerce product to buy from the list in a few clicks. It doesn’t require any coding knowledge. A few more moments to manage the button style, animation, icon, price, and you’re done.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Elementor editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
Content Tab
In the Content section, you can manage the basic settings of the Custom Add to Cart block such as button text, product, quantity, etc.
General
- Products – select a WooCommerce product from the list that will be added to the cart when you click on the Add to Cart button. You can create a new product via Product> Add to cart
- Quantity – specify the quantity of products that will be added to the cart when you click on the Add to Cart button.
Button
- Button content – a text field for entering the button title. It can use Dynamic Tags.
- Button text alignment – manage the title alignment (left, center, right).
- Show product price – the toggle to enable/disable the product price display on the button.
- Icon – the toggle to enable/disable the icon display. When the option is enabled you can select any icon from the Font Awesome library or upload your own SVG and select the icon position.
- Button alignment – manage the button alignment (left, center, right, justify).
- Hover Animation – select one of the available hover animations for the button.
Style tab
On the style tab, you can manage the element styles of the Custom Add to Cart widget like colors in different states, size, typography, borders, padding/margin, etc.
Button
- Margin – the setting allows managing the margin of the current element in different units(px, %, em) for desktops, tablets, or phones.
- Padding – the setting allows managing the padding of the current element in different units(px, em, %, em) for desktops, tablets, or phones.
- Icon size – specify the icon size in px for desktops, tablets, or phones using the slider.
- Icon spacing – specify the space between icon and text in different units(px, em, %) for desktops, tablets, or phones
- Price spacing – specify the space between price and text in different units(px, em, %) for desktops, tablets, or phones.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The button style settings for different states.
- Text color – specify the button text color and opacity using the color picker.
- Icon color – specify the icon color and opacity using the color picker.
- Price color – specify the price color and opacity using the color picker.
- Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
- Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
- Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
- Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
View cart link
The style settings for the link that appears after adding a product to the cart.
- Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER
The link style settings for different states.
Advanced Tab
The advanced tab allows you to flexibly configure everything that relates to the design of the plug-in wrapper. The settings on this tab are entirely similar to the native Elementor widgets and will be convenient for experienced users of the Elementor. Learn more about Advanced Tab settings from Elmentor’s official documentation.
Save changes
Do not forget to save changes after completing the widget setup. To do this, click on the Update button at the bottom of the page.
