E-Commerce

Mini Cart Widget – Complete Setup Guide

6 min read Updated Jan 26, 2026

The Mini Cart Widget is a powerful feature introduced in WPDM Premium Packages 6.2.0. It provides customers with quick access to their shopping cart from anywhere on your website, improving the shopping experience and potentially increasing conversions.

Key Features

  • Three Display Styles: Dropdown, Slide Panel, or Floating Button
  • Real-Time Updates: Cart updates instantly when items are added or removed
  • Mobile Responsive: Full-screen mode on mobile devices
  • Navigation Menu Integration: Add cart to any menu using CSS class
  • Customizable Design: Match your theme with custom colors and CSS
  • Auto-Open on Add: Optionally show cart when items are added
  • Product Thumbnails: Visual cart with product images

Enabling the Mini Cart

Navigate to Downloads → Settings → Premium Package → Mini Cart to access the configuration panel.

Toggle “Enable Mini Cart” to activate the feature. Once enabled, you’ll see additional configuration options.

Configuration Options

Display Settings

Option Description
Display Style Choose between Dropdown (appears below trigger), Slide Panel (slides in from side), or Floating (fixed position button)
Position Where the mini cart appears: Top Right, Top Left, Bottom Right, or Bottom Left
Auto-Inject Automatically add mini cart to your site without using shortcode
Auto-Open on Add Show cart panel when an item is added
Auto-Close Delay Time in milliseconds before cart auto-closes (0 to disable)

Content Settings

Option Description
Show Item Count Display badge with number of items in cart
Show Subtotal Display cart total next to trigger button
Show Thumbnails Display product images in cart panel
Icon Style Choose cart icon: Shopping Cart, Shopping Bag, or Basket

Mobile Settings

Option Description
Mobile Full Screen Cart panel takes full screen on mobile devices
Mobile Breakpoint Screen width (in pixels) below which mobile mode activates (default: 768px)

Appearance Settings

