• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPCity.com

WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Menu
  • Blogging
    • Blogging Reviews

      You’re looking for one of the best blogging courses right now. You simply want your business to grow without making critical errors. This is a great time to start or grow a blog.

    • How To

      • Start A WordPress Blog
      • Monetize a WordPress Blog
      • Best Blogging Courses
      • Blog Setup Services
      • Blogging Tools
      • Best WordPress Blogs
  • Web Hosting
    • Web Hosting Review

      Which is the best host for small business owners, and which should you avoid? Read our reviews to find out and see what customers have to say.

       

      Host vs Host

      • SiteGround vs Bluehost
      • SiteGround vs A2Hosting
      • SiteGround vs WP Engine
      • SiteGround vs DreamHost
      • Bluehost vs HostGator
      • DreamHost vs Bluehost
      • HostGator vs GoDaddy
    • Best Hosting

      • Best Web Hosting Providers
      • Best WordPress Hosting
      • Best Web Hosting for Beginners
      • Best Web Hosting for Blogs
      • Best Hosting for Small Business
      • Best Hosting for Food Blogs
      • Best Hosting for Photographers
      • Best Hosting for Travel Blogs
      • Best Hosting for WooCommerce
      • Best Cheap Hosting for Bloggers
      • Best PHP Hosting Providers
      • Best Magento Hosting Providers
    • Others

      • Hostwinds
      • InMotion

       

      WordPress Hosting

      • WPX Hosting
      • SiteGround
      • Bluehost
  • Themes
    • WordPress Themes Review

      Discover the best WordPress themes to choose from for your business and how to pick them wisely. Making your website look the way you want is a robust process. Choose a suitable theme, and the process becomes far easier.

    • Best Themes

      • Best WordPress LMS Themes
      • Best LearnDash Themes
      • Best Multipurpose WooCommerce Themes
      • Best WooCommerce Fashion Themes
      • WordPress Small Business Themes
      • Education WordPress Themes
      • eCommerce WordPress Themes
      • Genesis Child Themes
      • Free Genesis Child Themes
    • VS

      • Genesis Theme vs Astra
      • Genesis Theme vs GeneratePress
  • Plugins
    • Top Plugins

      • Best WordPress Page Builder
      • Best WooCommerce Plugins
    • WooCommerce Plugins

      • Best WooCommerce Plugins
      • Best WooCommerce Coupon Plugin
      • Best WooCommerce Subscription Plugin
      • Best WooCommerce Review Plugin
      • Best WooCommerce Multi Vendor Plugin
    • Others

      • WooCommerce
      • Elementor
      • Genesis Plugins
      • LMS
      • Membership
      • Page Builder
      • WordPress CRM
  • Deals
  • More
    • Reviews

      • HappyForms Review
      • Paid Memberships Pro Review
      • Paid Member Subscriptions Review
      • S2Member Pro Review
      • Wishlist Member Review
      • MemberMouse Review
    • CRM Software

      • Zero BS CRM Review
      • Hubspot CRM Review
      • Agile CRM Review
      • Maximizer CRM Review
      • Zoho CRM Review
      • Capsule CRM Review
    • Guides

      • WordPress Statistics
      • Speed Up WordPress Site
      • Secure A WordPress Website
      • Recover Hacked WordPress Website
      • Install WordPress on Windows
      • Add Custom CSS to WordPress
      • Add Custom Fonts to WordPress
      • Install a WordPress Theme
  • Shop
  • SiteGround Discount
Home » How to Set Up Important WooCommerce Pages With Elementor 2022 (Shopping Cart, Checkout, Thank You Page)

July 4, 2020 by Editor Team Leave a Comment

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

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.

use elementor shortcode

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.

cart page advanced settings woocommerce

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:

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

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.

preview 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.

thank you

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.

select thank you page woocommerce

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 Get Started With Elementor
  • Elementor Pro Discount
  • Elementor vs Elementor Pro
  • How to Create a WooCommerce Single Product Page
  • How to Use the Elementor Free Page Builder
  • How to Use the Elementor Theme Builder
  • How to Add a Popup With Elementor
  • Create a Cookie Consent Popup Using Elementor
  • How to Create a Login Form Popup With Elementor
  • How to Create a Subscribe Form Popup With Elementor
  • How to Create a Related Popup Using Elementor
  • How to Create a 404 Web Page With Elementor

Filed Under: Elementor

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

elementor

wpengine

top wordpress blogs

  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recommended Articles

  • WordPress Statistics
  • Best WordPress Page Builder Plugins
  • Best WordPress Themes for Small Business
  • Best LearnDash Themes
  • Best Education WordPress Themes
  • Best WordPress LMS Themes: Excellent Ways to Manage Learning Content
  • Best WordPress Website Examples for Design Inspiration
  • Essential Addons for Elementor : Is It The Best Elementor Addons Plugin?
  • Genesis Framework Review: Is It Still Worth the Hype?
  • Best Genesis Child Themes
  • Best Genesis Framework Plugins
  • Best Blogging Courses That Will Help You Succeed
  • Best Blog Setup Services
  • Best Multipurpose WooCommerce Themes
  • Best WooCommerce Fashion Themes
  • Best eCommerce WordPress Themes for WooCommerce

Recommended Hosting

  • WP Engine – Managed WordPress Hosting
  • SiteGround – Powerful WordPress Hosting
  • WPX Hosting – Fastest WordPress Hosting

E-mail Newsletter

Footer

Browse Topics

  • Blogging
  • Coupons
  • Elementor
  • Genesis Framework
  • Guide
  • Gutenberg Blocks
  • Hosting
  • Interviews
  • Membership
  • News
  • Plugins
  • Reviews
  • Resources
  • Security
  • Software
  • Themes
  • Tutorials
  • Tips
  • Tech
  • WordPress LMS
  • WP Page Builder
  • WooCommerce

Get to Know Us

  • About
  • Contact
  • Privacy

Search

Copyright © 2023 · WPCity.com