The correct way to create a custom WooCommerce Cart page depends on what controls your store: a block theme, a classic theme, or a page builder. First identify that editing surface, then customize the Cart block or assigned Cart page, verify the Cart and Checkout assignments, and test the result with real cart contents. Do not assume a shortcode hook, CSS selector, or template change will work on a block-based cart.
Choose the correct editing surface
WooCommerce uses different editing paths depending on the active theme and whether a builder controls the page.
| Store setup | Where to edit | What you are changing |
|---|---|---|
| Block theme | Appearance > Editor > Templates > WooCommerce > Page: Cart | The WooCommerce Cart template and its Cart block |
| Classic or non-block theme | Pages > All Pages, then open the page assigned as Cart in WooCommerce settings | The assigned page, shortcode output, or theme template |
| Page builder controls the cart | The builder’s page or template editor | The builder layout and its WooCommerce cart element |
If the expected controls are missing, confirm the active theme and update WordPress and WooCommerce before switching editors. A builder can replace or hide the ordinary WordPress editing controls.
Customize a Cart block
The block-based cart combines products, quantities, totals, discounts, shipping information, checkout options, and product suggestions. It has separate Filled Cart and Empty Cart states, so edit each state rather than assuming one layout covers both situations.
#1 Best Overall
Edit the filled and empty states
- Open the Cart template or page in the appropriate editor.
- Open List View so you can see the Cart block’s hierarchy.
- Select Filled Cart to edit the shopping-cart experience and Empty Cart to edit the no-items experience.
- Change the sections that are unlocked. Dynamic areas may be locked because WooCommerce generates their content.
- Preview the page with products in the cart and with an empty cart, then save.
Adjust supported sections
- Remove or rearrange the Cross-Sells section. In a new Cart block, cross-sells use the Product Collection block; the collection can use products in the cart or a selected product, with configurable ordering and layout.
- Remove the Order Summary heading or coupon form when those elements do not fit your design.
- Change the destination link in the Proceed to Checkout block.
- Edit the empty-cart message and product suggestions in the Empty Cart state.
Enable Save for Later only when its requirements are met
Save for Later appears only when the feature is enabled at WooCommerce > Settings > Advanced > Features, the shopper is logged in, the page uses the block-based Cart, and the products are published. A classic shortcode cart does not display this area.
Verify Cart and Checkout page assignments
Putting a Cart block on a page does not by itself complete the WooCommerce setup. In WooCommerce > Settings > Advanced, verify the designated Cart and Checkout pages. WooCommerce permits only one designated Cart page at a time, and the Checkout page must be assigned for the Cart block’s flow to work properly.
Rank #2
After saving, test these paths as a shopper:
- Add a product, change its quantity, and remove it.
- Apply and remove a coupon.
- Enter a shipping destination and confirm totals update.
- Follow Proceed to Checkout and confirm it reaches the assigned Checkout page.
- Repeat the test with an empty cart and, if enabled, with a logged-out shopper.
Decide between the block and classic Cart
Stores created after WooCommerce 8.3, released in November 2023, use Cart and Checkout blocks by default. The choice should be based on editor controls and extension compatibility, not only appearance.
| Consideration | Cart and Checkout blocks | Classic shortcode route |
|---|---|---|
| Editing surface | Site Editor, block settings, and separate filled/empty states | Assigned page, shortcode output, and classic theme or template customization |
| Design controls | Rearrange supported sections, Product Collection cross-sells, headings, coupon form, and checkout link | Mostly controlled by shortcode output, theme styles, templates, and compatible extensions |
| Extension compatibility | Requires block-compatible hooks or extension APIs | Supports the classic hooks and filters that the extension expects |
| Save for Later | Supported when its feature, login, publication, and block-cart requirements are satisfied | Not displayed |
| Migration risk | Do not rely on private block markup or classic-only hooks | Changing only one page can create a mixed Cart/Checkout implementation |
Convert a Cart block to the classic shortcode
- Open the page or template and select the Cart block in List View.
- Choose Transform in the block toolbar.
- Select Classic Shortcode.
- Save the page.
If you revert an established store, convert both Cart and Checkout rather than leaving one page block-based and the other shortcode-based.
Use PHP, JavaScript, or hooks only for the implementation you actually have
Classic shortcode carts and Cart blocks do not expose the same extension points. A classic action or filter may have no effect on a block cart, even when the PHP is valid. Before adding code, identify the exact implementation and check whether the required hook is supported for it.
When a classic hook is the wrong tool
WooCommerce’s hook guidance identifies classic hooks that are unsupported in Cart and Checkout blocks, including some hooks used for subtotal or total display and shipping details. For block-specific changes, use supported editor controls, block extensibility mechanisms, or the documented Store API extension approach when the change affects API behavior or responses.
Rank #4
- Features Over 160 Latin Songs
- Arranged for C Instruments
- Standard Notation
- 48 Pages
Extension checks before deployment
- Confirm the extension explicitly supports Cart and Checkout blocks if your store uses them.
- Check whether the extension requires a shortcode Cart and Checkout pair.
- Test fees, shipping methods, payment methods, coupons, and totals after activation.
- Keep a rollback path before changing production templates or payment-related code.
Style the page without coupling it to private markup
WooCommerce advises against writing CSS based on existing Cart block class names or descendant relationships. Block HTML internals are private and may change. Prefer global styles and the block’s supported settings, then add narrowly scoped CSS only where the markup is an intentionally supported contract.
- Set typography, colors, spacing, and button treatments through the theme’s global styles where possible.
- Do not target a deeply nested element merely because it appears in the current Cart block markup.
- Retest after WooCommerce, WordPress, or theme updates.
Preserve page content in a block-theme template override
If a block theme overrides page-cart.html, keep the Cart block in the assigned page’s content and render that content through core/post-content. This keeps the page editor and storefront aligned and allows WooCommerce to detect the Cart block in the assigned page.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesBest Value
Troubleshoot a Cart page that is missing or not working
The Site Editor has no WooCommerce Cart template
Check whether the active theme is actually a block theme. If it is classic, edit the assigned page instead. Also confirm WordPress and WooCommerce are current and that a builder has not taken control of the layout.
Changes in the WordPress editor do not appear on the storefront
The page builder or a template override may be rendering the cart instead. Edit the controlling builder template, or restore the assigned page content and ensure the template outputs it with core/post-content where required.
Proceed to Checkout does not reach checkout
Verify the Checkout page assignment in WooCommerce > Settings > Advanced, then test the link from a cart containing a product. Check that only one Cart page is designated.
A PHP customization has no effect
Determine whether the page uses Cart and Checkout blocks. If it does, the classic hook may be unsupported; use the relevant block extension or editor-based route instead.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11The cart looks correct but breaks after an update
Replace selectors that depend on private block internals with global styles or supported block settings, and retest all filled, empty, logged-in, logged-out, shipping, coupon, and checkout states.
Quick Recap
A practical launch checklist
- Identify the active theme and controlling editor.
- Confirm the Cart and Checkout assignments.
- Edit both Filled Cart and Empty Cart states when using blocks.
- Verify cross-sells, coupons, shipping, totals, and checkout links.
- Confirm extension compatibility with blocks or shortcodes.
- Use global styles instead of private block selectors.
- Test logged-in and logged-out shoppers, including Save for Later if enabled.
- Recheck the page after theme, WordPress, and WooCommerce updates.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
