BuddyX
Get BuddyX Pro

Cart & Checkout

Free & Pro

Complete guide to customizing your shopping cart and checkout experience in BuddyX Pro.

Overview

BuddyX Pro enhances the WooCommerce cart and checkout experience with a modern cart icon, optional mini cart sidebar, and optimized checkout layouts. This guide covers all cart and checkout customization options.

What You Can Do

With BuddyX Pro's cart and checkout features, you can:

  • Add Cart Icon to Header - Live-updating cart counter in navigation
  • Enable Mini Cart Sidebar - Slide-out cart preview without leaving the page
  • Customize Checkout Layout - Optimize the checkout flow
  • Configure Cross-Sells - Display related products in cart
  • Style Payment Gateways - Professional payment method display
  • Optimize for Conversion - Reduce cart abandonment

Header Cart Icon

The header cart icon shows customers their cart status at a glance.

What It Shows

Default State (Empty Cart):

  • Shopping cart icon
  • No badge counter

Active State (Items in Cart):

  • Shopping cart icon
  • Badge with item count (e.g., "3")
  • Changes color to indicate active cart

On Click:

  • Links to cart page
  • Or opens mini cart sidebar (if enabled)

How It Works

Real-Time Updates:

  • Counter updates when items added
  • Updates via AJAX (no page reload)
  • Changes reflect immediately
  • Works with WooCommerce AJAX add to cart

Visual Feedback:

  • Badge appears with first item
  • Number increases with each item
  • Icon remains visible in header
  • Mobile-friendly responsive design

Setting Up Header Cart

Step 1: Enable Cart Icon

  1. Go to Appearance → Customize
  2. Navigate to Site Header → Header Cart
  3. Enable "Show Cart Icon in Header"
  4. Click Publish

Step 2: Choose Cart Behavior

  • Cart Page: Icon links to full cart page
  • Mini Cart: Icon opens slide-out cart (if enabled)

Customization Options:

Setting Location What It Does
Cart Icon Color Colors section Changes icon color
Badge Color Colors section Changes counter badge color
Icon Position Header layout Left, center, or right header

Mini Cart Sidebar

The mini cart sidebar provides a quick cart preview without leaving the current page.

Mini Cart Side Panel The mini cart sidebar slides in from the right showing cart contents, subtotal, and checkout options

What It Includes

Cart Preview:

  • Product thumbnails
  • Product names and quantities
  • Individual prices
  • Subtotal
  • Remove item buttons
  • View Cart button
  • Checkout button

Interactive Features:

  • Quantity adjustment (with some plugins)
  • Remove items directly
  • Coupon code entry (with extensions)
  • Free shipping progress bar (with extensions)

User Experience

Opening the Cart:

  1. Customer adds product to cart
  2. Mini cart automatically slides in from right
  3. Shows added product with confirmation
  4. Customer can continue shopping or checkout

Closing the Cart:

  • Click "Close" button
  • Click outside cart area
  • Press Escape key
  • Automatically closes after action

Setting Up Mini Cart

Step 1: Enable Feature

The mini cart is automatically available with BuddyX Pro when WooCommerce is active. No setup required!

Step 2: Customize Appearance

Add to child theme style.css:

/* Mini cart width */
.buddyx-cart-widget-side {
    width: 400px;
}

/* Background color */
.buddyx-cart-widget-side {
    background-color: #ffffff;
}

/* Heading style */
.buddyx-cart-widget-side .widget-title {
    font-size: 18px;
    color: #333;
}

Step 3: Test Functionality

  1. Add product to cart
  2. Click cart icon in header
  3. Verify sidebar opens
  4. Test remove item
  5. Test checkout button

Cart Page Features

The main cart page displays full cart details and allows quantity updates.

Standard Features

Product Display:

  • Product thumbnail images
  • Product names (linked)
  • Individual prices
  • Quantity selectors with +/- buttons
  • Line totals
  • Remove item buttons

Cart Totals:

  • Subtotal
  • Shipping options and costs
  • Tax calculations
  • Coupon discount display
  • Total amount

Actions:

  • Update cart button
  • Continue shopping link
  • Proceed to checkout button
  • Apply coupon field

BuddyX Pro Enhancements

Quantity Buttons:

  • Plus (+) and minus (-) buttons
  • Replaces default input field
  • Easier for customers to adjust quantities
  • Mobile-friendly
  • Automatic cart update

Cross-Sells Relocated:

  • Moved after cart form (from sidebar)
  • Better visibility
  • More prominent display
  • Increased cross-sell effectiveness

