The default WooCommerce product page does what it says on the tin. Product image on the left, title and price stacked to the right, tabs running along the bottom. It is functional, but it gives you almost no control over how your products are actually presented to customers.
For store owners who want to properly shape the buying experience — adjusting layout, pulling focus towards the right elements, or presenting different product types in different ways — the default setup falls short quickly.
That is where Elementor Pro’s WooCommerce Builder comes in. Using the Theme Builder and a set of dedicated WooCommerce widgets, you can design your product pages exactly as you want them, without writing a single line of code. This guide walks you through the whole process from scratch.
What You Need Before You Start
Before you open the Theme Builder, make sure the following are in place.
You will need Elementor Pro at the Advanced Solo plan or above. Full WooCommerce Builder access is not included in the lower Essential tier, so it is worth checking your plan before you start. If you are unsure which plan covers what, our breakdown of Elementor Pro pricing covers the current options in detail.
You will also need WooCommerce installed and at least one product published, so you have something to preview your template against. A lightweight theme is strongly recommended — Hello Elementor is the go-to choice, as it adds virtually no styling of its own and lets Elementor take full control.
The free version of Elementor does not include the Theme Builder or any of the WooCommerce widgets. If you are not on a Pro plan, the steps in this guide will not be available to you.
Why the Default WooCommerce Product Page Is Not Enough
WooCommerce products are not standard WordPress pages. They are custom post types, which means their appearance is dictated by PHP template files baked into your theme — not by anything you can directly edit through the WordPress page editor.
The default layout gives you an image on the left, a product title, price, short description, and an Add to Cart button on the right, followed by product tabs running below. Your theme controls the styling, and meaningful structural changes typically require either editing PHP files or writing custom CSS.
Even with a block theme that supports the WordPress Site Editor, your options stay fairly basic. You can adjust colours, fonts, and some element positions, but anything beyond that requires code or additional plugins.
A classic theme leaves you with even less flexibility. If you want to rearrange the layout, move the Add to Cart button, add a trust badge row, or create a completely different structure for a specific product category, you are into template file territory very quickly.
Can you edit a WooCommerce product page without Elementor Pro? Technically, yes. The block editor and custom CSS give you some room to manoeuvre, and there are standalone plugins that add limited customisation options. In practice, though, the level of control you get with Elementor Pro’s Theme Builder is in a different league entirely.
How to Create a Single Product Template in Elementor Pro
Step 1 — Open the Theme Builder
In your WordPress admin, go to Templates, then Theme Builder. You will see a set of tabs along the top covering different parts of your site. Click the Single Product tab.
If you have not created a template here before, the tab will be empty. That is expected — WooCommerce does not automatically create an Elementor template for your products.
Step 2 — Create a New Template
Click Add New to start a new Single Product template. Elementor will open the template library, giving you a choice of pre-designed product page block layouts you can use as a starting point.
If you would rather work from scratch, click the X in the corner to dismiss the library and open a blank canvas. Give your template a clear name — something like “Default Product Page” or “Sale Products Layout” — so it is easy to identify when you have multiple templates running.
Step 3 — Build Your Layout with WooCommerce Widgets
This is where the real work happens. On the left-hand panel, you will find a dedicated WooCommerce section in the widget library. These are the widgets you will use to build out your product page, and each one pulls in live data from your products automatically.
The core widgets you will want for most product pages are:
Product Images pulls in the main product gallery with zoom and lightbox functionality built in. Product Title displays the product name, styled however you like. Product Price shows the current price, including sale price formatting if applicable. Add to Cart renders the quantity selector and button together. Short Description pulls in the brief product summary from the WooCommerce product editor. Product Meta displays SKU, category, and tag information. Product Tabs renders the Description, Reviews, and Additional Information tabs. Upsells and Related Products show linked products below the main content.
A layout that works well for most stores is a two-column section in the upper half — product images on the left, title, price, short description, and Add to Cart on the right — with Product Tabs and Upsells running in a full-width section below. This mirrors the familiar structure that customers expect, while giving you complete control over styling and proportions.
You might also find this helpful
Step 4 — Style Your Template
With your widgets placed, you can style everything through the left-hand panel as you would any Elementor page. Adjust typography, colours, spacing, borders, and hover states for each element individually.
One thing worth doing before you start styling is to set up your global colours and fonts in Elementor’s Site Settings. This keeps your product pages consistent with the rest of your site and means you only need to update a colour in one place if your branding ever changes. Our post on Elementor Pro hacks covers how to get the most out of global settings if you want a deeper look at that.
Step 5 — Set Display Conditions
Display conditions are the step that most people rush through, but they are genuinely one of the most powerful things Elementor Pro offers for WooCommerce stores.
When you click Publish on your template, Elementor asks you where this template should apply. Your options include: all products across the entire store, all products within a specific category, products with a specific tag, or a single individual product.
This means you can create multiple product page templates and have them applied automatically depending on what the product is. A clothing store might use a clean, image-heavy layout for all standard products, then a second template for items in the “Sale” category with a more prominent price and urgency-focused layout. A technical products store might use a spec-focused template for items tagged “technical” with more room given to the Product Tabs section.
What are display conditions in Elementor Pro? Display conditions are rules you set on a Theme Builder template that tell Elementor where the template should be used across your site. They can be based on post type, taxonomy, individual posts or pages, and more. For WooCommerce, they let you assign different product page designs to different categories, tags, or specific products without any manual intervention after setup.
Individual product overrides are also useful for hero products or featured launches where you want a bespoke layout that does not apply anywhere else.
Step 6 — Publish and Preview
Once your display conditions are set, click Save and Close to publish the template. Navigate to one of your live products to see it in action.
Check the page at desktop, tablet, and mobile widths using Elementor’s responsive controls before you finalise anything. The two-column layout that looks great on desktop can easily need adjusting at mobile sizes – typically you will want the columns to stack, with the product image above the title and Add to Cart.
Tips for Making Your Product Page Work Harder
A well-structured product page does more than just look tidy. A few practical points worth keeping in mind as you build:
Keep the Add to Cart button visible without scrolling on mobile. This is the most important action on the page, and burying it below the fold on smaller screens will cost you sales.
Use the Short Description widget rather than relying solely on Product Tabs. The Short Description sits in the main buying area next to the price, so it is read by far more visitors than the full description tab. Use it for a concise, benefit-led summary rather than leaving it blank.
Add a trust element row near the Add to Cart button. A small section with an icon and a line of text covering delivery timescales, a returns policy, or a secure checkout note adds reassurance at exactly the moment someone is deciding whether to buy. You do not need a plugin for this — a simple Elementor icon and text widget row does the job.
Use the product image widget’s built-in zoom and lightbox settings. These are easy to miss but matter a lot for products where detail is important. Both options are toggleable within the widget settings panel.
Display Conditions: The Feature Most People Skip
It is worth spending a little more time on display conditions because they are the thing that separates a basic Elementor WooCommerce setup from a genuinely considered one.
Most tutorials walk you through creating a single product template and applying it to all products. That works perfectly well for a small store with a consistent product range. But as stores grow, having one rigid layout for every product type starts to create friction.
A variable product with multiple colour and size options needs more space given to the variation selector. A simple digital download does not need a shipping information row. A product in a clearance sale might benefit from a more urgent, stripped-back layout that gets visitors to the Add to Cart button faster.
Elementor Pro’s display conditions let you set up each of these scenarios once, and then handle them automatically from that point forward. Create a template, assign it to the relevant category or tag, and every product that meets that condition gets the right layout without you having to touch individual product pages.
Can I use different templates for different WooCommerce products? Yes. You can create multiple Single Product templates in Elementor Pro and assign each one to different categories, tags, or individual products using display conditions. Elementor applies the most specific condition first, so an individual product override will take priority over a category-level template.
Will my custom template break when WooCommerce updates? No. Because your templates live in Elementor rather than in your theme’s PHP files, they are not affected by WooCommerce or theme updates in the same way that custom template file edits would be.
You might also find this helpful
A product page that is well thought through makes the buying process feel easier. Good layout, clear information hierarchy, and the right trust signals at the right moment all reduce the hesitation that stops visitors from completing a purchase. Elementor Pro gives you the tools to get all of that right without relying on a developer every time you want to make a change.
If you would rather have someone handle the build for you, or if you are looking at a wider web design project that includes your WooCommerce store, the team at Suki Marketing works with businesses across the UK on exactly this kind of work. You can also browse our SEO services if you want to make sure the traffic reaching those product pages is working as hard as the pages themselves.
Get in touch here if you would like to talk through what you need.
