How to open the Caddy cart using JavaScript

Caddy 3.0 is built on the WordPress Interactivity API, so the old jQuery-based methods from Caddy 1.x/2.x no longer exist. The cart is controlled through Caddy’s Interactivity API store, available to any script on the page.

Opening, closing, and toggling the cart

const caddy = window.wp.interactivity.store( 'caddy/cart' );

// Open the cart drawer
caddy.actions.openCart();

// Open directly to the saved items tab
caddy.actions.openCart( 'saves' );

// Close the drawer
caddy.actions.closeCart();

// Toggle open/closed
caddy.actions.toggleCart();

For example, to open the cart from your own button:

document.querySelector( '#my-cart-button' ).addEventListener( 'click', () => {
	window.wp.interactivity.store( 'caddy/cart' ).actions.openCart();
} );

Reading cart state

The same store exposes the live cart state (read-only — always modify the cart through the WooCommerce Store API rather than writing to this state):

const { state } = window.wp.interactivity.store( 'caddy/cart' );

state.isOpen;     // boolean — is the drawer open
state.cartCount;  // number of items in the cart
state.items;      // array of cart items

Migrating from Caddy 1.x / 2.x

If you previously opened the cart with jQuery (for example by triggering a click on .cc-compass or using a cc_cart event), replace that code with the openCart() action above. Caddy 3.0 does not load jQuery and does not listen for the legacy events.

No-code alternatives: the [cc_cart_items] shortcode renders a link that opens the cart anywhere shortcodes work, and PHP action hooks for customizing the cart screen are listed in Caddy cart screen action hooks.