How to change the cart icon

Caddy’s floating cart bubble shows a shopping bag icon by default. Here’s how to change it.

Pick an icon in the Customizer (Pro)

Caddy Pro includes a built-in icon picker with 10 icon styles — bags, carts, and baskets in outline and filled variants. Go to Appearance > Customize, open the Caddy section, and choose your icon under Cart Icon. The live preview updates instantly; click Publish to save. (You can jump straight there from Caddy > Settings > Styles > Manage Styles in the Customizer.)

The same section lets you change the icon colors for the open and closed states, and switch the save-for-later icon between a heart and a bookmark.

Use your own icon (developers)

To use a completely custom icon, filter caddy_cart_bubble_icon and return your own SVG. Add this to your child theme’s functions.php or a small custom plugin:

add_filter( 'caddy_cart_bubble_icon', function ( $icon ) {
	return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor">…your icon path…</svg>';
} );

The SVG inherits the bubble’s icon color (it’s rendered with currentColor), so the Customizer color settings keep working with your custom icon.

Upgrading from Caddy 1.x/2.x? The old CSS method that targeted .licon::before with a custom icon font is no longer the way to do this — the icon is now an inline SVG. Use the Customizer picker or the filter above instead.

Grow your store smarter

Cart conversion tactics, feature updates, and strategies top WooCommerce stores use to scale — straight to your inbox.

By subscribing, you agree to our Privacy Policy. Unsubscribe anytime.