Recommended Free Tools
To use Elementor with WooCommerce, install and activate WooCommerce first, then use Elementor Pro’s Theme Builder to create a Single Product template and a Product Archive template. The first controls individual product pages; the second controls the Shop page, product categories, product tags, and product-search results. Both templates pull product information dynamically, so one design can serve your entire catalog.
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
You need WooCommerce 3.4 or later and an active Elementor Pro license for the native Theme Builder workflow. The free Elementor plugin does not include the WooCommerce template tools described here. If you need dedicated Cart, Checkout, My Account, or Thank You templates, a third-party WooCommerce extension such as ShopLentor provides those template types through its own workflow.
As an Amazon Associate I earn from qualifying purchases.
What Elementor changes in a WooCommerce store
WooCommerce supplies the store data and commerce functions: products, prices, images, stock status, cart contents, and checkout processing. Elementor controls the visual layout around that data. Instead of editing each product page separately, you design a template with WooCommerce-aware widgets. The template then reads the product currently being viewed and fills the layout with that product’s information.
This separation is the key to an efficient store. A Single Product template can contain an image area, title, price, description, purchase controls, and related information once. Every product that uses the template receives the same structure while displaying its own data. An archive template works similarly for lists of products rather than one product at a time.
#1 Best Overall
What the native Elementor route covers
- Single Product: the layout for an individual product page.
- Product Archive: the main Shop page plus product-category pages, product-tag pages, and product-search results.
Native Elementor Pro coverage of Cart and Checkout templates was not established in the available documentation. Do not assume that creating a Single Product or Product Archive template also gives you native Elementor templates for those transaction screens.
Requirements before you start
Install WooCommerce first
WooCommerce must be installed and active before WooCommerce products and Elementor’s WooCommerce widgets can work. Activate the plugin, complete the basic store setup, and confirm that at least one product exists for testing. Also verify that the site is running WooCommerce 3.4 or later, the minimum version identified for this Theme Builder workflow.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Use Elementor Pro for Theme Builder templates
The WooCommerce templates described in this guide live in Elementor’s Theme Builder, which is an Elementor Pro feature. The free Elementor plugin does not include this Theme Builder functionality. Make sure the Pro plugin is installed, activated, and connected according to your site’s normal Elementor setup before looking for the template menus.
Prepare representative products
Before designing, create or identify products that exercise the fields your layout needs. A useful test catalog includes a product with a main image, gallery images, a price, a long description, and an item that can be added to the cart. If your catalog contains products with missing images or optional descriptions, include one of those as a visual check. A template that looks good only with perfect product data can break when a real item lacks a field.
How the template system works
Elementor’s Theme Builder stores reusable site templates rather than replacing every WooCommerce page individually. The Single Product template receives the product context from the page being viewed. The Product Archive template receives the archive context: Shop, category, tag, or search results. This is why you can change one template and update many URLs at once.
Dynamic data versus fixed text
Use WooCommerce widgets for information that should change from product to product. Product title, price, images, description, and purchase controls should come from the current product record, not from text typed into a static heading. Static elements are still useful for labels, instructions, trust messages, or section headings, but they should not be used to duplicate values that WooCommerce already stores.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsOne template, many products
A Single Product template is designed to be reused. When a visitor opens another product, the same layout requests that product’s data. This avoids maintaining dozens of separate Elementor designs and keeps spacing, typography, and purchase controls consistent across the catalog.
Step 1: Create a Single Product template
- In the WordPress dashboard, open Templates > Theme Builder.
- Choose Single Product. If no Single Product template exists, choose the option to create one.
- Start with a blank layout or an available design supplied in your Elementor installation. The exact button labels can change between Elementor versions, so confirm the wording in the current dashboard.
- Open the Elementor editor and arrange the page structure you want for an individual product.
The important choice in this step is the template type. A Single Product template is not the same as a Product Archive template: the former expects one product, while the latter expects a collection of products.
Step 2: Build the product layout with WooCommerce widgets
Use WooCommerce-specific widgets for the product information that must be populated dynamically. The 2026 Elementor guide specifically identifies the Product Images widget for the main product image and its thumbnails. Add the other WooCommerce widgets needed for the product information you want visitors to see, then arrange them into a readable hierarchy.
Product media
Place Product Images in the primary media area. Check both the main image and thumbnail behavior, because products with galleries need a clear way to move between images. Give the media column enough width for the largest images in your catalog and test products with different aspect ratios.
Product identity and buying information
Keep the product title and price near the top of the content area so a visitor can identify the item and its cost without searching. The purchase controls should be visually distinct from descriptive content. Product data comes from WooCommerce, so the same design can display each item’s own title and price without editing the template for every product.
Descriptions and supporting details
Use dynamic product content for the main description and any other product information your chosen widgets expose. Keep long copy readable with sensible line length and spacing. If a field is optional in your catalog, preview a product that lacks it and make sure the surrounding layout does not leave an awkward gap or hide an important control.
Responsive and accessibility checks
Preview the template at the viewport sizes available in your Elementor editor. A two-column desktop layout may need to stack on narrow screens so product images, title, price, and add-to-cart controls remain usable. Check keyboard focus order, text contrast, readable font sizes, and whether image thumbnails have meaningful alternative text supplied by the product media settings.
Step 3: Save and verify the Single Product template
- Save or publish the template using the controls in the Elementor editor.
- Open a real product page in a separate browser tab.
- Confirm that the product title, price, image, gallery, description, and purchase controls show the data belonging to that product.
- Open a second product with different content and verify that the same layout changes to that product’s data.
- Test a product with missing optional information and check that the layout remains coherent.
If the editor preview shows placeholders while a live product page is blank, first confirm that WooCommerce is active and that you are viewing a product context. A template cannot populate WooCommerce fields when the store plugin is inactive or when no product is available to preview.
How to build the WooCommerce Shop and archive pages
The Shop page is only one part of WooCommerce’s archive system. Elementor’s Product Archive template covers the main Shop page, product-category archives, product-tag archives, and product-search results. Build this template when you want those listing pages to share a consistent design.
Create the Product Archive template
- In the WordPress dashboard, go to Elementor > Theme Builder.
- Open Product Archive in the left sidebar.
- Click Add New.
- Insert a pre-designed Product Archive block if one fits your needs, or build the archive layout from scratch.
- Save the template and preview it against the archive contexts available on your site.
The current dashboard may use slightly different labels from these instructions. The template type to look for is Product Archive, not Single Product.
Design the archive structure
Give the archive a clear heading area, a product-results area, and enough space for shoppers to scan product cards. Keep the product grid visually subordinate to the information that helps visitors understand where they are, such as a category or search-results heading. Use consistent card spacing so a mixture of short and long product titles does not make the grid feel uneven.
Test every archive context
Visit the main Shop page, at least one product category, a product tag, and a product-search results page. Because one Product Archive template serves all of these contexts, a heading or layout that works for Shop may need to accommodate longer category names or a search query. Check an archive with several results and another with very few results so empty space and pagination behavior do not undermine the design.
Test the cart connection from the product page
A product page is not complete when it merely looks correct. Add an item to the cart and test the header’s mini-cart or cart icon. One documented workflow specifically recommends checking the header cart icon this way and keeping its styling consistent with the rest of the site.
- Open a published product page using your Single Product template.
- Choose any required product options using the controls provided by your WooCommerce setup.
- Activate the add-to-cart control.
- Confirm that the item appears in the cart.
- Open the header mini-cart or cart icon and check the product name, quantity, and total shown there.
- Navigate to another page and confirm that the cart state remains available.
If the add-to-cart control is visible but the cart does not update, inspect the WooCommerce product configuration and site behavior before changing the visual template. Elementor is controlling the layout; WooCommerce still supplies the cart operation and product data.
Best Value
- Keep track of everything from attendance to test scores
- Spiral bound
- Measures 8-1/2" x 11"
Native Elementor Pro versus a WooCommerce add-on
Use native Elementor Pro when your main goal is a reusable Single Product and Product Archive design inside Elementor’s Theme Builder. Consider an add-on when you need a broader set of WooCommerce template types or want an alternative editor path.
| Capability | Elementor Pro Theme Builder | ShopLentor route |
|---|---|---|
| Individual product template | Single Product template | Product template type |
| Shop and catalog archives | Product Archive template covering Shop, category, tag, and search archives | Shop template type |
| Cart template | Not established in the available documentation | Cart template type |
| Checkout template | Not established in the available documentation | Checkout template type |
| Account and order-completion screens | Not established in the available documentation | My Account and Thank You template types |
| Editor options | Elementor editor through Theme Builder | Elementor or the Block Editor |
| Elementor Pro requirement | Yes, because Theme Builder is a Pro feature | Uses its own plugin route; the available evidence does not establish its licensing or whether every feature requires Pro |
ShopLentor is a separate WordPress plugin, not an extension of the native Theme Builder menu. Its documented template selector includes Shop, Product, Cart, Checkout, My Account, and Thank You. If you choose it, follow that plugin’s setup screens and confirm compatibility with your installed WooCommerce and Elementor versions.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Choosing the right workflow
Choose native Theme Builder when
- You already use Elementor Pro and need consistent Single Product and archive layouts.
- Your immediate design work concerns product pages and catalog archives.
- You prefer to keep those templates in Elementor’s own Theme Builder.
Evaluate an add-on when
- You need explicit Cart, Checkout, My Account, or Thank You template types.
- You want to edit WooCommerce templates with either Elementor or the Block Editor.
- You are comfortable adding another plugin and maintaining its version compatibility.
Do not select an approach based on an unverified price or license assumption. Elementor Pro pricing and tiers were not established here, and the available ShopLentor information does not establish its cost. Check the current product pages and your WordPress dashboard before budgeting or committing to a plan.
Troubleshooting common problems
WooCommerce widgets or products do not appear
- Confirm WooCommerce is installed and active.
- Check that the site uses WooCommerce 3.4 or later.
- Verify that Elementor Pro is active when you are trying to use Theme Builder.
- Make sure a product exists for the preview or live URL you are testing.
The Single Product template does not affect a product page
- Reopen Templates > Theme Builder > Single Product and confirm that the template was saved or published.
- Check that you created a Single Product template rather than a Product Archive template.
- Test a different product to distinguish a template issue from missing product data.
The Shop page still uses the old design
- Confirm that the template type is Product Archive.
- Open the main Shop page and a category archive separately; both should be tested because the archive template covers multiple contexts.
- Recheck the template’s saved state in Elementor > Theme Builder.
The archive looks correct on Shop but not in search results
Search results are one of the contexts covered by Product Archive. Test a real product search and adjust the layout so headings, result counts or messages supplied by your setup, and the product grid remain legible when the query produces a different number of items.
The cart icon does not reflect an added item
Repeat the add-to-cart test with a real product and inspect the cart itself. If WooCommerce does not register the item, the problem is not merely the header styling. If the cart contains the item but the header display is wrong, review the header’s cart element and its styling while keeping the commerce behavior supplied by WooCommerce.
Maintenance and version checks
Elementor menu names and widget names can change between versions. Treat the paths in this guide as the documented route, then compare them with the labels in your live dashboard before giving instructions to a team or recording a tutorial. Keep a note of which template is Single Product and which is Product Archive so future edits do not target the wrong page type.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
After updating WooCommerce, Elementor, Elementor Pro, or a WooCommerce add-on, retest one product page, the Shop page, a category, a tag, a search result, and the add-to-cart/header-cart sequence. Pay particular attention to dynamic fields and responsive spacing, since those are the parts most likely to reveal a template or widget compatibility change.
Quick Recap
Practical launch checklist
- WooCommerce is active and is version 3.4 or later.
- Elementor Pro is active for native Theme Builder templates.
- A Single Product template exists under Templates > Theme Builder > Single Product.
- The Product Images widget displays both the main image and thumbnails where expected.
- Product title, price, descriptions, and purchase controls are populated dynamically.
- The same Single Product layout works with at least two products and with a product missing optional data.
- A Product Archive template exists under Elementor > Theme Builder > Product Archive.
- The archive layout works on Shop, category, tag, and search-result pages.
- An item can be added to the cart, and the header mini-cart or cart icon reflects it.
- If an add-on is used, its template types and editor route have been tested independently of native Theme Builder templates.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
