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

Method 1: Auto-Inject (Recommended)

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