Responsive Layout:

  • Table layout on desktop
  • Card layout on mobile
  • Touch-friendly buttons
  • Optimized spacing

Customizing Cart Page

Enable/Disable Coupon Field:

  1. Go to WooCommerce → Settings → General
  2. Check/uncheck "Enable coupons"
  3. Save changes

Customize Cross-Sells:

  1. Edit product
  2. Scroll to "Linked Products"
  3. Add cross-sell products
  4. Save product

Change Quantity Button Style:

Add to child theme style.css:

/* Larger quantity buttons */
.quantity .plus,
.quantity .minus {
    width: 35px;
    height: 35px;
    font-size: 18px;
}

Checkout Page Optimization

The checkout page is critical for conversions. BuddyX Pro optimizes layout and user experience.

Default Checkout Layout

Two-Column Layout:

Left Column (Billing & Shipping):

  • Billing details form
  • Shipping address (if different)
  • Order notes field

Right Column (Order Review):

  • Product list with thumbnails
  • Prices and quantities
  • Shipping method selection
  • Payment method options
  • Order total
  • Place Order button

BuddyX Pro Checkout Features

Clean Form Design:

  • Clearly labeled fields
  • Logical field ordering
  • Helpful placeholder text
  • Required field indicators
  • Validation messages

Mobile-Optimized:

  • Single column on mobile
  • Large touch-friendly buttons
  • Simplified form layout
  • Progress indicators
  • Easy payment selection

Security Indicators:

  • SSL badge (if SSL active)
  • Secure checkout messaging
  • Privacy policy link
  • Terms and conditions

Checkout Customization

Simplify Checkout Fields:

Add to child theme functions.php:

// Remove phone field
add_filter('woocommerce_billing_fields', function($fields) {
    unset($fields['billing_phone']);
    return $fields;
});

// Make company field optional
add_filter('woocommerce_billing_fields', function($fields) {
    $fields['billing_company']['required'] = false;
    return $fields;
});

Customize Button Text:

  1. Install "WooCommerce Customizer" plugin
  2. Go to Customizer → WooCommerce → Checkout
  3. Change "Place Order" button text
  4. Customize other checkout text

Add Trust Badges:

Add after checkout form using hook:

add_action('woocommerce_review_order_before_submit', function() {
    echo '<div class="trust-badges">';
    echo '<img src="/path/to/ssl-badge.webp" alt="Secure Checkout">';
    echo '<img src="/path/to/money-back.webp" alt="Money Back Guarantee">';
    echo '</div>';
});

Payment Gateway Display

How payment methods appear on checkout page.

Standard Payment Display

Default WooCommerce:

  • Radio buttons for each gateway
  • Gateway logos (if provided)
  • Description text below each option
  • Payment form appears below selection

BuddyX Pro Enhancements:

  • Styled radio buttons
  • Prominent gateway logos
  • Clear payment descriptions
  • Smooth transitions when switching
  • Mobile-optimized layout

Popular Payment Gateways

Stripe:

  • Credit card fields
  • Apple Pay / Google Pay buttons
  • 3D Secure support
  • Inline validation

PayPal:

  • PayPal button
  • Credit card option
  • Express checkout
  • Pay Later messaging

Cash on Delivery:

  • Simple selection
  • Custom instructions
  • Confirmation message

Customizing Payment Display

Reorder Payment Methods:

Add to child theme functions.php:

add_filter('woocommerce_available_payment_gateways', function($gateways) {
    // Move PayPal to top
    if(isset($gateways['paypal'])) {
        $paypal = $gateways['paypal'];
        unset($gateways['paypal']);
        $gateways = array('paypal' => $paypal) + $gateways;
    }
    return $gateways;
});

Style Gateway Buttons:

Add to child theme style.css:

/* Stripe payment button */
.wc-stripe-elements-field {
    padding: 15px;
    border: 2px solid #635bff;
    border-radius: 5px;
}

/* PayPal button */
.payment_method_paypal img {
    max-width: 100px;
}

Reducing Cart Abandonment

Strategies to improve checkout completion rates.

Enable Guest Checkout

Why: Requiring account creation increases abandonment

How to Enable:

  1. Go to WooCommerce → Settings → Accounts & Privacy
  2. Check "Allow customers to place orders without an account"
  3. Save changes

Impact: Can reduce abandonment by 20-30%

Display Shipping Costs Early

Why: Surprise shipping costs cause abandonment

Solutions:

  • Show shipping calculator on product pages
  • Display estimated shipping in cart
  • Offer free shipping threshold
  • Show all costs before checkout

Implementation:

