Elementor is a great front end page builder that allows you to build beautiful custom templates in an instant. WooCommerce Elementor Pro brings the front end customization of Elementor to your WooCommerce Archive and Checkout pages!
Install Necessary Plugins
1. Download and install the Elementor plugin from here.
Download Kadence WooCommerce Elementor free here.
And after purchasing, download WooCommerce Elementor Pro from here.
For the pro plugin to work properly, you must have both free and pro installed and active on your site.
If you’re not familiar with Elementor plugin, this tutorial will introduce you and help get you started.
Build an Archive Template
1. After the plugins are installed and activated, navigate to Elementor >> Settings, and enable WooCommerce pages:
2. Navigate to Products >> Woo Templates and create a new template:
Select product Archive Template
Name your template:
3. Configure the widgets of your archive page. Add WooCommerce specific widgets in under “WooCommerce” in the sidebar:
4. Once you’re happy with your page layout, navigate to WooCommerce >> Template Builder to assign your template:
5. Once the template is assigned and saved, navigate to the page to view your template:
Assign to a Specific Category:
If you built your template for a specific category, with WooCommerce Elementor you can assign it to that category. First, head to Products >> Categories:
Then, select the category that you build the template for:
Then, find Product Archive Template to assign the template to your category:
Build a Checkout Page Template
1. Just as with an archive, be sure that you’ve enabled the checkout in Elementor >> Settings.
2. Return to Products >> Woo Templates and create your custom checkout template:
3. Build your template:
4. Go to WooCommerce >> Template Builder and assign your new template to your checkout page:
5. Save the settings and view your new checkout page to assure you’re happy with it: