Build Shop Pages With WooCommerce Elementor Pro

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:
enable-woocommerce-elementor-kadence-themes

2. Navigate to Products >> Woo Templates and create a new template:

Select product Archive Template

add-template-elementor-woocommerce-kadence-themes

Name your template:

give-title-to-template

3. Configure the widgets of your archive page. Add WooCommerce specific widgets in under “WooCommerce” in the sidebar:
configure-elementor-widgets-kadence-themes-woocommerce

4. Once you’re happy with your page layout, navigate to WooCommerce >> Template Builder to assign your template:
WooCommerce Template Builder Admin

assign template elementor woocommerce

5. Once the template is assigned and saved, navigate to the page to view your template:

elementor woocommerce shop page kadence themes

 

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:

products categories

Then, select the category that you build the template for:

edit product category

Then, find Product Archive Template to assign the template to your category:

product archive template

 

Build a Checkout Page Template

 

1.  Just as with an archive, be sure that you’ve enabled the checkout in Elementor >> Settings.

enable-woocommerce-elementor-kadence-themes

2.  Return to Products >> Woo Templates and create your custom checkout template:

select checkout template builder

3.  Build your template:

custom checkout page with widgets

4.  Go to WooCommerce >> Template Builder and assign your new template to your checkout page:

assign checkout template kadence themes woocommerce elementor

5.  Save the settings and view your new checkout page to assure you’re happy with it:

checkout final elementor woocommerce