Cart & Checkout

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

Go to Appearance → Customize
Navigate to Site Header → Header Cart
Enable “Show Cart Icon in Header”
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.

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:

Customer adds product to cart
Mini cart automatically slides in from right
Shows added product with confirmation
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

Add product to cart
Click cart icon in header
Verify sidebar opens
Test remove item
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:

Go to WooCommerce → Settings → General
Check/uncheck “Enable coupons”
Save changes

Customize Cross-Sells:

Edit product
Scroll to “Linked Products”
Add cross-sell products
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:

Install “WooCommerce Customizer” plugin
Go to Customizer → WooCommerce → Checkout
Change “Place Order” button text
Customize other checkout text

Add Trust Badges:

Add after checkout form using hook:

add_action('woocommerce_review_order_before_submit', function() {
    echo '';
    echo '';
    echo '';
    echo '';
});

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:

Go to WooCommerce → Settings → Accounts & Privacy
Check “Allow customers to place orders without an account”
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:

Clear browser cache
Clear WordPress cache
Check JavaScript console for errors
Disable conflicting plugins
Test with default theme
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:

Check browser console for JavaScript errors
Ensure jQuery is loading
Clear JavaScript cache
Test without other plugins
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:

Check page template (should be default)
Verify checkout shortcode exists
Clear all caches
Disable page builder plugins
Test with default theme

Fix Checkout Template:

Go to Pages → Checkout
Ensure content is: [woocommerce_checkout]
Template should be “Default Template”
No other page builder elements

Payment gateway not showing

Symptoms:

Expected gateway missing
Only some gateways visible

Solutions:

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

Cross-sells not displaying

Symptoms:

No related products in cart
Cross-sells section empty

Solutions:

Verify products have cross-sells assigned
Check theme removes/adds cross-sell action
Ensure products are in stock
Verify products are published
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:

Go to Settings → WP Rocket → Advanced Rules
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:



Credit Card

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

WooCommerce Setup Guide – Initial configuration
WooCommerce Customizer Settings – Theme settings
Shop Page Layouts – Product display options

Need Help?

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

Email Support: support@wbcomdesigns.com