How to Edit WooCommerce Checkout Page in Elementor?

Updated on January 22, 2024 by Ananda
Table Of Content

Are you looking to edit the WooCommerce checkout page in Elementor to match your brand and style? However, customizing the default WooCommerce checkout page will require coding knowledge.

But with the Woo Checkout widget from The Plus Addons for Elementor you can easily customize the WooCommerce checkout page without any coding.

To check the complete feature overview documentation of The Plus Addons for Elementor Woo Builder, click here.

Required Setup

How to Activate the Woo Checkout Widget?

Go to 

  • The Plus Settings Plus widgets 
  • Search the widget name and turn on the toggle then click Save. 
Woo checkout activate

Add Woo Checkout

To edit the checkout page, open the checkout page with Elementor and add the Woo Checkout widget.

Note: Make sure all the default WooCommerec pages are created.

From the Style dropdown, under the Layout tab, you can select from two predefined styles.

Woo checkout

Then, from the Extra Options tab, you can add icons to each heading of the checkout form by adding the Font Awesome icon Unicode.

From the Style tab, you can customize the form style further.

Now, you’ll see a beautiful checkout form.

Woo checkout demo
Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website