The Ultimate Addons for Beaver Builder v1.29.0 introduces the Woo – Mini Cart module for the Beaver Builder family with cool options that will help you display your Inline/Floating cart that matches the design of your website.
Key features —
- Cart Styles – Icon/Text/Icon+Text
- Dropdown Styles – Dropdown/Modal/Off Canvas
- Cart Position – Inline/Floating
- Show Badge ( Items Count )
- Show Subtotal
Below are the steps to use the Woo – Mini Cart Module for Beaver Builder –
Adding Woo – Mini Cart module
Let’s see how to use Woo – Mini Cart module in Beaver Builder –
Note: Before starting make sure you have Beaver Builder, Ultimate Addons for Beaver Builder, and WooCommerce plugins activated. Ensure you are above version 1.29.0 and above.
Step 1 – Edit page/post with Beaver Builder and insert the module to the desired Beaver Builder row.
Step 2 — Select a style for the Mini Cart on how you would like to display with some Text/Icon or Both.
Step 3 — Now, with options like Custom Text for the Cart, Show/hide the Subtotal or Badge. Also, you can control the position of the badge to display inline or Top. And finally, manage the alignment of the module too.
Step 4 — Some cool options are available under the Cart section of this module. Here you can handle the options to display the Preview Cart details in the Dropdown that can be showed on Hover/Click. And also display the Cart Details in the Modal or Off-Canvas.
Also, you will find the Cart Button Position – Inline/Floating under the Cart Content
Step 5 — Matching the Mini Cart and it’s preview based on the Beaver Builder’s settings preview is one of the most important things.
Following are the Styling options for the Woo – Mini Cart module for Beaver Builder —
Cart Icon/Cart Badge — You can style the Cart Icon and Badge from the Cart Style section of the module.
Cart Container — Under this option, you can manage the background type, Cart Height, Cart Width, Padding and Spacing between View Cart & Checkout button.
Cart styling — Further you have options to style the Cart Button’s Typography, Cart icon size, Color, Subtotal, empty message, Overlay Color, etc.
Further we have sections for settings like –
Cart Sub Total / Cart Title / Cart Message – You can modify the Text Color, Background Color, Border and Padding.
Cart Message / Empty Cart Message– Including the above settings you can align the options.
Item Container – Options here include Item Name Color, Item Image Border, Item Qunatity & Price Color, Remove Item Icon Size, Color and Border.
View Cart Button / Checkout Button – These provide further options to manage the Typography, Space, Color options to make them look better.
Responsive options — All these options are with responsive settings so that you can manage them on different screen sizes.
