Customizing the Cart Page

8 min read

Important:

This article is relevant for Wix Stores, Wix Bookings, and Wix Restaurants Orders (New).

Similar to a shopping cart in a supermarket, your Cart Page is where customers place items they are interested in buying. When they're done browsing, they can proceed to checkout and complete the order.

Screenshot of the cart page in a sample site

In this article, learn more about:

Accessing the Cart page settings

Access to the Cart page varies according to which business solution(s) you use:

Wix Stores: The Cart page is one of your Store pages.
Wix Bookings: The Cart page is one of your Bookings pages.
Wix Restaurants or any combination of solutions: The Cart page is listed under Cart & Thank You.

Wix Editor

Studio Editor

Go to your editor.
Click Pages & Menu on the left side of the editor.
Select an option:
- My site has only Wix Stores:
  1. Click Store Pages.
  2. Click Cart Page.
- My site has only Wix Bookings:
  1. Click Bookings Pages.
  2. Click Cart Page.
- My site has Wix Restaurants Orders (New) / 2 business solutions:
  1. Click Cart & Thank You.
  2. Click Cart Page.
Click the Cart Page element on your page.
Click Settings.

Screenshot of Pages & Menu showing access points to the Cart Page

Customizing the settings of your Cart page

Choose what you want to display on the Cart page. For example, you can choose to hide the "Enter a promo code" link if you don't offer coupons, or the "Add a note" link if there's no need for customers to leave you notes.

Screenshot of the cart page with the promo and note links outlined

To customize your settings:

Go to the Cart page in your editor.
Click the Cart Page element.
Click Settings.
Click the Settings tab.
Select the relevant checkbox(s) according to the information you'd like to display:
- Shipping & delivery rates: Displays delivery info relevant to the customer's location.
  Tip: If you use only Wix Bookings, we recommend unchecking this option.
- Tax Costs: Displays the relevant tax estimation based on your customer's location.
  Note: Estimated taxes aren't displayed when you include tax in the product price.
- Promo code link: Allows customers to enter coupon codes.
  Note: If selected, the promo code link appears on the Checkout Page, as well.
- Add a note: Customers can click to leave you a message.
  Note: Learn more about viewing customer notes.
Customize the Continue Browsing link:
1. Click Show link under Continue Browsing Link to show or hide the link.
2. If enabled, click Link iconto select where the link directs to.

Screenshot of the cart page with the Continue Browsing link outlined

Click the Show buttons toggle under Express Checkout to show or hide them:
- Enabled: If you set up an express checkout payment provider (e.g. PayPal), an extra checkout button (e.g. PayPal button) is displayed. This directs customers to complete checkout there. Learn more
- Disabled: Only the "Checkout" button is displayed.

Tips:

If you use Wix Restaurant Orders, you need to disable the Express Checkout option.
When the cart is empty, it always displays the "Continue Browsing" link.

Designing your Cart page

Customize the design of the Cart page so it matches your site's overall look and feel. You have full control of the way this page looks, including the colors, fonts, buttons, links, and more.

To design your Cart Page:

Go to the Cart page in your editor.
Click the Cart Page element.
Click Settings.
Click the Design tab.
(Optional) Click the Stretch to full width toggle to enable it.
Customize the design settings of the following areas:
- Background and Borders: Change the color of the page's background and dividers.
- Text Font & Color: Change the color and font of the page's title, body, and links.
- Buttons: Change the color, style and appearance of buttons on the Cart Page.
- Payment methods: Design the express checkout buttons (e.g. PayPal).

Tips:

To optimize the way the cart displays on mobile, make sure that the mobile page background color and cart background color are the same.
If you go to the mobile editor and change the page background, it doesn't affect the background color on desktop.

Editing your Cart Page text

Adjust the text that appears on your Cart Page so it has the same tone and voice as the rest of your site. You can edit titles and buttons on the page.

You can also add a short message that appears between the total and your checkout button.

Screenshot of the cart page with a disclaimer message outlined

To edit your Cart Page text:

Go to the Cart page in your editor.
Click the Cart Page element.
Click Settings.
Click the Text tab.
Edit any of the text options.
(Optional) Add a disclaimer: Enter a short message (max. 90 characters).
Tip: This message appears under the total in the order summary.

Customizing the Cart Page on mobile

Decide where you want to display the checkout button for customers viewing your site on mobile. Choose from just displaying it only at the bottom of the page or display it at both the top and the bottom.

In the Studio Editor:

Many customizations are available for the mobile breakpoint in the Studio Editor, however, it's not possible to select where to display the Checkout button.