Cart display modes

Path: WooCommerce > Menu Cart > Cart Design & Behavior > Cart display modes.
There is a cart display mode setting for both desktop and mobile displays.

  • Desktop view triggers for displays wider than or equal to 768px.
  • Mobile view triggers for displays less wide than 768px.

These are the desktop view available templates:

These are the mobile view available templates:

None #

No template is used. The cart just appears as a clickable menu item on the site front-end.

Where the full cart slides in from the side.

Mode specific settings:

  • Sidebar width.
  • Overlay opacity.

Floating Cart #

A fixed floating button appears. Clicking on this takes the user to the cart page.

Mode specific settings:

  • Display style
    • Floating circle
    • Side square
  • Position
    • Bottom left
    • Bottom right
    • Top left
    • Top right

A hover/click shows cart content via dropdown action.

Mode specific settings:

  • Max items to show
  • Show thumbnails