How to customize the "Cart" page
Updated 9 months ago
What is a Cart page? #
Cart is the required page of the site with WooCommerce if you want to sell online. It's created automatically after installation WooCommerce plugin, and you can easily find it in the list of pages:
By default, the cart page has the [woocommerce_cart] shortcode/element, which shows the predefined WooCommerce template for the cart elements.
The default WooCommerce template for the cart page could be adjusted at Theme Options > Shop > Cart Page.
How to Customize the Cart Page #
You can customize the Cart Page like any other page with WP Bakery page builder or the Theme's Live Builder. You can add rows, columns, and other elements of content and structure as you like.
Start customizing by removing the default [woocommerce_cart] shortcode/element and using the relevant cart elements from the Theme's library:
Elements marked as "Required" are needed for the work of the Cart page.
- Cart - Product Table — shows the table with the list of cart items allowing to adjust the table head, table styling, thumbnails, quantity buttons, remove link. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like.
- (Required) Cart - Totals — shows the total price for your cart items. While editing, you can decide if you want to show sub-total price for it (before discount), adjust wording and styles for the title and button. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like.
- Coupon Form — shows the input for applying the coupon code. While editing, you can adjust its placeholder as well as styling and label for the submit button. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like.
- Notices Box — shows the validation messages and notifications about the cart page adjustments (such as coupon application and others). While editing, you can apply one of the pre-defined styles for the message box. The "Design" tab allows you to apply any colors, background, padding, margins, animation, and other styling tools as you like.
You can combine and move these elements, use different columns layout for them, and apply styling via the "Design" tab to create your own unique Cart page appearance.
Custom Upsells and Cross-Sells #
You can show related products in your custom Cart page by adding a Grid element that is set up to show the Upsells or Cross-Sells products:
Upsells are products that you recommend instead of the currently viewed product, for example, products that are more profitable or better quality or more expensive.
Cross-sells are products that you promote in the cart, based on the current product.
When editing the product, you can set up other products related to it as an Upsell or Cross-sell via the Product data > Linked Products.
You might also want to hide Grid with Upsells/Cross-sells in case there are no relevant products specified. You can implement this behavior in the Grid element’s General tab > Action when no results found > Hide this Grid.
Cart Page Examples #
Example 1. Fashion Shop
Example 2. Online Courses
Example 3. Beauty Shop
