Build your own product page layout in Elementor using individual, fully‑styleable building blocks — price, rating, stock, add‑to‑cart, gallery, description and more. Each widget shows the current product's data automatically.
Requires: WooCommerce active. Used inside a Single → Product Theme Builder template (or a product loop).
How they work
Drop these widgets into a product template, and each one pulls live data from whatever product is being viewed — no manual setup per product. Design the template once; it applies to every product.
The building blocks
| Widget | Shows |
|---|---|
| Product Price | Price, with sale price, currency, tax suffix and an optional discount badge. |
| Product Rating | Star rating, numeric score, and review count. |
| Product Stock | "In stock / Out of stock / On backorder" as text or a coloured badge. |
| Add to Cart | The full add‑to‑cart form — quantity, variations, and button. |
| Product Gallery | The product image gallery. |
| 360 Product View | A drag‑to‑spin 360° viewer — frames come from a dedicated product field, a manual upload, the WooCommerce gallery, or a built‑in demo spin. |
| Short Description | The product's short description, with an optional drop‑cap. |
| Product Meta | SKU, categories and tags. |
| Additional Information | The attributes table. |
| Product Reviews | The review list and review form on their own — separate from the Tabs widget. |
| Product Tabs | Description / Additional info / Reviews, combined into one tabbed panel. |
| Related Items | "You may also like" related-product blocks. |
| Product Up-Sells | The higher-value up-sell products configured on the product. |
Each widget has a full Style panel so it matches your design exactly.
Building a product page
- In Theme Builder, create a Single template and set its condition to All products (or a specific category).
- Lay out the page with the single‑product widgets above — e.g. Gallery on the left; Title, Price, Rating, Add to Cart on the right; Tabs below.
- Publish. Every product now uses your layout.
Highlights worth knowing
- Product Price can show a discount badge (e.g. "‑25%") on sale items, and style the sale and original prices separately.
- Product Rating uses self‑contained stars, so it always looks right regardless of theme.
- Product Stock supports a badge style and separate colours for in‑stock, out‑of‑stock and backorder.
- Add to Cart fully supports variable products — variation dropdowns (or swatches) and quantity all work.
- 360 Product View reads its own dedicated Product → 360° Spin Frames field so the rotation images stay separate from your regular photo gallery; it can also fall back to a manual upload, the product gallery, or a bundled demo spin while you’re setting things up.
Tips
- Pair these with Variation Swatches so the Add‑to‑Cart's options show as colour/label swatches.
- Reuse the same template for all products to keep your store consistent; create extra templates only for product types that need a different layout.
- Use Product Reviews on its own if you want a standalone reviews section instead of a tabbed layout.
- These widgets also work inside a product loop card (see Dynamic Loop).
Troubleshooting
A widget shows nothing. Single‑product widgets need a product context — use them inside a Single → Product template, or a product loop. On a normal page with no product, they render nothing (by design).
The rating/stock looks empty. That product simply has no reviews yet, or stock isn't being managed. Set those up in the product editor and the widgets update.
Prices don't match the product. All data comes from WooCommerce — confirm the product's prices, stock and attributes in the product editor.
The 360 viewer shows the demo spin. That's the built-in fallback. Set Spin Frames From to "Product 360° Field" and upload the real rotation photos on the product, or switch it to Manual Upload / the WooCommerce gallery.