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:
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 .
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.
In frontend, try adding a product in the cart. I noticed this error happens only when the cart is empty.
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.
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 .