Add a WooCommerce Mini Cart to your shop pages or WooCommerce cart anywhere with the help of a shortcode to provide quick and easy access to cart details for customers.
Installation
↑ Back to top- Download the Mini Cart.zip file from your WooCommerce account.
- Go to WordPress Admin > Plugins > Add New and Upload Plugin.
- Click on Choose File to upload the file you downloaded.
- Install Now and Activate the extension.
Setup and Configuration
↑ Back to topTo access plugin settings, navigate to WooCommerce > Mini Cart > General Settings.
Side Cart Settings
↑ Back to topIn this section, you will find the following side cart settings:
- Enable Side Cart: Click to enable the side cart
- Enable Fly-to Cart Animation: Select to enable fly-to-cart animation.
- Enable to Open Side Cart on Add to Cart: Select to enable the auto show slider on Add to Cart.
- Disable Tax in Cart: Select to display prices inclusive of tax in cart.
- Select Side Cart Position: Choose the position of the side cart.
- Select Side Cart Widget Position: Choose the widget position of the side cart.
- Side Cart Header Text: Enter the text that you want to display in the side cart header.
- Side Cart Header Icon: Select the icon for the cart in the side cart header.
- Enable Side Cart Rounded Corners: Select if you want to enable rounded corners on the side cart.
Additionally, further, customize the side cart with the following color configurations:
- Side Cart Header/Footer Color
- Side Cart Header/Footer Text Color
- Side Cart Product Section Background Color
- Side Cart Product Section Text Color
- Side Cart Buttons Background Color
- Side Cart Buttons Text Color
- Side Cart Buttons Background Hover Color
- Side Cart Buttons Text Hover Color
- Disable Side Cart on Mobile Devices: Click to disable side cart of mobile devices
- Disable Side Cart on Specific Pages: Select pages on which you want to disable side cart.
Sticky Cart Settings
↑ Back to topIn this section, you will find the following sticky cart settings:
- Enable Sticky Cart: Click to enable the sticky cart.
- Enable Cart Button: Select to enable the cart button on the sticky cart.
- Enable Checkout Button: Select to display the checkout button.
- Disable Tax in Cart: Select to display prices inclusive of tax in cart.
- Select Sticky Cart Position: Choose the position of the sticky cart
- Select Sticky Cart Widget Position: Choose the Widget position of the sticky cart
However, you can also customize a sticky cart with the following color settings:
- Sticky cart background color
- Sticky cart text color
- Sticky cart buttons background color
- Sticky cart buttons text color
- Sticky cart buttons background hover color
- Sticky cart buttons text hover color
- Disable sticky cart on mobile devices: Click to disable sticky cart on mobile devices
- Disable sticky Cart on Specific Pages: Select pages on which you want to disable side cart.
Shortcode Settings
↑ Back to topWithin Shortcode Settings, you can configure the following options:
- Shortcode To Display Cart Anywhere On Your Site: Copy and paste the shortcode to display the mini cart anywhere on your website.
- Display Shopping Cart Icon: Option to display a shopping cart icon.
- Choose a Cart Icon: Option to customize the cart icon by selecting an icon or uploading a custom icon.
- Choose Custom Icon: Upload a custom icon for the mini cart.
- Always Display Cart: Select this option to always display the cart even when the cart is empty.
- Display Fly-Out: Select to display cart contents in the fly-out cart
- Fly-out Item Truncation: Choose the maximum number of characters to display in the fly-out menu. Enter “0” to use full product names.
- Fly-out Item Number: Set the maximum number of products in the fly-out menu.
- What Would You Like To Display In The Shortcode?: Choose what you would like to display in the cart menu – You can choose the cart icon, price, or both.
- Enable Product Page Add to Cart Ajax: Select to add products to the cart on the product page without a page reload.
Add to Cart Notification Settings
↑ Back to topIn this section, you can set the following settings.
- Enable Add to Cart Notification: Select to enable notification when a customer adds products to the cart.
- Select Added to Cart Notification Position: Choose the position of the added to cart notification
- Add to Cart Notification Background Color: Set the background color for the add to cart notification.
- Add to Cart Notification Text Color: Choose the color of the text for the mini cart to add to cart notification.
- Disable Added to Cart Animation on Mobile Devices: Select to disable added to Cart animation on mobile devices.
Text & Links
↑ Back to topFrom within WooCommerce > Mini Cart > Text & Links, you can customize the cart with text and links for various conditions. For example, the “Add Empty Cart” and “View Cart” labels. Additionally, you can also specify Cart and Checkout URLs:
- Empty Cart: Enter the text for the empty cart for the main item hover.
- View Cart: Enter the text you want to display for the main item hover & flyout.
- Cart URL: Enter the URL for the cart.
- Checkout URL: Enter the URL for the checkout.
Conversion
↑ Back to topOptional side cart features, off by default. Existing carts stay unchanged until you enable a section.
- Enable Free Shipping Bar: Show a progress bar in the side cart toward the WooCommerce free shipping minimum. Hidden on empty carts and when the cart does not need shipping.
- Shipping Zone: Choose the zone used for the free shipping target, such as Automatic (customer location).
- Exclude Shipping Classes: Items in these classes do not count toward the free shipping threshold.
- Progress Message: Enter the message shown before the threshold is reached. Use %s for the remaining amount.
- Complete Message: Enter the message shown once free shipping is unlocked.
- Show Remaining Amount: Select to show the amount still needed for free shipping.
- Enable Rewards: Add up to 5 tiers. Each one unlocks when the cart reaches its threshold. The highest unlocked discount is a non-taxable fee.
- Threshold: Set the cart total needed to unlock the tier.
- Reward: Enter the name of the reward for the tier.
- Color: Choose the color used for the tier in the side cart.
- Short Label: Enter a short label for the tier.
- Discount Type: Choose how the reward is applied, such as a fixed amount.
- Amount: Set the discount amount for the tier.
- Unlocked Message: Enter the message shown once the tier is unlocked.
- Locked Message: Enter the message shown while this is the next tier. Use %s for the amount still needed.
- Add Tier: Click to add another reward tier, up to 5.
- Enable Recommendations: Suggest products inside the side cart. Off by default, so existing carts stay the same until you enable this.
- Heading: Enter the heading shown above the recommended products.
- Fallback: Choose which products to suggest after each cart product’s own Mini Cart upsells, until the maximum is filled.
- Hide Out of Stock: Select to hide out of stock products from the recommendations.
- Maximum Products: Set the maximum number of products shown in the recommendations panel.
- Panel Background: Set the hex color for the panel beside the side cart. Leave blank for the default.
- Panel Text Color: Set the hex color for the heading, product names, and prices in the panel.
- Show Coupon List: Select to show codes the shopper can apply, in addition to the code box. Nothing is applied on its own.
- Codes Per List: Set the number of coupon codes shown in the list.
- Include Private Coupons: Select to show private coupons once this is on. They still apply only when the shopper can use the code.
- Show Discount Row: Select to show the subtotal before coupons with the saving in its own row, like the cart page.
- Show Shipping Row: Select to show the shipping cost, Free, or Calculated at checkout, for carts that need shipping.
- Show Fees Rows: Select to show one row for each fee on the cart, using the name the fee was added with.