// Add shipping calculator to cart
add_action('woocommerce_before_cart_table', 'woocommerce_shipping_calculator');

Simplify Form Fields

Why: Long forms discourage completion

What to Remove:

  • Company name (unless B2B)
  • Secondary address line
  • Phone number (if not essential)
  • Unnecessary custom fields

What to Keep:

  • Name and email
  • Primary address
  • Payment information
  • Required legal fields

Add Progress Indicators

Why: Shows customers how far along they are

Implementation Options:

  • Checkout steps plugin
  • Custom progress bar
  • Step numbers
  • Breadcrumb navigation

Offer Multiple Payment Options

Why: Customers have preferred payment methods

Recommended Methods:

  • Credit/debit cards (Stripe)
  • PayPal
  • Apple Pay / Google Pay
  • Buy Now, Pay Later (Afterpay, Klarna)
  • Bank transfer for large orders

Show Security Badges

Why: Builds trust during payment

What to Display:

  • SSL certificate badge
  • Payment gateway logos
  • Money-back guarantee
  • Privacy policy link
  • Secure checkout message

Recommended Cart Configurations by Store Type

Fashion & Lifestyle Store

Cart Features:

Header Cart: Enabled
Mini Cart: Enabled
Cross-Sells: Related accessories
Quantity Buttons: Enabled
Guest Checkout: Enabled
Shipping Calculator: On cart page

Checkout Features:
- Simplified form (remove company field)
- Multiple payment options
- Size guide link
- Return policy link

Why: Fashion customers browse multiple items, need quick cart access and reassurance.

Digital Products Store

Cart Features:

Header Cart: Enabled
Mini Cart: Enabled
Cross-Sells: Complementary downloads
Quantity Buttons: Hidden (single qty)
Guest Checkout: Enabled
Shipping: Disabled

Checkout Features:
- Minimal form fields
- Instant payment options
- Downloadable after payment notice
- License terms link

Why: Digital sales should be fast and frictionless with instant access.

High-Ticket Items (Furniture, Electronics)

Cart Features:

Header Cart: Enabled
Mini Cart: Optional
Cross-Sells: Warranties, accessories
Quantity Buttons: Enabled
Guest Checkout: Optional
Shipping Calculator: Prominent

Checkout Features:
- Detailed shipping options
- White glove delivery option
- Phone support number
- Installation service upsell

Why: High-value purchases need more information and support options.

Subscription Products

Cart Features:

Header Cart: Enabled
Mini Cart: Enabled
Cross-Sells: Higher tier plans
Quantity Buttons: Disabled
Guest Checkout: Disabled (account required)
Shipping: Based on subscription

Checkout Features:
- Subscription summary
- Billing schedule clear
- Easy upgrade options
- Cancel policy visible

Why: Subscriptions need clear recurring billing information and account management.

B2B/Wholesale Store

Cart Features:

Header Cart: Enabled
Mini Cart: Optional
Cross-Sells: Bulk discounts
Quantity Buttons: Large increments
Guest Checkout: Disabled
Shipping Calculator: Detailed

Checkout Features:
- Company field required
- Purchase order number
- Tax ID field
- Invoice option
- Net payment terms

Why: B2B needs company information and purchasing workflow.

Advanced Features

Cart Notices and Messages

Add Custom Cart Notices:

// Free shipping progress
add_action('woocommerce_before_cart', function() {
    $threshold = 50; // $50 for free shipping
    $current = WC()->cart->get_cart_contents_total();

    if($current < $threshold) {
        $remaining = $threshold - $current;
        wc_print_notice(
            sprintf('Add %s more to get free shipping!',
            wc_price($remaining)),
            'notice'
        );
    } else {
        wc_print_notice('You have free shipping!', 'success');
    }
});

Cart Expiration

Set Cart Expiration Time:

// Expire cart after 24 hours
add_filter('wc_session_expiring', function() {
    return 60 * 60 * 24; // 24 hours in seconds
});

Sticky Checkout Button

Keep Checkout Button Visible:

Add to child theme style.css:

/* Sticky cart totals on checkout */
@media (min-width: 768px) {
    .woocommerce-checkout .order-review {
        position: sticky;
        top: 20px;
    }
}

One-Click Checkout

Enable with Plugin:

  • WooCommerce Amazon Pay (Amazon Pay button)
  • WooCommerce Stripe (Apple Pay / Google Pay)
  • PayPal for WooCommerce (PayPal Express)

Troubleshooting

Cart icon not updating

Symptoms:

  • Counter doesn't change when items added
  • Number stays at 0 or old count

