How to create a custom Cart/Checkout layout

You are here:
Estimated reading time: 2 min

LinkHow 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.


LinkTroubleshooting

LinkThe 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 .


LinkHow 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.


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.


LinkI’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.


LinkStyles 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.


LinkSome 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 .


LinkCart 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.


LinkIncompatibility 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);
}
Was this article helpful?
Dislike 0
Views: 4001

3 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

  2. Jakub

    Hey, Marius,

    I find (and my test clients) that when going through steps of your rey custom checkout it doesn’t give notification about errors in the fields.

    It just shows the errors on the last page, when you want to click payment.

    It’s really frustrating because at that stage clients are already so much into the process and changing some small changes in fields 2 steps before is really hard for them, so they abandon the cart often.

    It would be soooooo great if a client wouldn’t be able to proceed with steps if those errors aren’t fixed immediately

    Cheers

Suggest article improvements

Please use this form to suggest improvements and report missing or outdated content. Support requests will most likely not be answered and it's best to use the Support Request Form instead. Thanks!