How to Customize WooCommerce Shop Page with Elementor theme builder

What You Need Before You Start

Before diving in, make sure you have the right tools installed and active on your WordPress website. Trying to do this with the free version of Elementor will not work for this particular task.

Here is what you need:

• WordPress installed and running
• WooCommerce plugin installed and activated with at least one product added
• Elementor Pro plugin installed and activated (the free version does not include Theme Builder or WooCommerce widgets)

A quick note on the WooCommerce requirement: if you do not have any products in your store yet, add at least one before you start building your template. Otherwise you will be designing in the dark without any real product data to preview your work against.

What is the Elementor Theme Builder and Why Use It for WooCommerce?

The Elementor Theme Builder is a feature exclusive to Elementor Pro that lets you design custom templates for every part of your website — headers, footers, single posts, archive pages, and yes, WooCommerce pages.

When WooCommerce is installed alongside Elementor Pro, you unlock the ability to create fully custom templates for both Single Product pages and the Product Archive, which is the technical name for your shop page.

The reason you cannot just open the shop page and edit it normally is simple: the WooCommerce shop page is automatically generated by the plugin. It is not a standard WordPress page with editable content. Theme Builder solves this by letting you create a replacement template that overrides the default layout completely.

With Elementor Theme Builder you can:

• Design a pixel-perfect shop page layout from scratch or from a pre-built block
• Use WooCommerce-specific widgets like Archive Products, Archive Title, and Archive Description
• Adjust columns, rows, pagination, and sorting options visually
• Apply display conditions so the template only shows on the pages you choose
• Make changes any time without touching code

How to Create a WooCommerce Shop Page Template in Elementor Theme Builder

Here is the step-by-step process I use every time I build a custom shop page for a client. Follow these in order and you will have a working template by the end.

Step 1: Install and Activate Elementor Pro

If you have not already, purchase Elementor Pro from the Elementor website, download the plugin zip file, and install it via Plugins > Add New > Upload Plugin in your WordPress dashboard. Once activated, make sure both WooCommerce and Elementor Pro are showing as active under your Plugins list before continuing.

Step 2: Open the Elementor Theme Builder

In your WordPress dashboard, hover over Templates in the left-hand menu and click on Theme Builder. This opens the Theme Builder panel where you will see tabs for different template types such as Header, Footer, Single, Archive, and the WooCommerce-specific options.

Step 3: Create a New Product Archive Template

Inside Theme Builder, look for the Product Archive section. Click the Add New button (or the blue plus-sign icon next to Product Archive). A dialog box will appear asking you to choose a template type — select Product Archive from the dropdown menu. Give your template a descriptive name like Shop Page Template, then click Create Template.

Elementor will now load the visual editor with a template library popup giving you the option to start from a pre-built Product Archive block or design your own from scratch.

Step 4: Choose a Starting Layout or Build From Scratch

You have two options here.

1. Use a pre-built block — Click the folder icon or the Blocks tab in the template library, filter by WooCommerce, and choose a Product Archive block that suits your style. Click Insert and the block will be added to your canvas ready to edit.

1. Build from scratch — Close the library popup and start adding sections and widgets manually using the Elementor drag-and-drop panel on the left.

For most clients I work with, I recommend starting from a pre-built block and then modifying it to match their branding. It saves a lot of time.

Step 5: Add and Configure the Archive Products Widget

The Archive Products widget is the core of your shop page template. It is what pulls in and displays your product grid. Search for Archive Products in the Elementor widget panel and drag it into your template section.

Once it is placed, use the widget settings panel on the left to configure:

• Columns — choose how many product columns to show (3 or 4 is typical for desktop)
• Rows — set how many rows of products appear per page
• Pagination — toggle this on so shoppers can browse to the next page of products
• Allow Order — show a sort-by dropdown so customers can sort by price, popularity, or rating
• Results Count — display the number of results found

For the Query section inside the widget settings, set the Source to Current Query so that the widget always displays the correct products for whatever archive page the visitor is viewing — whether that is the main shop, a product category, or a search result.

Step 6: Add Supporting Widgets

A great shop page is more than just a product grid. Consider adding the following widgets above or around your Archive Products widget:

• Archive Title — displays the dynamic page title (for example, Shop or the current category name)
• Archive Description — shows a description for the current product category if one has been set
• Menu Cart — adds a cart icon that opens a mini cart overlay, great for placing in the header area of your template

You can also add a hero banner, a promotional heading, or a featured products row above the main product grid to highlight sales or new arrivals.

Key Elementor WooCommerce Widgets for Your Shop Page

Elementor Pro gives you a full set of WooCommerce-specific widgets when WooCommerce is active. Here are the most useful ones for building your shop page:

• Archive Products — the main product grid widget that respects the current query context
• Archive Title — dynamically pulls in the title of the current archive page
• Archive Description — outputs the category description if set
• Products — lets you manually query and display specific products, categories, sale items, or featured items, useful for promotional sections
• Product Categories — displays your product category tiles in a visual grid
• Menu Cart — adds a floating cart icon anywhere on the page
• Custom Add to Cart — a button widget that lets you add a product directly to the cart from the archive view

