Appearance

Compatibility ​

How ShapedCart works alongside your theme, page builder and other plugins, and the few settings worth checking.

ShapedCart is built to work with any WooCommerce store. It adds its cart on top of your pages instead of changing your theme's templates, and it uses WooCommerce's own cart system, the Store API, for every change. So most themes and plugins work with it out of the box. This page covers the few places where it helps to adjust a setting.

At a glance ​

Works withNotes
Classic themes: Astra, Storefront, GeneratePress, OceanWP, Kadence, Blocksy, Neve, Flatsome and othersTurn off the theme's own slide-out cart, if it has one. Details
Block themes: Twenty Twenty-Five and othersUse the shortcode for the header cart icon, and replace WooCommerce's Mini-Cart block. Details
Page builders: Elementor, Divi, Beaver Builder, Bricks and othersPlace the menu cart with the shortcode. Details
WooCommerce Cart and Checkout blocksFully compatible.
High-Performance Order Storage (HPOS)Fully compatible. ShapedCart doesn't touch orders.
Product add-on and personalization pluginsDetails shoppers enter show in the cart. Details
Variation swatch pluginsSwatch names show in the cart the way the swatch plugin labels them.
Caching and speed pluginsWorks with WooCommerce-aware caching. A few settings to check. Details
Translation pluginsBuilt-in text is translatable. Translation
Other side cart pluginsUse one side cart at a time. Details

Themes ​

ShapedCart works with both classic and block themes, because the cart opens on top of the page rather than inside your theme's layout. It uses your theme's font, and you set its colors in ShapedCart.

The one thing to watch for is two carts. Many themes have a cart of their own, and if both are on, shoppers may see two cart icons, or two panels opening at once.

Classic themes ​

Many classic themes, like Astra, Kadence, Blocksy and Flatsome, have a header cart icon that opens their own dropdown or slide-out cart. You have two options:

  • Replace it with ShapedCart's menu cart. In your theme's header or WooCommerce settings (usually in Appearance → Customize), hide the theme's cart icon or turn off its slide-out cart. Then switch on ShapedCart's Menu Cart and pick your header menu under Add to Menu.
  • Keep the theme's icon and use ShapedCart's floating cart. Set the theme's cart icon to link to the cart page instead of opening its own panel, if it has that option, and let ShapedCart's floating cart and auto-open handle the side cart.

Block themes ​

In block themes, the header is built in the Site Editor, and WooCommerce's Mini-Cart block is often already in it. WooCommerce sometimes adds it for you. The Mini-Cart block opens its own cart drawer when clicked, so on its own it would show a second cart.

  1. Go to Appearance → Editor and open your Header template part.
  2. Select the Mini-Cart block and remove it.
  3. Add a Shortcode block after your Navigation block with [shaped_cart_menu] in it, and save. Menu Cart → Block themes has the full steps.

Check with a real product

After changing your header, add a product on the storefront. You should see one cart open, not two, and one cart icon in the header with the right count.

Page builders ​

ShapedCart works with page builders like Elementor, Divi, Beaver Builder and Bricks. The side cart and floating cart appear on every page automatically. There's nothing to add in the builder for those.

For a cart icon in a header you've built with a page builder:

  • If the header uses a WordPress menu, for example Elementor's Nav Menu widget showing one of your menus from Appearance → Menus, pick that menu under ShapedCart's Add to Menu and the icon is added to it.
  • Otherwise, add the builder's Shortcode widget or element where you want the icon, and paste [shaped_cart_menu] into it. See Shortcode.

If your builder has its own cart or "menu cart" widget, remove it from the header so shoppers don't see two cart icons.

WooCommerce features ​

ShapedCart tells WooCommerce it's compatible with two of its newer features, so you won't see warnings for them:

  • High-Performance Order Storage (HPOS), WooCommerce's newer way of storing orders. ShapedCart doesn't read or change orders, so it works with HPOS on or off.
  • The Cart and Checkout blocks. Your cart and checkout pages can use the classic shortcodes or the blocks. The side cart's checkout and view cart buttons go to whichever you use.

ShapedCart doesn't need WooCommerce's older "cart fragments" script to keep the cart up to date, because it uses the Store API instead.

Product add-ons ​

ShapedCart shows the details shoppers enter with product add-on and personalization plugins, like an engraving, a gift message or extra options, under the product name in the cart. It reads them the same way the WooCommerce Cart block does, so anything that shows on your WooCommerce cart page shows in the side cart too.

Some add-on plugins, such as Advanced Product Fields for WooCommerce, only send their details when the shopper is on the cart page itself. ShapedCart handles those as well.

If an add-on changes the price, the side cart shows the new price, because prices come straight from WooCommerce.

The details only show while Show custom details is on, which it is by default. See Show custom details.

Details not showing?

Check that they show on your regular WooCommerce cart page. If they don't show there either, the add-on plugin isn't adding them to the cart, and its own settings are the place to look.

Caching and speed plugins ​

ShapedCart works with caching plugins, such as WP Rocket and LiteSpeed Cache, and with host-level caching, as long as the cache is WooCommerce-aware. That means it doesn't serve cached pages to shoppers who have something in their cart. Many caching plugins do this by default, but it's worth checking yours.

This matters because ShapedCart builds the cart into each page as it loads, so it can open instantly. A cached page contains whatever cart it was cached with. WooCommerce-aware caches skip the cache for shoppers with items in their cart, so those shoppers always get a fresh page with their own cart.

Check these if you use caching:

  • Leave WooCommerce's pages uncached. Cart, checkout and My Account should never be cached. Most caching plugins exclude them automatically.
  • Don't cache pages for shoppers with a cart. Your caching plugin should skip the cache when the woocommerce_items_in_cart cookie is set. Many caching plugins do this automatically when WooCommerce is active. Others have a setting for it, or let you add the cookie to a list of cookies that skip the cache.
  • Clear the cache after you change ShapedCart settings. Otherwise, cached pages keep showing the old cart design until the cache expires.

"Delay JavaScript" and similar options

Speed settings that delay or combine JavaScript, like WP Rocket's Delay JavaScript execution, can hold ShapedCart's script back until the shopper moves the mouse or scrolls. Until then, the floating cart and menu cart can't open the cart. If you notice that, exclude ShapedCart's script from delaying. Its file is wp-content/plugins/reno-cart/assets/frontend/drawer.js.

If a shopper sees an item count that doesn't match their cart, the page almost certainly came from a cache. The count corrects itself as soon as they change something in their cart. Troubleshooting covers cache problems step by step.

Other side cart plugins ​

Use one side cart plugin at a time. If another "side cart", "fly cart", "mini cart" or "cart drawer" plugin is active, both plugins will try to open their own cart when a shopper adds a product, and shoppers may see two carts or two floating buttons.

Deactivate the other plugin before you try ShapedCart. If you want to compare the two, switch between them rather than running them together. You can pause ShapedCart without losing its settings with Enable ShapedCart.