How to Set Up Important WooCommerce Pages With Elementor 2021

We all love WooCommerce. It is easy to install and customize. It comes with features that make it simple to build and manage a dynamic and powerful e-commerce store.

But creating a successful e-commerce page goes beyond adding popular products. All the pages need to be appealing as well. The more attractive and user-friendly your website is, the more likely you are to attract more customers.

Although WooCommerce automatically creates the shopping cart and checkout page when building your site, Elementor makes them more appealing.

You can choose to either redesign them or rebuild them from scratch. And you can do the same with all other pages on your site.

You can steal your customers’ hearts with a warm Thank You page and retouch your My Account and Terms of Service pages.

Elementor’s drag and drop functionality, coupled with this tutorial, will give you a trouble-free time recreating your pages.

Here’s a quick index to help you navigate this article:

How to Set Up Important WooCommerce Pages With Elementor
Create a Shopping Cart Page
Create a Checkout Page
Create a Thank You Page
Conclusion

Let’s get started.

How to Set Up Important WooCommerce Pages With Elementor

After creating a single product page as well as a shop page, you should now create relevant WooCommerce pages, such as a shopping cart page, checkout page, thank you page, and more.

We will use the Elementor page builder for the sake of this tutorial, so before you get started, make sure that you have installed both the Elementor free and Elementor Pro page builder on your website.

If you need a guide to install Elementor, you can check out our step by guide on how to install a WordPress plugin.

If you are new to Elementor, you can get detailed information about Elementor from our website. We have shared many tutorials for beginners to advanced users. Read more Elementor tutorials on our website.

Let’s start creating the WooCommerce pages.

1. Create a Shopping Cart Page

A shopping cart page is a page that your customers see when they click on the ‘View Cart’ button to see their cart details.

When users visit your WooCommerce store to buy one or more products, they add products to their cart one by one, clicking on the ‘Add to cart’ button. When they are finished with adding products, they visit the shopping cart page.

From here, if they want, they can also update the cart page, add a new product by searching, remove a product from the cart page, increase product quantity, add a shipping method, and they can also apply any coupons, if applicable.

After finishing these processes, they proceed to checkout.

You can create your shopping cart page in two ways.

When you install the WooCommerce plugin, it will automatically create a shopping cart and checkout page along with your WooCommerce theme.

The first way to create a cart page is to redesign the pages again with Elementor. For that, you need to go to the WordPress dashboard. After that, visit Pages > Select the Cart Page > Edit with Elementor.

If you are new to Elementor, you can read our definitive guide to getting started with Elementor.

The second way is to design a cart page from scratch.

To do that, first, you need to create a page from the WordPress dashboard manually. Go to Pages > Add New > Give a name for your Cart page > Edit with Elementor.

After clicking on the ‘Edit with Elementor’ button, it will take you to the Elementor editor dashboard.

Now design your cart page to your liking. To add the cart page functionalities, you need to use an Elementor ‘Shortcode’ widget. Search for ‘Shortcode’ widget in the Elementor widget library.

Next, drag and drop the shortcode widget to the area where you want the cart form to appear.

Paste this code(with brackets):

Your cart is currently empty.

Return to shop

in the shortcode box on the left side.

After that, the cart details/form will appear on the right side.

display shopping cart page using elementor shortcode

After designing the rest of the page, don’t forget to publish the page by clicking the ‘Update’ button.

Now you need to define this page as your cart page under WooCommerce > Settings > Advanced.

After choosing a page, click on the ‘Save Changes’ button to save it.

Now visit your website to preview this page.

cart page preview using elementor shortcode

2. Create a Checkout Page

Your customers can visit the checkout page when they click on the ‘Proceed to Checkout’ button from the Shopping Cart page.

A checkout page helps customers to add their shipping and billing addresses, add a coupon code, and select the payment method.

After adding this information, in the next step, customers finally place their orders.

In the same we created a shopping cart page, you can also build a Checkout page.

You can follow either of the two ways we showed you when creating the shopping cart page. In brief, these the steps:

Create a new page or edit the default checkout page that was created by WooCommerce at the time of installation.
If you have created a new page, edit the page with Elementor as you want.
Drag and drop the ‘Shortcode’ widget and paste the code
on the left side of the Elementor editor.
Click the ‘Update’ button to publish the page.
Select your page name(Checkout) under WooCommerce > Settings > Advanced tab.
Save the changes.

However, if you want more advanced settings to edit the checkout page, you can purchase the Checkout Field Editor plugin.

Now have a look at our checkout page.

Using the same process, you can also create and customize your My account and Terms of service pages if you want.

3. Create a Thank You Page

When a customer places an order on the Checkout page, WooCommerce, by default, shows a thank you page with some order details.

Unfortunately, WooCommerce doesn’t allow you to customize this page in the same way we have shown you; you’ll need to use a plugin. WooCommerce has a paid plugin for this purpose.

If you need to customize this thank you page, you have to purchase the ‘Custom Thank You Pages’ extension plugin.

However, there are also some free plugins that you can use. For the sake of this tutorial, we will be using the WC Custom Thank You plugin.

Create a page and design it with Elementor for your custom thank you page.

After creating a page, install and activate the plugin(WC Custom Thank You).

After that, visit WooCommerce > Settings > Advanced. You will find a new option here to determine a page as your ‘Thank you’ page.

Simply select the page from here that you created. Your visitors will be automatically redirected to this after placing orders. Don’t forget to save changes after choosing a page.

That’s it. It’s your turn. Create your stunning Shopping cart, Checkout, and Thank you pages by following our tutorial.

Conclusion

It should be every online store owner’s goal to provide customers with an easy time shopping in the store. A pleasant experience builds loyalty and encourages customer referrals.

Your visitors should have a smooth time viewing what is in their cart. It should be easy for them to add coupons, payment details, and their shipping and billing address.

And getting a personalized and heart-warming thank you message will keep them coming back.

With our easy tutorial, you can create the pages you need for your site and customize them. And you do not need to have any technical knowledge to get it right.

If you experience a problem setting up your pages, reach out to us.

Read More Elementor Tutorials:

How to Set Up Important WooCommerce Pages With Elementor 2021 (Shopping Cart, Checkout, Thank You Page)