Option Description
Primary Color Main button and accent color (default: #6366f1)
Text Color Text color for cart content (default: #1e293b)
Custom CSS Add additional CSS for advanced customization

Display Methods

The easiest way to add the mini cart. Simply enable “Auto-Inject” in settings, and the cart will automatically appear on your site based on your position settings.

Method 2: Shortcode

Use the shortcode for precise placement in pages, posts, or widgets:

[*wpdmpp_mini_cart]

Shortcode Attributes:

Attribute Values Description
display_style dropdown, slide, floating Override the global display style
position top-right, top-left, bottom-right, bottom-left Override position setting
show_count yes, no Show/hide item count badge
show_total yes, no Show/hide subtotal
icon cart, bag, basket Icon style
class any CSS class Add custom CSS classes

Examples:

[*wpdmpp_mini_cart display_style="dropdown" show_count="yes"]

[*wpdmpp_mini_cart display_style="floating" position="bottom-right" icon="bag"]

[*wpdmpp_mini_cart show_total="no" class="my-custom-cart"]

Method 3: Navigation Menu Integration

Add the mini cart directly to your navigation menu for seamless integration:

  1. Go to Appearance → Menus
  2. Click Screen Options (top right) and enable “CSS Classes”
  3. Add a Custom Link to your menu:
    • URL: #
    • Link Text: Cart (or leave empty)
  4. Expand the menu item and add CSS class: wpdmpp-minicart
  5. Save the menu

The menu item will automatically transform into a fully functional mini cart with dropdown panel, showing:

  • Cart icon with item count badge
  • Subtotal amount (if enabled in settings)
  • Dropdown panel with cart contents
  • View Cart and Checkout buttons

Display Styles Explained

Dropdown Style

The cart panel appears directly below the trigger button. Best for header placement where you want a compact, traditional e-commerce experience.

  • Panel width: 320px
  • Max height: 400px with scroll for many items
  • Closes when clicking outside

Slide Panel Style

A full-height panel slides in from the side of the screen. Ideal for a more immersive cart experience with better visibility of cart contents.

  • Panel width: 380px
  • Full viewport height
  • Includes overlay backdrop
  • Smooth slide animation

Floating Button Style

A fixed-position button that stays visible as users scroll. Perfect for ensuring cart access on long pages.

  • Fixed position on screen
  • Configurable corner placement
  • Slight shadow for visibility
  • Opens slide panel on click

CSS Customization

The mini cart uses CSS custom properties for easy theming. You can override these in your theme’s CSS or in the Custom CSS field:

/* Override mini cart colors */
    :root {
        --wpdmpp-mc-primary: #your-color;
        --wpdmpp-mc-text: #your-text-color;
        --wpdmpp-mc-breakpoint: 768px;
    }

    /* Custom trigger button style */
    .wpdmpp-mc-trigger {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50px;
        padding: 12px 20px;
    }

    /* Custom panel styling */
    .wpdmpp-mc-panel {
        border-radius: 16px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }

    /* Item hover effect */
    .wpdmpp-mc-item:hover {
        background: #f8fafc;
        transform: translateX(4px);
    }

CSS Classes Reference

Class Element
.wpdmpp-mini-cart Main container
.wpdmpp-mc-trigger Trigger button
.wpdmpp-mc-icon Cart icon
.wpdmpp-mc-count Item count badge
.wpdmpp-mc-total Subtotal display
.wpdmpp-mc-panel Cart panel container
.wpdmpp-mc-panel-header Panel header
.wpdmpp-mc-panel-body Panel content area
.wpdmpp-mc-panel-footer Panel footer with buttons
.wpdmpp-mc-items Items container
.wpdmpp-mc-item Individual cart item
.wpdmpp-mc-item-thumb Item thumbnail
.wpdmpp-mc-item-name Item name/title
.wpdmpp-mc-item-remove Remove item button
.wpdmpp-mc-empty Empty cart message
.wpdmpp-mc-btn Action buttons
.wpdmpp-mc-btn--primary Primary button (Checkout)
.wpdmpp-mc-btn--secondary Secondary button (View Cart)

JavaScript API

The mini cart provides a JavaScript API for advanced integrations:

// Access the mini cart object 
var cart = window.WPDMPPMiniCart; 

// Open the cart panel 
cart.open(); 

// Close the cart panel 
cart.close(); 

// Toggle cart panel 
cart.toggle(); 

// Refresh cart data from server 
cart.fetchCart(function(response) { 
   console.log('Cart updated:', response); 
}); 

// Update cart display with data 
cart.updateCart(cartData); 

// Show toast notification 
cart.showToast('Item added!', 'success'); 
cart.showToast('Error occurred', 'error');

 

JavaScript Events

Listen for cart events in your custom JavaScript:

// Cart updated event 
jQuery(document).on('wpdmpp:cart:updated', function(e, cartData) 
   { 
     console.log('Cart updated:', cartData); 
     console.log('Item count:', cartData.item_count); console.log('Total:', cartData.total_formatted); 
   }); 


// Item added event 
jQuery(document).on('wpdmpp:cart:item:added', function(e, response) 
   { 
     console.log('Item added to cart:', response); 
   });

REST API Endpoints

The mini cart uses REST API endpoints for real-time updates:

Endpoint Method Description
/wp-json/wpdmpp/v1/cart GET Get current cart contents
/wp-json/wpdmpp/v1/cart POST Add item to cart
/wp-json/wpdmpp/v1/cart/{product_id} DELETE Remove item from cart

Troubleshooting

Mini Cart Not Appearing

  • Verify the mini cart is enabled in Settings → Premium Package → Mini Cart
  • Check if Auto-Inject is enabled, or use the shortcode
  • Ensure your theme doesn’t have conflicting CSS
  • Check browser console for JavaScript errors

Cart Not Updating

  • Verify REST API is accessible (test: /wp-json/wpdmpp/v1/cart)
  • Check if any security plugins are blocking REST API
  • Ensure WordPress nonces are not being cached

Nav Menu Cart Not Working

  • Confirm the CSS class wpdmpp-minicart is added to the menu item
  • Enable “CSS Classes” in Screen Options on the Menus page
  • Clear any page cache after adding the class

Styling Issues

  • Use browser DevTools to inspect elements and find conflicting styles
  • Add more specific CSS selectors to override theme styles
  • Use the Custom CSS field in mini cart settings for targeted fixes

Requirements

  • WordPress Download Manager Pro 6.0+
  • WPDM Premium Packages 6.2.0+
  • WordPress 5.0+
  • PHP 7.4+

Changelog

Version 6.2.0 – Initial release of Mini Cart Widget

  • Three display styles: Dropdown, Slide Panel, Floating
  • Navigation menu integration via CSS class
  • REST API for real-time updates
  • Mobile-responsive design with full-screen mode
  • Customizable colors and styling
  • JavaScript API for developers
  • Auto-open and auto-close options
  • Product thumbnail support