Help Center

Elementor Pro Checkout Widget Not Working with JetWooBuilder

Elementor Pro Checkout Widget Not Working with JetWooBuilder

I’ve attached the Checkout template in the WooCommerce > Settings > JetWooBuilder section and displayed the Elementor Pro Checkout widget in the Elementor editor. On the front end, instead of the Checkout page, the 500 error or blank screen appears. Why does it happen, and how can I fix it?

Answer
Modified on: Wed, 24 Jan, 2024

Elementor CartCheckout, and My Account widgets summon the appropriate WooCommerce shortcodes.

If you’ve already had the WordPress page with the checkout shortcode, two shortcodes cause the error.

You can set the Checkout page in two ways.

Create a Page with the Checkout Widget

If you use the Elementor Pro Checkout widget, you don’t need to create the Checkout template. Move to Pages > Add New tab in the WordPress Dashboard, enter the title, and click on the “Edit with Elementor” button.

In the Elementor editor, drag-n-drop the Checkout widget.

elementor pro checkout widget

Customize and style the Checkout page according to your needs and press the “Update” button.

Also, proceed to WooCommerce > Settings > Advanced tab in the WordPress Dashboard and make sure that you’ve set the Checkout page there.

checkout page in the woocommerce advanced settings

Use the JetWooBuilder widgets

Firstly, navigate to Pages > Add New tab in the WordPress Dashboard. Enter the title and paste the [woocommerce_checkout] shortcode to the Paragraph field.

checkout page

Then, hit the “Publish” button.

Things to know

Do not click on the “Edit with Elementor” button, and there is no need to add any additional content to the Checkout Page since the content will be obtained from the Checkout Template.

If you’ve already started editing the page with Elementor, delete all widgets, update the page and click on the mega menu icon in the upper left corner.

elementor editor

Then, hit the “Exit to Dashboard” button.

navigate from-page in elementor editor

On the editing page, push the “Back to WordPress Editor” button and enter the shortcode.

back to wordpress editor

Secondly, proceed to WooCommerce > Settings > Advanced tab in the WordPress Dashboard and make sure that you’ve set the Checkout page there.

checkout page in the woocommerce advanced settings

Thirdly, go to Crocoblock > Woo Page Builder, press the “Create New Template” button, give it a title, and hit the “Edit with Elementor” button. If you already have the Checkout template, just click “Edit with Elementor” under the template.

Then, fill the template with the JetWooBuilder checkout widgets.

checkout-widgets

More information about the Checkout page creation you can learn from this tutorial.

Finally, proceed to WooCommerce > Settings > JetWooBuilder tab and set the Checkout Template there.

jetwoobuilder checkout template

Add a product to the cart and check the checkout page on the front end.

checkout page on the front end

That’s all. You now know how to set the Checkout page with the Elementor Pro Checkout widget and the JetWooBuilder widgets.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.