How to Edit the WooCommerce Shop Page With Elementor [Step by Step]

    1024 536 Surej Shams

    How-to-Edit-WooCommerce-Shop-Page-With-Elementor

    Customizing the shop page of a WooCommerce website is still a challenge for many. A lot of WordPress users claim it is a pain when you build the whole website to be great looking and you cannot easily edit the shop page. 

    However, if you use a page builder plugin like Elementor, it isn’t really hard to customize the shop page the way you want it. It only requires editing a few Elementor templates and customizing some of its elements. And importantly, you don’t have to touch a single line of code. 

    Now let’s go ahead and find out how we can do this step by step.

    Step 1: Make sure you have the right set up: Elementor Pro & WooCommerce

    I’m assuming you have built the whole website on Elementor and you already have it installed and activated on your website. You will also require the Elementor Pro version to customize your WooCommerce shop page easily. 

    Step 2: Go to ‘templates’ in Elementor

    To customize the shop page you will first need to click on the ‘templates’ option under Elementor and then click on ‘theme builder’. You can see this on the WordPress dashboard on the left-side column. (see below image)

    find-theme-builder-inside-templates

    Step 3: Find the ‘Product Archive’ tab

    Once you are within the ‘theme builder’ area, you can go ahead and click on ‘product archive’ as the next step. (see below image)

    Choose-product-archive-template-1

    Step 4: Create a new product archive template

    Inside the ‘products archive’ tab, click on the ‘add new’ option at the top to create a new product archive template. (see below image)

    Add-new-product-archive-template-1

    Once you click on the ‘add new’ option, a pop-up will appear where you will have the option to choose the template type and assign it a name. By default, you should be getting ‘product archive’ in the drop-down field to choose the template type. If not, make sure you choose the ‘product archive’ template type. (see below image)

    Naming the template is optional, but it would be good if you can assign a name. Once these steps are completed, you can go ahead and click on the ‘create template’ button. 

    Choose-template-type

    Once you click on the ‘create template’ button, you will be taken to a screen where you can choose any one of the pre-built Elementor templates for product archive pages. You can either use these templates directly on your shop page or customize them the way you want. All you have to do here is just choose one template and ‘insert’ it on to the page. 

    Product-archive-template-choices

    After inserting one of the pre-built templates, you will be taken to a screen where you can edit and customize the Elementor template. I’m assuming you are already familiar with Elementor page builder and its customization. So just make all the changes you need on the template and build a cool looking shop page. 

    Edit-product-archive-template

     

    How to add a sidebar to the WooCommerce shop page using Elementor?

    One important point worth mentioning here is the sidebars. Many users would want to add a sidebar to the template to showcase product categories or filters. All you have to do here is to add a sidebar element from Elementor to a new column on the template. Then you can add any of the product categories or filters to the sidebar widgets. (Please note the sidebar element will be available only on the Pro version of Elementor.)

    Step 5: Publish the template on to your shop page 

    Once all the changes are made to the template, you can go ahead and publish it. When you click on the ‘publish’ button, Elementor would ask you to choose the page on which you want to apply this template. 

    Here, just click on ‘add condition’, and from the next screen choose ‘include’ and then ‘shop page’. Now you have assigned this template to the WooCommerce shop page. As the next step, you can click on the ‘save & close’ button below and you’re done. 

    Where-to-display-the-template

    Assign-template-to-shop-page

    Conclusion

    Now you can see a beautiful shop page on the front end just like you customized it on the template. All the products that you add to your WooCommerce store will get updated on this shop page. You can always go back to your templates under Elementor and find this template under ‘product archives’ to make any future changes. 

    If you are building an e-commerce website using WooCommerce and Elementor Pro, this is the easiest way to get your shop page customized. 

    Hope this helps. 

    Author

    Surej Shams

    I regularly write and publish content on Blogging, Digital Marketing and WordPress. I also run a Digital Marketing Agency called WellConvert where I help my clients with High Converting Websites, SEO and Facebook Advertising.

    All stories by: Surej Shams

    Leave a Reply

    Your email address will not be published.

    This site uses Akismet to reduce spam. Learn how your comment data is processed.