Woo Custom Cart

🎨 Tutorial: Creating a Custom WooCommerce Cart Page by Overriding the Template with PHP 🚀

WooCommerce provides a default Cart Page, but if you want to take full control of its layout and design, overriding the cart template is the way to go. This tutorial will guide you step-by-step through the process.

🔧 What You’ll Learn:

How to locate the default WooCommerce cart template.
How to override the cart template in your theme.
How to customize the cart page using PHP.

Step 1: Locate the Default WooCommerce Cart Template

WooCommerce templates are stored in the plugin’s directory.
The cart template is located here:

/wp-content/plugins/woocommerce/templates/cart/cart.php

This file contains the layout and structure of the cart page. You’ll use it as the starting point for your customization.

Step 2: Copy the Cart Template to Your Theme

To safely customize WooCommerce templates, you must override them in your theme (or child theme). Follow these steps:

Navigate to your theme folder:
```
/wp-content/themes/your-theme/
```
Create a new folder named woocommerce if it doesn’t already exist:
```
/your-theme/woocommerce/
```
Inside the woocommerce folder, create a cart folder:
```
/your-theme/woocommerce/cart/
```
Copy the cart.php file from the WooCommerce plugin folder into your theme’s cart folder:
```
/your-theme/woocommerce/cart/cart.php
```
Now WooCommerce will use your custom cart.php file instead of the default one.

Step 3: Customize the Cart Template with PHP

Open your copied cart.php file in a code editor. Let’s start customizing it.

Basic Structure of `cart.php`

Here’s an overview of what’s inside the default cart.php:

Displays the cart table (products, quantity, price, etc.).
Includes hooks for inserting additional content.
Provides buttons for updating the cart and proceeding to checkout.

Let’s modify it step-by-step.

Example 1: Customize the Cart Table Layout

Replace the default cart table layout with your custom design.

Locate this section in cart.php:

<?php do_action( 'woocommerce_before_cart_table' ); ?>

<table class="shop_table shop_table_responsive cart woocommerce-cart-form__contents" cellspacing="0">
    <thead>
        <tr>
            <th class="product-name"><?php esc_html_e( 'Product', 'woocommerce' ); ?></th>
            <th class="product-price"><?php esc_html_e( 'Price', 'woocommerce' ); ?></th>
            <th class="product-quantity"><?php esc_html_e( 'Quantity', 'woocommerce' ); ?></th>
            <th class="product-subtotal"><?php esc_html_e( 'Subtotal', 'woocommerce' ); ?></th>
        </tr>
    </thead>
    <tbody>
        <?php do_action( 'woocommerce_before_cart_contents' ); ?>
        <?php
        foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) {
            $_product   = $cart_item['data'];
            $product_id = $cart_item['product_id'];
            if ( $_product && $_product->exists() && $cart_item['quantity'] > 0 ) {
                ?>
                <tr>
                    <td class="product-name">
                        <?php echo $_product->get_name(); ?>
                    </td>
                    <td class="product-price">
                        <?php echo wc_price( $_product->get_price() ); ?>
                    </td>
                    <td class="product-quantity">
                        <?php echo $cart_item['quantity']; ?>
                    </td>
                    <td class="product-subtotal">
                        <?php echo wc_price( $cart_item['line_total'] ); ?>
                    </td>
                </tr>
                <?php
            }
        }
        ?>
        <?php do_action( 'woocommerce_cart_contents' ); ?>
    </tbody>
</table>

<?php do_action( 'woocommerce_after_cart_table' ); ?>

You can change the HTML structure or classes to fit your custom design.

Example 2: Add Custom Text or a Banner

Add a custom message or promotional banner above the cart table.

Insert this just below the woocommerce_before_cart hook:

<?php do_action( 'woocommerce_before_cart' ); ?>

<div class="custom-cart-message" style="background: #f4f4f4; padding: 10px; margin-bottom: 20px;">
    <p style="font-size: 16px; text-align: center;">🎉 Get 10% off your order when you spend $100 or more!</p>
</div>

Example 3: Add a Discount Code Field

WooCommerce already has a coupon section, but you can add a custom discount code input field.

