How to create a custom Cart/Checkout layout

You are here:
Estimated reading time: 1 min

How to create the layouts?

Make sure Elementor & WooCommerce are enabled.

Create a new page and edit it with Elementor. In the left editor, please search for:

  • WooCommerce Cart Page
  • WooCommerce Checkout Page

Just drag them into the page and customize them as you like.

Quick screencast videos:

Frequently asked questions:

The Cart/Checkout layouts look differently in Elementor vs. public mode. Why?

That likely happens because the page is not set as a WooCommerce Checkout or Cart page. This is essential because it needs to load some custom WooCommerce scripts that adds the functionality.

To change the pages, either do it in the element eg: https://d.pr/i/NVSTi2 , or access WooCommerce > Settings > Advanced .

How to revert and set the classic pages back?

Simply access WooCommerce > Settings > Advanced and you can set both Checkout and Cart pages back to their initial pages.

Here’s a quick video recording https://d.pr/v/sonFEW (to be remade very soon).

Basically make sure to keep distraction mode disabled. Edit the Checkout page in the backend and make sure to disable Header (and Footer if you want) and set the page template as “Rey – Page builder”.

You can now, create any content you want above or below the Checkout page element.

I’m getting an error when trying to edit the page with Elementor.

In frontend, try adding a product in the cart. I noticed this error happens only when the cart is empty.

Styles all look scrambled even though i disabled the Custom layout

Try accessing backend > WooCommerce > Settings > Advanced and make sure to select the classic Checkout page, and finally just save.

This happens probably because a stored option that should’ve been deleted – wasn’t, so this re-save is clearing that option.

Was this article helpful?
Dislike 0
Views: 299

2 Replies to “How to create a custom Cart/Checkout layout”

  1. gyula

    Hi

    Thanks for the updates.

    On the Checkout page, is it possible to rewrite the (Information, Shipping address, Your order, Return to Cart, Continue to shipping, Contact, Ship to, Shipping Method, Return to Information, Continue to payment) language or use only the rey- can I solve it by editing the core.pot file?

    1. mariushoria[ Post Author ]

      Hey!

      I highly recommend using a professional translation editing plugin such as Loco Translate. Some strings can be found in Rey Core plugin, while others are coming from WooCommerce plugin.

      Thanks!
      Marius

Join the conversation