GET REY

How to create a custom Cart/Checkout layout

You are here:
Estimated reading time: 1 min
In this article

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.

Quick screencast videos:

Frequently asked questions:

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, either do it in the element eg: https://d.pr/i/NVSTi2 , or access WooCommerce > Settings > Advanced .

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 .

Was this article helpful?
Dislike 0
Views: 3433

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!