Solutions:

  1. Clear browser cache
  2. Clear WordPress cache
  3. Check JavaScript console for errors
  4. Disable conflicting plugins
  5. Test with default theme
  6. Regenerate cart fragments

Code Fix:

// Force cart refresh
add_filter('woocommerce_add_to_cart_fragments', function($fragments) {
    ob_start();
    woocommerce_mini_cart();
    $fragments['.widget_shopping_cart_content'] = ob_get_clean();
    return $fragments;
});

Mini cart not opening

Symptoms:

  • Click cart icon, nothing happens
  • Sidebar doesn't slide in

Solutions:

  1. Check browser console for JavaScript errors
  2. Ensure jQuery is loading
  3. Clear JavaScript cache
  4. Test without other plugins
  5. Check z-index conflicts

CSS Fix:

/* Ensure mini cart is on top */
.buddyx-cart-widget-side {
    z-index: 9999;
}

Checkout page layout broken

Symptoms:

  • Fields overlap
  • Columns stack incorrectly
  • Buttons misaligned

Solutions:

  1. Check page template (should be default)
  2. Verify checkout shortcode exists
  3. Clear all caches
  4. Disable page builder plugins
  5. Test with default theme

Fix Checkout Template:

  1. Go to Pages → Checkout
  2. Ensure content is: [woocommerce_checkout]
  3. Template should be "Default Template"
  4. No other page builder elements

Payment gateway not showing

Symptoms:

  • Expected gateway missing
  • Only some gateways visible

Solutions:

  1. Verify gateway is enabled: WooCommerce → Settings → Payments
  2. Check gateway requirements (SSL, currency, country)
  3. Review gateway account status
  4. Check for PHP errors
  5. Test with sandbox mode

Cross-sells not displaying

Symptoms:

  • No related products in cart
  • Cross-sells section empty

Solutions:

  1. Verify products have cross-sells assigned
  2. Check theme removes/adds cross-sell action
  3. Ensure products are in stock
  4. Verify products are published
  5. Clear transient cache

Performance Optimization

Optimize Cart AJAX

Enable AJAX Cart Updates: Most modern themes include this, but ensure:

// Support AJAX add to cart
add_theme_support('wc-product-gallery-zoom');
add_theme_support('wc-product-gallery-lightbox');
add_theme_support('wc-product-gallery-slider');

Cache Exclusions

Don't Cache These Pages:

  • Cart page (/cart/)
  • Checkout page (/checkout/)
  • My Account page (/my-account/)

WP Rocket Example:

  1. Go to Settings → WP Rocket → Advanced Rules
  2. Add to "Never cache" URLs:
/cart/(.*)
/checkout/(.*)
/my-account/(.*)

Minimize Checkout Scripts

Defer Non-Essential Scripts:

add_filter('script_loader_tag', function($tag, $handle) {
    if(is_checkout() && !in_array($handle, ['jquery', 'woocommerce'])) {
        return str_replace(' src', ' defer src', $tag);
    }
    return $tag;
}, 10, 2);

Accessibility Best Practices

Keyboard Navigation

Ensure accessible:

  • Tab through cart items
  • Enter to update quantities
  • Space to select payment methods
  • Tab to Place Order button

Screen Reader Support

Label Elements Properly:

<button aria-label="Remove item from cart">×</button>
<input aria-label="Quantity" type="number">
<label for="payment_method_stripe">Credit Card</label>

Color Contrast

Check these elements:

  • Button text on button background
  • Error messages visibility
  • Required field indicators
  • Price text readability

Focus Indicators

/* Visible focus styles */
.woocommerce input:focus,
.woocommerce select:focus,
.woocommerce button:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

Common Questions

Can I customize the cart icon?

Yes! Use custom CSS to change the icon or upload your own via child theme. The icon uses Font Awesome by default.

How do I add estimated delivery dates?

Use a plugin like "Order Delivery Date" or "WooCommerce Estimated Delivery Date" to add delivery estimates.

Can I have a sticky cart button?

Yes, use CSS to make the checkout button sticky (see "Sticky Checkout Button" above).

How do I remove the Continue Shopping button?

Add to child theme functions.php:

remove_action('woocommerce_cart_actions', 'woocommerce_button_proceed_to_checkout');

Can I set a minimum order amount?

Yes, go to WooCommerce → Settings → Advanced and set minimum order amount.

How do I enable cart expiration?

See "Cart Expiration" in Advanced Features section above.

Related Settings

Need Help?

Documentation: docs.wbcomdesigns.com Support Forum: wbcomdesigns.com/support Cart Optimization Services: wbcomdesigns.com/hire

Email Support: support@wbcomdesigns.com