Bags and Cages · bagsandcages.com

Cart & Checkout Overhaul

Two working directions for the cart and the checkout, built to the Bags and Cages brand. Both are clickable end to end. Change quantities, apply the code DUST10, switch shipping speeds and place an order.

Concept A

Full-Page Cart

Dedicated cart page, step-by-step checkout

  • A dedicated cart page with a sticky order summary that stays on screen while you scroll.
  • Checkout is a four-step accordion. Finished steps collapse to one line with an Edit link.
  • Best when buyers compare line items, adjust quantities and forward a cart for approval.
Open Concept A
Concept B

Slide-Out Cart

Cart drawer, single-page checkout

  • The cart is a drawer over the page. Nobody loses their place in the catalog.
  • Checkout is a single distraction-free page with the running total pinned beside it.
  • Best for speed. Fewer page loads between adding a part and paying for it.
Open Concept B

What both concepts fix

  • Freight is no longer a surprise. Live rates, delivery dates and a liftgate option appear before payment, not after.
  • Purchase orders are a first-class option. Net 30, a PO number field and a PDF upload sit beside the card form.
  • Part numbers are visible on every line. Buyers verify fitment without opening a second tab.
  • Quantity changes are instant. No Update Cart button, no page reload.
  • Stock and ship-by times are on the line item. The same-day cutoff is stated up front.
  • Related parts are offered in the cart. Cages, gaskets and valve kits that ship in the same box.
  • Express wallets are prominent. Amazon Pay, Google Pay and Apple Pay fill the whole form in one tap.
  • Both work on a phone. The current checkout stacks into an unusable column on mobile.
These are front-end mockups. The production build targets only the cart and checkout slugs through a lightweight plugin, so the rest of the WooCommerce site is untouched.