Error message when using the WooCommerce block

Issue

Starting with version 8.3, WooCommerce uses WooCommerce blocks instead of the legacy shortcodes. These blocks  are incompatible with the Elementor Editor and can lead to the editor not loading. To avoid conflicts, users must delete these WooCommerce blocks before building their cart page in Elementor.  

Solutions

Delete the WooCommerce cart block 

Deleting the WooCommerce Cart block is the recommended solution for this compatibility issue.

To delete the cart:

1. Navigate to WP Admin, Pages>All pages.
   
   A list of all the site’s pages appears.
   
2. Hover over the Cart page and Click Edit. 
   The cart will open in the Gutenberg editor. The cart is actually a set of sub blocks so you can’t delete them individually. You will need to follow the following steps.
   
   Note

   When you open the Gutenberg editor, you should receive a warning message in the top left of your screen.
   
   
3. Click the margin area either to the right or left of the blocks.
   
   The Cart toolbar appears in the pane.
4. Click the ellipses in the toolbar. 
   
5. Select Delete from the dropdown menu.
   The Cart page is empty. 
   
6. Click Update in the upper right of the Gutenberg editor.
   
   Important

   Do not skip this step.
   
   
7. Click Edit with Elementor.

The Cart page opens in the Elementor Editor. You can now build your cart in the editor using the Elementor Cart widget. Find out more about building a web store with the Elementor Academy’s course, Building an online store with WooCommerce.

Your cart can now be edited with Elementor as normal.

Delete the Cart page

Deleting the Cart page is a more complicated solution and is therefore not recommended unless there is a specific reason.

To delete the Cart page:

1. Navigate to WP Admin, Pages>All pages.
   
   A list of all your site’s pages appears in the pane. 
   
2. Hover over the Cart page, and click Trash. 
   You no longer have a cart page so you’ll need to create one.
   
3. In WP Admin, click Add New Page.
   
4. Name the page Cart.
   
5. Click Edit with Elementor. 
   The Cart page opens in the Elementor Editor. You can now build your cart in the editor using the Elementor Cart widget. Find out more about building a web store with the Elementor Academy’s course, Building an online store with WooCommerce.
   
6. Click the Site Settings icon in the upper left of the Elementor Editor toolbar.
   
7. In the panel, click WooCommerce.
   
8. From the top of the panel, enter the page name in the Cart dropdown menu. 
   
9. Click Save Changes.

Your cart can now be edited with Elementor.