How to Edit Product Page in WooCommerce Elementor

The default WooCommerce product page layout works well enough as a starting point, but it limits what you can do visually. Editing it in Elementor gives you layout control that WooCommerce alone doesn’t provide.

Common reasons to customize your product pages:

• Rearrange the layout. Move the product image to the right, the description to the left, or put key specs above the fold , whatever suits your product best.
• Add or remove sections. Include a custom FAQ accordion, a feature highlights grid, or a video embed directly on the product page without relying on shortcodes.
• Match your branding. Default WooCommerce styling rarely matches a custom theme design. Elementor lets you control fonts, colors, button styles, and spacing to match the rest of your site.
• Improve conversions. A cleaner layout with a prominent buy button, social proof section, and visual product details can meaningfully improve add-to-cart rates compared to the generic WooCommerce default.

Before you start, make sure you have the following in place:

• Elementor Pro , the Theme Builder (required for this process) is a Pro-only feature. The free version of Elementor does not include it.
• WooCommerce installed and active on your WordPress site.
• At least one product created in WooCommerce, so you have something to preview your template against.

With those in place, follow the steps below to create your custom Single Product template.

Log into your WordPress admin panel at yoursite.com/wp-admin. From the left sidebar, look for the Templates section , this is where all Elementor-managed templates live, including the Single Product template you’ll create next. If you don’t see Templates in the sidebar, it means Elementor Pro is not active on this installation, and you’ll need to activate your Pro license before continuing.

In the WordPress sidebar, hover over Templates and click Theme Builder. This opens the Elementor Theme Builder , a separate editing environment from the page editor. The Theme Builder lists template types in the left panel: Header, Footer, Archive, Single Post, and Single Product. These templates control the layout of pages generated by WordPress and WooCommerce automatically, which is why they live here rather than in your regular pages list.

In the Theme Builder left panel, click Single Product. This shows any existing Single Product templates you’ve already created , if this is your first time, the list will be empty. Click Add New (or the “+” icon) to start a new template.

A dialog will appear asking you to name the template. Use something descriptive like “Main Product Template” or “Default Product Page” so you can identify it later. Click Create Template to open the Elementor editor.

If you don’t see a Single Product option in the Theme Builder, check that WooCommerce is installed and active , this template type only appears when WooCommerce is detected.

Once the Elementor editor opens for your Single Product template, you’ll see the WooCommerce widget category in the left panel. The key widgets here are:

• Product Title , displays the product name
• Product Price , shows the price with sale formatting
• Add to Cart , the buy button with quantity selector
• Product Gallery , the product image with thumbnail strip
• Product Description , the short and long description fields
• Product Reviews , customer review display

Drag these onto your canvas and arrange them into the layout you want. Common arrangements include a two-column layout with gallery on the left and price/add-to-cart on the right, or a stacked layout for mobile-first stores.

When you’re done with the layout, click Publish. A display conditions popup will appear.

If you’d rather start from a pre-designed layout, click the folder icon in the Elementor editor toolbar to open the Template Library. Navigate to the Blocks or Pages tab and search for “product” to find WooCommerce-specific layouts.

Use the magnifying glass icon to preview any template full-screen before inserting. When you find one you like, click Insert. The template loads onto your canvas where you can replace placeholder content with your own.

After inserting a library template, scroll through it and replace all placeholder text, images, and dummy prices with real content. Pay special attention to the Add to Cart widget , make sure it’s connected to the WooCommerce product data and not displaying static placeholder text.

Starting from a library template is faster than building from scratch, especially for your first product page design. The pre-built layouts are designed with conversion-friendly element placement you can keep or customize.