Set up the WooCommerce cart and checkout

  • woocommerce
  • cart
  • checkout
  • header
  • customizer

Shoppers need a way to open the cart from any page, then a Cart page and a Checkout page to finish the order. Dirigible styles those pages to match your site. WooCommerce still creates the pages and processes payment.

You need WooCommerce active and at least one product. Start with Set up WooCommerce and add products if the shop isn't live yet.

Show a cart icon in the header

The cart icon is off until you turn it on. Pick one place so shoppers don't see two icons.

In the main header

  1. Go to Appearance → Customize → Header & Menus → Desktop.
  2. Turn on Show Cart.
  3. Click Publish.

The same control adds the cart to the mobile menu.

In the utility bar

  1. Go to Appearance → Customize → Header & Menus → Utility Nav.
  2. Turn on Enable.
  3. Leave Shopping Cart on.
  4. Turn on Enable on Mobile if the bar (and this cart) should show on phones.
  5. Click Publish.

The icon is WooCommerce's Mini Cart. It opens a drawer so visitors can review the cart without leaving the page.

To call it a bag or basket instead of a cart, go to Appearance → Customize → Store → Product Catalog and set Shopping Cart to Cart, Bag, or Basket. That label is separate from the Utility Nav Shopping Cart toggle.

Check the Cart and Checkout pages

WooCommerce creates Cart and Checkout pages during setup. Keep the blocks it puts on those pages.

  1. Under Pages, open Cart.
  2. Confirm the page includes the Cart block (or the classic cart shortcode on older sites). Don't delete it or replace it with a regular paragraph.
  3. Open Checkout and confirm it includes the Checkout block (or the classic checkout shortcode).
  4. If a page is empty or the wrong page is assigned, set Cart page and Checkout page under WooCommerce → Settings → Advanced.

New WooCommerce installs use the block cart and block checkout. Dirigible styles both. Classic shortcode pages still work if that's what the site already has.

Style the purchase buttons and fields

Cart and checkout use your sitewide button and form styles, not a Store panel of their own.

  1. Go to Appearance → Customize → Styles → Buttons if Add to Cart, Update cart, or Place order look off-brand.
  2. Go to Appearance → Customize → Styles → Forms if checkout fields, dropdowns, or notices look off-brand.
  3. Click Publish, then add a product, open the mini cart, the Cart page, and Checkout on a phone and a desktop.

Tips