Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteiTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Antihost offers managed WordPress hosting with free migration, one-click staging and a 14-day free trial.
To use Elementor with WooCommerce, install and activate WooCommerce first, then use Elementor Pro’s Theme Builder to create a dynamic Single Product template and a Product Archive template. The product template supplies the layout while WooCommerce supplies each product’s title, images, price, stock and purchase controls. The archive template can control the Shop page, category and tag archives, and product-search results. Free Elementor does not include the WooCommerce Theme Builder templates.
What you need before building anything
Elementor only displays WooCommerce products and WooCommerce widgets when the store plugin is active and has products to draw from. Set up the foundation before opening the visual editor.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →
Install and activate WooCommerce
- In WordPress, open Plugins > Add New.
- Install WooCommerce and activate it.
- Confirm that the site is running WooCommerce 3.4 or later. The Theme Builder workflow described here requires that minimum version.
- Complete the basic WooCommerce setup, including a shop page and at least one product. A template can be designed without a finished catalog, but a real product is needed for meaningful previews and testing.
Use an Elementor edition with Theme Builder
WooCommerce Theme Builder templates are an Elementor Pro feature. The free Elementor plugin can still be used for ordinary page content, but it does not provide the native WooCommerce template area used for Single Product and Product Archive layouts. Activate Elementor Pro alongside the free plugin, then check that both plugins are active before looking for the template options.
Elementor Pro pricing, plan limits and licensing change over time; verify the current terms in your account rather than relying on an old price.
#1 Best Overall
Prepare representative products
Create or import products that represent the catalog you will actually sell. Include a product with a long title, a product with several gallery images, a product with a sale price if you use sales, and a product with the stock and shipping settings customers will see. Previewing only a perfectly short, fully stocked product can hide wrapping, missing-image and out-of-stock problems.
How Elementor and WooCommerce divide the work
WooCommerce remains the source of store data and commerce functions. Elementor controls the visual arrangement of that data. Instead of designing a separate page for every item, you create a template containing dynamic WooCommerce widgets. When a visitor opens a different product, the same layout requests that product’s information from WooCommerce.
Single Product template
A Single Product template controls the product-detail view: the images, title, price, description, purchase controls and other product information that appears on an individual product URL. One template can serve every product because its widgets read the current product dynamically.
Product Archive template
A Product Archive template controls collection views rather than one item. It covers the main Shop page, product-category archives, product-tag archives and product-search result pages. A single archive design therefore needs to work for a broad range of product names, image ratios and result counts.
Pages that need a separate decision
Do not assume that the native Elementor Pro templates cover every WooCommerce screen. The available evidence confirms Single Product and Product Archive templates, but does not establish a native Elementor Pro template workflow for Cart and Checkout. If you need to redesign those screens, check the current Elementor interface and your chosen extension instead of treating them as automatically available.
Build an Elementor WooCommerce product page
Use this workflow for the reusable product-detail layout.
- In the WordPress dashboard, go to
Templates > Theme Builder. - Select Single Product. If no template exists, choose the option to create one.
- Choose a blank layout or a suitable predesigned layout, then open it in Elementor.
- Place the WooCommerce widgets that should appear on the page. Start with the product image area, title, price, description and add-to-cart control. Add reviews, metadata or related content only when those elements support your store’s buying process.
- For the main image and thumbnail gallery, use the Product Images widget suggested in Elementor’s WooCommerce guidance. Check the widget with a product that has multiple gallery images as well as one with a single image.
- Use each widget’s dynamic product source rather than typing a particular product’s text into the template. Static text is appropriate for headings such as “Details” or delivery notes; product-specific values should come from WooCommerce.
- Save or publish the template. Elementor may present display-condition controls in the publish flow; the exact labels can vary by version, so confirm that the template is assigned to the intended product views.
- Preview several products, including different prices, image counts, descriptions and stock states, before making the template public.
Arrange the above-the-fold area
Put the primary image, product title, price and purchase control where they can be understood without excessive scrolling. Keep the title and price visually close to the purchase control so a customer does not have to hunt for the decision-making information. On narrow screens, verify that the image, quantity controls and button do not become wider than the viewport.
Handle long and short descriptions
Product descriptions are content from WooCommerce, so their length is unpredictable. Test a concise description and a long one. A layout that depends on a fixed-height text area can produce clipped copy or an awkward empty gap. Let the content expand naturally unless your design has a deliberate, tested truncation pattern.
Rank #2
Use image galleries as a real interaction
Check the main image, thumbnails, keyboard focus and touch behavior on a phone. A gallery that looks correct in the editor can fail when a product has no secondary images or when a thumbnail image uses a different aspect ratio. Verify that the selected thumbnail and main image remain visually associated.
Create the Elementor WooCommerce shop page and archives
The Shop page is an archive, so build it with Product Archive rather than a Single Product template.
- Open
Elementor > Theme Builderin the WordPress dashboard. - In the left sidebar, open Product Archive and click Add New.
- Insert a predesigned Product Archive block if one matches your structure, or choose a blank layout and build it yourself.
- Arrange the archive heading, product listing and any navigation or filtering elements available in your configuration.
- Save or publish the archive template, then confirm its assignment to the Shop and other product archive views shown by the current dashboard.
- Test the main Shop page, one product category, one product tag and a product-search result. The same template must remain readable when the number of results and the archive heading change.
Design for changing result counts
An archive can contain one result or many. Avoid a layout that assumes a particular number of columns will always fit. Check the widest product title, a missing or unusual image, and a page with no matching search results. If your store uses pagination or a load-more control, test the transition between result pages rather than only the first view.
Keep archive and product-page cues consistent
Use the same typography, color treatment and button language on the archive and Single Product templates. Customers should recognize that a product card, its detail page and its add-to-cart control belong to one store. Consistency does not require identical layouts: the archive can emphasize scanning, while the product page can emphasize evidence and purchase information.
Make the purchase path work with your design
A visually complete template is not finished until the commerce interaction works. Add a product to the cart and follow the path a real customer takes.
- Open a product using the new Single Product template.
- Choose any required options or quantity, then click the add-to-cart button.
- Open the header mini-cart or cart icon and confirm that the correct product, quantity and price appear.
- Change the quantity or remove the item, then verify that the displayed totals update as expected.
- Continue toward checkout far enough to confirm that the cart state is retained and that the next page loads.
One practical check is to keep the header cart icon’s styling consistent with the rest of the site and test it with an item actually in the cart. A mini-cart that looks attractive while empty can become unreadable when product names, quantities and totals are present.
Test desktop, tablet and mobile states
- Check the product image, title, price and add-to-cart control at each responsive breakpoint.
- Make sure buttons remain large enough to tap and that no widget creates horizontal scrolling.
- Open the menu and mini-cart on a narrow screen; overlays should not be hidden behind another section.
- Repeat the cart test after resizing the browser, because responsive CSS can change the header’s cart behavior.
Native Elementor versus a WooCommerce add-on
If the native template types meet your needs, Elementor Pro keeps the product and archive design in Elementor’s Theme Builder. A third-party WooCommerce extension can expose additional store templates and widgets. ShopLentor is one example documented for this workflow.
| Capability | Elementor Pro Theme Builder | ShopLentor route |
|---|---|---|
| Single product design | Single Product template | Product template type |
| Shop and archive design | Product Archive template covering Shop, category, tag and product-search views | Shop template type |
| Cart template | Not established here; verify the current Elementor dashboard | Cart template type is listed |
| Checkout template | Not established here; verify the current Elementor dashboard | Checkout template type is listed |
| Account template | Not established here | My Account template type is listed |
| Thank-you template | Not established here | Thank You template type is listed |
| Editor options | Elementor editor and WooCommerce widgets | Elementor or the Block Editor, with its own widget category |
| Elementor Pro requirement | Yes, for native Theme Builder WooCommerce templates | Uses its own plugin route; check the extension’s current compatibility and licensing |
| Cost and licensing | Not stated; check current Elementor terms | Not stated; check current ShopLentor terms |
Choose an add-on because you need its additional page types or widgets, not simply because it contains more controls. Every additional plugin becomes another compatibility point with WooCommerce, your theme and other extensions. Before switching, make a staging copy and confirm that existing products, cart contents and order flows still behave correctly.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Common problems and fixes
WooCommerce widgets or products are missing
Check that WooCommerce is activated and that Elementor Pro is active. Confirm the WooCommerce version is 3.4 or later, then reload the editor. If a product still does not appear, verify that the catalog contains a published product and that your preview is using that product.
The Theme Builder menu is not available
The native WooCommerce Theme Builder is a Pro feature. A free-only Elementor installation will not expose the same Single Product and Product Archive workflow. Activate a valid Pro installation or use a compatible third-party route that supplies the template functionality you need.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteThe template edits but the live page does not change
Review the template’s assignment or display conditions in the publish settings. A template can be saved successfully yet not be assigned to the view you are checking. Also clear any page, server or browser cache after changing a template, then test a product URL and an archive URL separately.
Every product shows the same title or image
Remove hard-coded product text and images from the reusable template. Use the WooCommerce dynamic widgets and preview the template with more than one product. If only one item is wrong, inspect that product’s catalog data rather than changing the global template.
The Shop page still uses the old layout
Make sure you created a Product Archive template, not a Single Product template, and that the archive assignment includes the Shop view. Test a category, tag and search-result URL as well; those views are also covered by the archive template but can expose a condition that the main Shop page does not.
The gallery looks broken on some products
Compare a product with one image against a product with several gallery images. Check the Product Images widget’s spacing and responsive settings, and confirm that the source products have valid featured and gallery images. Do not fix a missing catalog image by placing a static image in the reusable template.
Free tools Windows power users keep installed
One-click scans. No signup required.
The mini-cart is difficult to use
Add a real item to the cart while testing. Long product names, multiple quantities and changed totals reveal overflow and contrast issues that an empty mini-cart cannot show. Adjust the header’s spacing and typography, then retest at mobile width.
Cart or Checkout cannot be edited as expected
Do not assume that the native Elementor Pro workflow includes every WooCommerce page. Confirm what your current Elementor installation exposes. If you require dedicated Cart, Checkout, My Account or Thank You templates, evaluate an extension such as ShopLentor and test its output on a staging site before replacing a working store flow.
A practical launch checklist
- WooCommerce is active and meets the 3.4-or-later requirement.
- Elementor Pro is active when using native WooCommerce Theme Builder templates.
- A Single Product template is assigned and tested with several products.
- The Product Images widget works with one image and with a gallery.
- Product titles, prices, descriptions and purchase controls come from dynamic WooCommerce data.
- The Product Archive template is tested on Shop, category, tag and product-search views.
- Long titles, long descriptions, unusual image ratios, sale prices and stock states do not break the layout.
- The header mini-cart is tested with an item, changed quantity and removed item.
- Desktop, tablet and mobile layouts have been checked for overflow and tap targets.
- Cart and Checkout behavior has been verified rather than assumed from the product template.
- Any third-party extension has been tested with the active theme, WooCommerce and other store plugins.
How to choose the simplest setup
Use Elementor Pro’s native Theme Builder when you need reusable Single Product and Product Archive designs and are comfortable leaving unverified WooCommerce screens to their existing implementation. Use a third-party add-on when you specifically need additional template types such as Cart, Checkout, My Account or Thank You, or when its widget category solves a design requirement that native widgets do not. In either case, keep WooCommerce as the source of product and order data, build reusable dynamic templates, and validate the complete add-to-cart path with real products before publishing.
Quick Recap
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.
Recommended Free Tools
