The default WooCommerce single product page is functional but visually generic – a standard two-column layout with images on the left and product details on the right. Elementor Pro’s Theme Builder lets you design a completely custom product page template and apply it to all products, specific categories, or individual products.
Step 1: Create the Product Template
Go to Templates -> Theme Builder -> Single Product -> Add New. Name the template. The editor opens with a blank canvas. Unlike standard Elementor pages, the product template provides access to WooCommerce product widgets that pull dynamic data from the current product being viewed.
Step 2: Add WooCommerce Product Widgets
In the widget panel (search for “woo”), you will find dedicated product widgets:
- Product Images – gallery with thumbnails and lightbox
- Product Title – the product name as a dynamic heading
- Product Price – current price and sale price with original crossed out
- Product Rating – star rating display
- Product Short Description – the excerpt text
- Add to Cart – quantity selector and the Add to Cart button
- Product Meta – SKU, category, tags
- Product Description – the full product description tab content
- Product Related – related products grid
- Product Reviews – the reviews/comments tab
Build your layout by placing these widgets in sections and columns. A common custom layout: full-width product images on the left (50% column), all purchase-related widgets stacked in the right column (Title, Rating, Price, Short Description, Add to Cart, Meta).
Need help with your WordPress site? Describe your project and get a free estimate.
Step 3: Style Each Widget
Each WooCommerce widget has styling options in its Style tab. Key customisations:
- Product Title: set font size and weight to distinguish it as the page H1
- Product Price: set the regular price color, sale price color, and crossed-out original price styling separately
- Add to Cart button: this button is the most important CTA on the page – style it prominently with your brand’s CTA color
- Product Images: set thumbnail position (bottom or left side), configure lightbox behaviour
Step 4: Set Display Conditions
Click Publish and the display conditions dialog appears. Configure where this template applies:
- All Singular -> Product – applies to every product page on the site
- Product Category – applies only to products in specified categories
- In Product – applies to specific individual products by ID
For most stores, setting the condition to “All Products” is appropriate. If specific product types (e.g., digital downloads) need a different layout, create a second template with more specific conditions.
Adding Tabs for Description, Reviews, and Custom Content
The standard WooCommerce product page has tabs (Description, Additional Information, Reviews). In Elementor, add these using the Product Data Tabs widget, which outputs the standard WooCommerce tabs with their content. Alternatively, place individual widgets for each content type without tabs: Product Description widget below the purchase section, Product Reviews widget further down the page. The tabless approach is more readable on mobile where horizontal tabs require horizontal scrolling.
For stores where the review section matters for conversion, move it higher on the page template rather than below the fold. Placing customer reviews immediately after the Add to Cart area (not in a tab that requires clicking) increases their visibility and impact on purchase decisions.