Caddy is a WooCommerce AJAX side cart plugin that updates the cart in real time without page reloads. Built on the WordPress Interactivity API and WooCommerce Store API, it provides instant add-to-cart, quantity changes, coupon application, and product recommendations, all within a reactive slide-out cart drawer.
What Is an AJAX Side Cart?
An AJAX side cart is a cart interface that uses asynchronous JavaScript to update cart contents without reloading the page. When a customer adds a product, changes a quantity, or applies a coupon, the cart updates instantly. No page reload. No waiting. No interruption.
The term “AJAX” (Asynchronous JavaScript and XML) refers to the technology that makes this possible. In practice, it means the cart can communicate with the server in the background while the customer continues browsing. Traditional WooCommerce carts require a full page reload for every cart action. An AJAX side cart handles these actions silently.
What happens without AJAX:
- Customer clicks “Add to Cart”
- Page reloads (1-3 seconds)
- Customer is redirected to the cart page or sees a confirmation
- To continue shopping, they navigate back (another page load)
What happens with AJAX:
- Customer clicks “Add to Cart”
- Side cart slides open instantly (no reload)
- Cart items, total, and shipping meter update in real time
- Customer continues shopping from the same page
The speed difference is significant. Every page reload takes 1-3 seconds and creates an exit opportunity. An AJAX side cart eliminates those reloads entirely.
Why AJAX Matters for WooCommerce Performance
Faster Cart Interactions
Every cart action (add item, remove item, change quantity, apply coupon) happens without a page reload. On a traditional WooCommerce setup, changing a quantity in the cart triggers a full page refresh. On an AJAX side cart, the quantity updates and the totals recalculate instantly.
For stores with heavier pages (lots of images, scripts, or dynamic content), the difference is dramatic. A page that takes 2 seconds to load means 2 seconds of waiting every time a customer touches the cart. An AJAX cart eliminates that wait entirely.
Reduced Server Load
AJAX requests are smaller and more targeted than full page loads. Instead of requesting the entire page HTML, CSS, JavaScript, and images, an AJAX cart request only fetches the updated cart data. This means less server processing per interaction, which matters for stores on shared hosting or during high-traffic periods.
Better User Experience
Speed is the foundation of user experience. Studies consistently show that every additional second of load time increases abandonment rates by 7-10%. An AJAX side cart doesn’t just feel faster. It is faster, and that speed directly translates to lower abandonment and higher conversion.
Caddy: AJAX Side Cart Built on Modern WordPress Architecture
Caddy 3.0 takes the AJAX side cart concept further by building on the WordPress Interactivity API instead of traditional AJAX (admin-ajax.php or custom REST endpoints for cart mutations). This is important because:
WordPress Interactivity API vs Traditional AJAX
Traditional AJAX side carts use jQuery and WordPress’s admin-ajax.php or custom REST endpoints. Each cart action sends an AJAX request, waits for a response, and then manually updates the DOM (page elements). This works but creates a lag between action and visual update.
Caddy’s approach uses the WordPress Interactivity API for reactive state management. The cart state is managed client-side. When a customer adds a product, the UI updates optimistically (instantly) while the server request happens in the background. If the server confirms, nothing changes. If the server rejects (out of stock, for example), the UI rolls back.
The result: the cart feels instant. There’s no visible lag between clicking “Add to Cart” and seeing the cart update. This is the same reactive pattern used by modern web applications (React, Vue, Svelte), but built into WordPress core.
WooCommerce Store API Integration
Caddy uses the WooCommerce Store API (/wp-json/wc/store/v1/cart) for all cart mutations. This is WooCommerce’s official headless cart API, designed for performance and compatibility. Benefits:
- Official support: WooCommerce maintains and tests this API. It’s the foundation of the block-based checkout.
- Performance: Purpose-built for cart operations, faster than admin-ajax.php
- Compatibility: Works with WooCommerce extensions that hook into the Store API (Subscriptions, Product Bundles, etc.)
- Future-proof: As WooCommerce continues moving toward a block/API-first architecture, Store API will become the standard.
No jQuery Dependency
Many AJAX side cart plugins still depend on jQuery. Caddy doesn’t. The entire frontend is built with vanilla JavaScript modules (ESM format), bundled with esbuild. This means:
- Smaller file size (no jQuery overhead)
- Faster execution (modern JS engine optimizations)
- No conflicts with themes or plugins that don’t load jQuery
- Compatible with WordPress’s move away from jQuery dependency
Features Beyond Basic AJAX
Caddy doesn’t just update the cart without reloading. It uses that AJAX foundation to power features that require real-time data:
Free Features
- Instant add-to-cart with optimistic UI updates
- Real-time quantity controls (+/- buttons that update totals instantly)
- Live free shipping meter that recalculates as items are added/removed
- Dynamic product recommendations that change based on cart contents
- Inline coupon application with instant discount calculation
- Save for Later with one-click move-to-cart functionality
- Live cart count badge that updates across all page elements
Pro Features
- Real-time Rewards Meter with tier progression tracking
- Dynamic announcement bar with live variable injection ({cart_total}, {free_shipping_remaining}, {first_name})
- Workflow-triggered actions that fire based on real-time cart state
- Live cart session monitoring for store administrators
- Instant coupon offers with one-click application from the Offers tab
Every feature leverages the AJAX foundation. Nothing requires a page reload. The entire cart experience is reactive from open to checkout.
How to Add an AJAX Side Cart to WooCommerce
- Install Caddy from WordPress.org (free)
- Activate. The AJAX side cart is active immediately.
- Test: add a product to your cart. The side cart should slide open with instant updates.
- Configure settings: enable recommendations, set your free shipping threshold, customize the cart bubble position.
No code required. No theme modifications. Caddy registers a WordPress block that auto-inserts the cart on all pages.
Frequently Asked Questions
Is an AJAX side cart compatible with caching plugins?
Yes. Caddy automatically excludes its cart endpoints from WP Rocket’s cache. For other caching plugins, you may need to exclude the WooCommerce Store API and Caddy REST API endpoints from page caching. The cart itself uses client-side state management, so it works correctly even on cached pages.
Does an AJAX side cart work with WooCommerce product variations?
Yes. When a customer adds a variable product to the cart, the side cart displays the selected variation (size, color, etc.) with the correct price. Quantity changes and removal work the same as simple products.
Can I use an AJAX side cart alongside the default WooCommerce cart page?
Yes. The AJAX side cart runs independently. Customers can still access the default cart page. Most stores find that the side cart handles 80-90% of cart interactions, with the traditional page serving as a fallback for customers who prefer it.
Will an AJAX side cart conflict with other WooCommerce plugins?
Caddy is tested with WooCommerce Subscriptions, Product Bundles, All Products for Subscriptions, and Stripe. It uses WordPress core APIs (Interactivity API, Store API) rather than custom implementations, which minimizes conflicts. Caddy also automatically unregisters the WooCommerce mini-cart block to prevent duplicate cart interfaces.
What’s the performance impact of adding an AJAX side cart?
Minimal. Caddy’s JavaScript bundle is loaded as a script module (ESM) and only initializes when the cart block is present. The Store API requests are lightweight (JSON payloads, no HTML rendering). Most stores see no measurable impact on page load time.
Try Caddy Free
Add a modern AJAX side cart to your WooCommerce store in under 5 minutes. The free version includes reactive cart updates, the shipping meter, product recommendations, Save for Later, and a coupon field.
Upgrade to Caddy Pro for analytics, workflow automation, rewards tiers, and abandoned cart tracking.