Mix and match these widgets to build a shop page that actually works for your customers, not just one that looks good in a screenshot.

How to Set Display Conditions and Publish Your Shop Page Template

This step is critical and something I see people skip or get wrong all the time. Display conditions tell Elementor where this template should appear on your site. Without setting them correctly, your new design will never show up.

Here is what to do:

1. When you are happy with your design, click the Publish button in the Elementor editor bottom bar
2. A dialog box will appear asking you to set your display conditions — click Add Condition
3. From the dropdown, select Shop to apply the template only to the main WooCommerce shop page, or select All Product Archive if you want it to apply across the shop page, category pages, and tag archives
4. Click Save and Close

If you want the template to apply to specific product categories only, you can select Product Archive and then filter by a specific category. This is very useful for clients who want different layouts for different product ranges.

Once published, visit your shop page on the front end and you should see your new Elementor-designed layout live and working.

Tips for Styling Your WooCommerce Shop Page in Elementor

Getting the template structure right is just step one. Here are some practical styling tips that make a real difference based on what I have learned building shop pages for small businesses:

• Match your brand colors — Use the Style tab on each widget to update background colors, button colors, and typography to align with your brand identity. Consistent branding builds customer trust.

• Hover effects — Add hover styles to product cards so that when a shopper mouses over a product, the image zooms slightly or a button appears. This makes the shop feel interactive and professional.

• Spacing and padding — Give your product cards breathing room. Too many products crammed together looks cluttered. I usually set at least 20px of padding around product cards.

• Mobile responsiveness — Always preview your design in Elementor’s mobile and tablet views before publishing. A three-column grid that looks great on desktop can become unreadable on a phone if you do not adjust it.

• Product image consistency — Make sure all your product photos are the same dimensions before uploading them. Inconsistent image sizes make the grid look messy no matter how well-designed the template is.

• Keep it fast — Avoid loading too many widgets on the shop page. My philosophy has always been: build fast, clean, and simple. A lighter shop page loads faster, and faster pages rank better and convert better.

Frequently Asked Questions

Do I need Elementor Pro to customize the WooCommerce shop page?

Yes, you do need Elementor Pro to properly customize the WooCommerce shop page using Theme Builder. The free version of Elementor does not include the Theme Builder feature or the WooCommerce-specific widgets like Archive Products. As a workaround, free Elementor users can create a new page and insert WooCommerce shortcodes using the Shortcode widget, but this gives you far less design control.

What is a Product Archive template in Elementor?

A Product Archive template is a custom Elementor Theme Builder template that replaces the default WooCommerce shop page layout. It uses the Archive Products widget to dynamically display your products according to the current query, whether that is the main shop, a product category, or a search result. You build it once and apply it across multiple pages using display conditions.

What display condition should I set for the WooCommerce shop page?

If you want the custom template to appear only on your main WooCommerce shop page, set the display condition to Shop. If you want it to also apply to product category pages and tag archives, select All Product Archive. You can also create separate templates for individual categories by selecting Product Archive and filtering by a specific category.

Can I use the Archive Products widget to show only products from a specific category?

The Archive Products widget is designed to respect the current query context, meaning it automatically shows the correct products for whatever archive page a visitor is on. If you want to create a manually curated product section with products from a specific category, use the Products widget instead and set the query to filter by category.

Why are my products not showing in the Elementor editor preview?

If products are not showing in the editor preview, make sure your WooCommerce products are published and not set to Draft status. Also confirm that WooCommerce is installed and active. If you just installed WooCommerce and have not added any products yet, add at least one published product before building your template.

Can I have a different shop page layout for different product categories?

Yes. In Elementor Theme Builder you can create multiple Product Archive templates and assign each one to a different product category using display conditions. For example, you could have one layout for your clothing category and a different layout for your accessories category. Simply create separate templates and set a specific category condition for each one.

Will my custom shop page template break when WooCommerce updates?

Generally no. Elementor Theme Builder templates override the default WooCommerce templates at the display layer, meaning WooCommerce plugin updates typically do not erase or break them. However, it is always good practice to test your shop page after any major plugin update just to confirm everything still looks correct.

Final Thoughts

And that is everything you need to know to customize your WooCommerce shop page using Elementor Theme Builder. It is one of those tasks that looks complicated from the outside but once you understand the Product Archive template concept and how display conditions work, the whole process is very straightforward. If you are a visual learner and want to see every single step done in real time, I have put together a full video tutorial that walks through the entire process from opening Theme Builder to publishing the finished design — make sure you scroll up and watch it. If you run into any trouble or have a question about your specific setup, drop it in the comments below and I will do my best to help. And if you would rather have someone set this up for you so you can focus on running your business, feel free to get in touch — this is exactly the kind of work I do for small business clients every day.