Insert this before the “Cart Totals” section:

<div class="custom-discount-field">
    <h3>Enter a Discount Code</h3>
    <form method="post">
        <input type="text" name="custom_discount_code" placeholder="Discount Code" />
        <button type="submit" name="apply_discount" class="button">Apply Discount</button>
    </form>
</div>

<?php
if ( isset( $_POST['apply_discount'] ) && ! empty( $_POST['custom_discount_code'] ) ) {
    $code = sanitize_text_field( $_POST['custom_discount_code'] );
    if ( $code === 'SAVE10' ) { // Replace 'SAVE10' with your actual code.
        WC()->cart->add_fee( 'Discount', -10 ); // Apply a flat $10 discount.
    } else {
        wc_add_notice( 'Invalid discount code.', 'error' );
    }
}
?>

Example 4: Add Sticky Cart Totals

Make the “Cart Totals” section sticky so it follows users as they scroll.

Wrap the totals in a <div> and add a sticky CSS class:

<div class="sticky-cart-totals" style="position: sticky; top: 10px;">
    <?php do_action( 'woocommerce_cart_totals' ); ?>
</div>

Example 5: Add Trust Badges Below Totals

Boost confidence by adding secure checkout badges below the totals:

<div class="trust-badges" style="margin-top: 20px; text-align: center;">
    <img src="https://example.com/secure-payment.png" alt="Secure Payment" style="max-width: 150px;" />
    <p style="font-size: 12px; color: #555;">100% Safe & Secure Payment</p>
</div>

Step 4: Style Your Custom Cart Page

Use CSS to style your custom layout. Add styles to your theme’s style.css file or enqueue a custom stylesheet:

function enqueue_cart_styles() {
    if ( is_cart() ) {
        wp_enqueue_style( 'custom-cart-styles', get_stylesheet_directory_uri() . '/cart.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'enqueue_cart_styles' );

Step 5: Test Your Custom Cart Page

Add products to your cart and visit the cart page.
Ensure your changes work as expected.
Test responsiveness on different devices.

🚀 Bonus Tip: Restore Default Behavior

If something goes wrong, simply delete your custom cart.php file. WooCommerce will automatically fall back to its default template.

Now you’ve created a fully customized WooCommerce cart page! 🎉 Whether it’s adding promotional banners, sticky totals, or trust badges, this process lets you create a user-friendly experience that fits your store’s brand.

Bonus Cart Code and Ideas 🛒

🎉 Bonus WooCommerce Cart Code & Ideas for Your Custom Cart Page 🚀

Here’s a treasure trove of additional customizations and ideas you can implement to make your WooCommerce cart page more engaging, functional, and visually stunning. These snippets and concepts will enhance user experience and potentially boost conversions.

1. Add a Progress Bar for Checkout Steps

Show customers how far they are in the checkout process.

add_action('woocommerce_before_cart', 'add_checkout_progress_bar');
function add_checkout_progress_bar() {
    echo '
    <div class="checkout-progress-bar" style="margin: 20px 0; padding: 10px; text-align: center;">
        <span style="color: #555; font-weight: bold;">🛒 Cart ➡️ 💳 Checkout ➡️ 🎉 Complete</span>
    </div>';
}

You can style this further with CSS to make it more visually appealing.

2. Highlight Free Shipping Threshold

Encourage customers to add more products to their cart to qualify for free shipping.

add_action('woocommerce_before_cart', 'show_free_shipping_message');
function show_free_shipping_message() {
    $free_shipping_threshold = 50; // Set your free shipping threshold.
    $cart_total = WC()->cart->subtotal;

    if ( $cart_total < $free_shipping_threshold ) {
        $remaining = $free_shipping_threshold - $cart_total;
        echo '<div class="free-shipping-message" style="margin: 15px 0; padding: 10px; background: #fffae6; text-align: center;">
            <p style="margin: 0;">Add <strong>' . wc_price($remaining) . '</strong> more to your cart for FREE shipping! 🚚</p>
        </div>';
    } else {
        echo '<div class="free-shipping-message" style="margin: 15px 0; padding: 10px; background: #e6ffe6; text-align: center;">
            <p style="margin: 0;">🎉 You qualify for FREE shipping!</p>
        </div>';
    }
}

3. Add a “Continue Shopping” Button

Help users easily navigate back to the shop.

add_action('woocommerce_cart_actions', 'add_continue_shopping_button');
function add_continue_shopping_button() {
    echo '<a href="' . wc_get_page_permalink('shop') . '" class="button" style="margin-left: 10px;">Continue Shopping 🛍️</a>';
}

4. Show Product Thumbnails in Cart

Add product images to the cart table for a visual shopping experience.
In your custom cart.php, modify the cart table loop to include thumbnails:

<td class="product-thumbnail">
    <?php echo $_product->get_image('thumbnail'); ?>
</td>

Add this snippet above or alongside the product name.

Let customers share their cart or favorite products with friends.

add_action('woocommerce_after_cart', 'add_cart_social_sharing');
function add_cart_social_sharing() {
    $cart_url = wc_get_cart_url();
    echo '<div class="social-sharing" style="text-align: center; margin-top: 20px;">
        <p>💌 Share your cart with friends:</p>
        <a href="https://www.facebook.com/sharer.php?u=' . $cart_url . '" target="_blank" style="margin-right: 10px;">Facebook</a>
        <a href="https://twitter.com/intent/tweet?url=' . $cart_url . '&text=Check%20out%20my%20cart!" target="_blank">Twitter</a>
    </div>';
}

6. Display Cross-Sells Below the Cart Table

WooCommerce already supports cross-sells, but you can control where and how they appear.

remove_action('woocommerce_cart_collaterals', 'woocommerce_cross_sell_display');
add_action('woocommerce_after_cart', 'woocommerce_cross_sell_display', 10);

You can also modify the number of cross-sell products displayed:

add_filter('woocommerce_cross_sells_total', function() { return 4; }); // Display 4 items.
add_filter('woocommerce_cross_sells_columns', function() { return 4; }); // Use 4 columns.

7. Add a Custom Notice for Discounts

Display a message if a customer has applied a coupon.

add_action('woocommerce_before_cart', 'display_coupon_applied_message');
function display_coupon_applied_message() {
    if ( WC()->cart->has_discount() ) {
        echo '<div class="coupon-applied-message" style="margin: 15px 0; padding: 10px; background: #e6f7ff; text-align: center;">
            <p style="margin: 0;">🎉 Discount applied successfully! Enjoy your savings.</p>
        </div>';
    }
}

8. Add a Custom Field to the Cart for Gift Notes

Allow customers to leave a personalized gift message.

add_action('woocommerce_after_cart_table', 'add_gift_note_field');
function add_gift_note_field() {
    ?>
    <div class="gift-note" style="margin: 15px 0;">
        <label for="gift_note">🎁 Add a Gift Note:</label><br>
        <textarea name="gift_note" id="gift_note" rows="3" style="width: 100%;"></textarea>
    </div>
    <?php
}

add_action('woocommerce_cart_calculate_fees', 'save_gift_note_to_order');
function save_gift_note_to_order() {
    if (!empty($_POST['gift_note'])) {
        WC()->session->set('gift_note', sanitize_text_field($_POST['gift_note']));
    }
}

add_action('woocommerce_checkout_create_order', 'add_gift_note_to_order_meta');
function add_gift_note_to_order_meta($order) {
    if ($gift_note = WC()->session->get('gift_note')) {
        $order->update_meta_data('gift_note', $gift_note);
    }
}

9. Show Estimated Delivery Dates

Display an estimated delivery date based on the customer’s location.

add_action('woocommerce_after_cart_table', 'show_estimated_delivery_date');
function show_estimated_delivery_date() {
    $delivery_time = 3; // Number of days for delivery.
    $current_date = date('F j, Y', strtotime("+$delivery_time days"));

    echo '<div class="estimated-delivery-date" style="margin: 15px 0; text-align: center;">
        <p>📦 Estimated Delivery Date: <strong>' . $current_date . '</strong></p>
    </div>';
}

10. Disable Coupons on Specific Cart Conditions

Prevent coupon usage when certain products are in the cart.

add_filter('woocommerce_coupon_is_valid', 'restrict_coupons_on_conditions', 10, 2);
function restrict_coupons_on_conditions($is_valid, $coupon) {
    $restricted_product_ids = array(123, 456); // Replace with your product IDs.

    foreach (WC()->cart->get_cart() as $cart_item) {
        if (in_array($cart_item['product_id'], $restricted_product_ids)) {
            wc_add_notice('Coupons cannot be applied to items in your cart.', 'error');
            return false;
        }
    }
    return $is_valid;
}

Keep the “Proceed to Checkout” button always visible.

add_action('wp_footer', 'add_sticky_checkout_button');
function add_sticky_checkout_button() {
    if (is_cart()) {
        echo '<div class="sticky-checkout" style="position: fixed; bottom: 0; width: 100%; background: #0071a1; padding: 10px; text-align: center;">
            <a href="' . wc_get_checkout_url() . '" style="color: #fff; font-size: 18px; text-decoration: none;">Proceed to Checkout ➡️</a>
        </div>';
    }
}

12. Make the Cart More Interactive with Quantity Buttons

Replace the default quantity input with “+” and “−” buttons.
In cart.php, replace this:

<input type="number" ...

With this:

<div class="quantity">
    <button class="minus">−</button>
    <input type="number" name="cart[<?php echo $cart_item_key; ?>][qty]" value="<?php echo $cart_item['quantity']; ?>" />
    <button class="plus">+</button>
</div>

Add this JavaScript to increment or decrement values:

<script>
    document.querySelectorAll('.quantity .plus').forEach(btn => {
        btn.addEventListener('click', function() {
            let input = this.previousElementSibling;
            input.value = parseInt(input.value) + 1;
        });
    });

    document.querySelectorAll('.quantity .minus').forEach(btn => {
        btn.addEventListener('click', function() {
            let input = this.nextElementSibling;
            if (parseInt(input.value) > 1) input.value = parseInt(input.value) - 1;
        });
    });
</script>

🚀 Wrapping Up

These

bonus ideas and code snippets allow you to create a unique, interactive, and highly functional WooCommerce cart page. Whether you’re adding helpful messages, enhancing visuals, or streamlining the shopping process, these customizations can significantly improve the user experience. Combine these snippets, tweak them to fit your store’s branding, and create a cart page that wows your customers! 🛒✨

Bonus Pro Tips!!

🧠 Pro Tips for WooCommerce Cart Pages: What You Need to Know 🚀

Designing a stellar WooCommerce cart page isn’t just about adding features—it’s about crafting a seamless user experience that encourages conversions. Here are some pro tips to help you optimize your cart page like a seasoned eCommerce expert:

1. Simplify, Simplify, Simplify

Why It Matters: A cluttered cart page can overwhelm customers, leading to cart abandonment.
Pro Tip:
- Keep the layout clean and minimal.
- Remove distractions like unnecessary navigation links or banners.
- Avoid asking for non-essential information.

2. Show Total Costs Clearly

Why It Matters: Unexpected costs are the #1 reason for cart abandonment.
Pro Tip:
- Display the subtotal, shipping costs, and tax breakdown clearly.
- Update totals dynamically when customers change quantities or apply coupons.
- Add messages like, “No additional taxes will be added.”

3. Optimize for Mobile

Why It Matters: Over 70% of online shopping happens on mobile devices.
Pro Tip:
- Use a responsive layout that adapts perfectly to smaller screens.
- Ensure touch targets (like buttons) are easy to tap.
- Test on multiple devices for usability.

4. Include a Clear Call-to-Action (CTA)

Why It Matters: Customers need clear guidance on what to do next.
Pro Tip:
- Make the “Proceed to Checkout” button big, bold, and prominent.
- Use action-oriented text like “Go to Secure Checkout” instead of just “Next.”

5. Add Trust Elements

Why It Matters: Customers want reassurance before proceeding with payment.
Pro Tip:
- Display trust badges like “Secure Checkout” or “Money-Back Guarantee.”
- Add customer reviews or testimonials nearby.
- Use HTTPS (SSL certificates) to show the lock icon in the browser.

6. Highlight Free Shipping

Why It Matters: Free shipping can increase conversions dramatically.
Pro Tip:
- Use a “Free Shipping Threshold” banner (e.g., “Spend $10 more for free shipping!”).
- Make sure the free shipping option is visible and easy to select at checkout.

7. Offer One-Click Checkout

Why It Matters: Fewer steps = higher conversions.
Pro Tip:
- Enable “Buy Now” buttons for direct checkout.
- Consider plugins like WooCommerce Fast Cart or Express Checkout for smoother user experiences.

8. Use Exit-Intent Popups

Why It Matters: Capture customers before they abandon their cart.
Pro Tip:
- Use popups to offer discounts or remind users of their cart items.
- Example: “Wait! Get 10% off if you complete your order now!”

9. Add Cross-Sells Strategically

Why It Matters: Increase average order value with related products.
Pro Tip:
- Suggest low-cost, complementary items below the cart (e.g., “Add gift wrap for $5”).
- Use cross-sells sparingly to avoid overwhelming the user.

10. Enable Save-for-Later Options

Why It Matters: Shoppers may not be ready to buy but don’t want to lose their items.
Pro Tip:
- Allow customers to save items in their cart or move them to a wishlist.
- Use plugins like YITH WooCommerce Wishlist for easy implementation.

11. Speed Up Your Cart Page

Why It Matters: A slow cart page leads to drop-offs.
Pro Tip:
- Optimize images to reduce page load time.
- Minimize third-party scripts and stylesheets.
- Use caching plugins like WP Rocket or W3 Total Cache.

12. Test Different Layouts (A/B Testing)

Why It Matters: What works for one store may not work for another.
Pro Tip:
- Experiment with different layouts, button placements, and messaging.
- Use tools like Google Optimize or Optimizely to run A/B tests and track results.

13. Remind Users of Discounts

Why It Matters: Shoppers love to see their savings.
Pro Tip:
- Highlight discounts in bold or a different color (e.g., “You saved $10!”).
- Show coupons applied clearly, with the option to remove them.

14. Don’t Force Account Creation

Why It Matters: Mandatory account creation frustrates new customers.
Pro Tip:
- Enable guest checkout to reduce friction.
- Offer a one-click account creation option (e.g., “Create an account with your order”).

15. Recover Abandoned Carts with Follow-Ups

Why It Matters: 69% of carts are abandoned on average.
Pro Tip:
- Use abandoned cart recovery plugins like CartFlows or Retainful.
- Send reminder emails with a discount or a nudge (e.g., “Your cart misses you!”).

16. Add a Coupon Code Section

Why It Matters: Some customers actively look for discounts.
Pro Tip:
- Place the coupon input field prominently at the top of the cart page.
- Show a list of available coupons dynamically using a plugin like Smart Coupons.

17. Display Cart Persistence

Why It Matters: Customers often return later to complete purchases.
Pro Tip:
- Enable cart persistence so users’ items remain saved, even if they leave the site.
- WooCommerce handles this by default, but you can extend functionality with plugins like Persistent Cart.

18. Support Multiple Payment Options

Why It Matters: Flexible payment methods improve conversion rates.
Pro Tip:
- Offer multiple gateways like PayPal, Stripe, Apple Pay, Google Pay, etc.
- Display the payment options on the cart page for transparency.

19. Use Analytics to Optimize

Why It Matters: Data-driven decisions lead to better results.
Pro Tip:
- Track cart abandonment rates with tools like Google Analytics or Hotjar.
- Analyze user behavior (e.g., where users drop off) and address those pain points.

20. Make It Accessible

Why It Matters: Accessibility improves usability for everyone.
Pro Tip:
- Use proper semantic HTML for screen readers.
- Test your cart page with keyboard-only navigation and tools like WAVE Accessibility Checker.

🚀 Wrapping It Up

A pro-level cart page balances functionality, design, and psychology. By focusing on clarity, trust, speed, and usability, you can turn your cart page into a conversion powerhouse. Remember: constantly test and iterate to see what works best for your audience. 🛒✨