How to create a custom Cart/Checkout layout

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.

Here’s a quick video recording showing how to add the widgets https://d.pr/v/uCrkxQ and than set them as Cart & Checkout pages in WooCommerce’ Advanced settings.

Troubleshooting

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 please access WooCommerce > Settings > Advanced ex: https://d.pr/i/TWTiv1 .

How to revert and set the classic pages back?

Most easiest way is to disable those pages editing with Elementor and set either the [woocommerce_checkout] or [woocommerce_cart] shortcodes into the page content. Here’s a quick video https://d.pr/v/Ip6NQA .

Please keep in mind you can create other pages for Cart & Checkout but make sure to set them in WooCommerce > Settings > Advanced.

How to set different logo?

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.

Some form fields are not showing up

If you’re running a custom plugin that modifies the built-in checkout fields, make sure to check if those fields are enabled.

If you’re using the Checkout element’s built-in field editor, make sure to check if you accidentally set to remove it eg: https://d.pr/i/mECaRD .

Also, make sure to check in Customizer > WooCommerce > Checkout and see if the fields are set on Hidden eg: https://d.pr/i/M9PIxF .

Cart or Checkout pages are cached

Sometimes the Cart & Checkout page might display products that weren’t added by you. This is likely happening because these pages are cached. This is a bad practice and not recommended

In case you need to manually exclude them, and you’re also running a multilingual site, make sure to exclude each Cart/Checkout language variants pages too.

Incompatibility with “Germanized for WooCommerce”

Rey’s custom layout doesn’t play well with Germanized for WooCommerce plugin so it’s either best to use WooCommerce’s classic checkout, or if you really want Rey’s custom layout, paste this code below inside wp-config.php or the child theme’s functions.php :

if( ! defined('WC_GZD_DISABLE_CHECKOUT_ADJUSTMENTS') ){
	define('WC_GZD_DISABLE_CHECKOUT_ADJUSTMENTS', true);
}