The WooCommerce Mini Cart changes the old and traditional way of online shopping. It provides customers with a modern, concise, comfortable, and convenient way to view and manage their shopping cart items. Customers don’t need to leave the current web page.
Mini Cart Pro Module has 4 different tabs. General, Visibility. Floating Button Style, and Mini Cart Style.
1. General #
Click on the General section.
1.1 Enable Mini Cart?: Toggle to activate the Enable Mini Cart? module, this is mandatory.
1.2 Drawer Style: The Mini Cart module offers a variety of drawer styles. Select the most suitable one for optimal user experience.
1.3 Drawer Opening Behavior: Choose the mini cart’s opening position from the dropdown.
1.4 Mini Cart Position: Choose your preferred position from the available options provided here, offering multiple placement choices for your convenience.
1.5 Price extra field Visibility: Enable to display complete cost breakdown (Shipping, Tax, Coupons, etc.) in the price table. Otherwise, only the Subtotal will be shown.
1.6 Coupon Form Visibility: Choose to display or hide the coupon input box in the mini-cart footer area according to your preference.
1.7 Empty Cart Message: Insert empty cart message to display.
1.8 Shop Button Text: Change the Go Shopping Button text as your preference.
1.9 Empty Cart Image: Upload an empty cart image in the exact file size.
1.10 Loader Image: Upload the loader GIF image in the exact file size.
1.11 Hide Mini Cart: If users want to hide the mini cart, they can enable this option.
1.12 Float Button Style: The User can choose from a variety of available options to customize the appearance of the floating button.
1.13 Flying Cart (Animation): Enable this option to activate animated flying cart effects for an engaging and visually appealing user experience.
1.14 Overlay Visibility: Switch on this option to show overlay.
1.15 Show on Mobile: Enable this option to display the mini cart on mobile.
1.16 Custom Class to Open Mini Cart: If users prefer to open the mini-cart by custom button on click, they need to add the class name with a comma separator. E.g.: .icon-area-content a, span.cart-btn
Now, click on the “Save Changes” button to save all the updates.
2. Visibility #
Click on the Visibility section.
2.1 Include Page: Choose the page from the dropdown to display on Mini Cart. If users do not choose any page from here, the Mini Cart will show all pages.
2.2 Include Archive Page: Determine archive page from the dropdown to display on Mini Cart. If users do not choose any page from here, the Mini Cart will show all archive pages.
2.3 Include Details Page: Select details page from the dropdown. If users do not choose any page from here, the Mini Cart will show all the details pages.
2.4 Exclude Pages: Select the exclude Pages from the drop-down. Selected pages will not be shown on the Mini Cart.
Now, click on the “Save Changes” button to save all the updates.
3. Floating Button Style #
Click on the Floating Button Style.
3.1 Button Background: Select the button background color from the color palette.
3.2 Button Background – Hover: Choose the button background hover color from the color palette.
3.3 Float Button Min Width: Users can insert the float button width as their preference.
3.4 Border Radius: Users can enter the border radius of the mini cart as their preference.
Now, click on the “Save Changes” button to save all the updates.
4. Mini Cart Style #
Click on the Mini Cart Style.
4.1 Drawer Primary Color: Select the drawer primary color of your preference.4.2Drawer Secondary Color: Choose the drawer secondary color according to your choice.
Now, click on the “Save Changes” button to save all the updates.
Front End View of Mini Cart #
Displaying the front end view of Mini Cart Floating Button and Mini Cart Sidebar.
