How to Edit Product Page in WooCommerce Elementor

The default WooCommerce product page follows a predictable structure: product image on the left, title, price, short description, and add-to-cart button on the right, then a full-width tabs section below with the long description and reviews. That layout works, but it’s the same for every WooCommerce store running the same theme.

Editing your product page template lets you break from that structure entirely. You can move the gallery below the fold and lead with a benefit-focused headline. You can add a trust-badge row between the short description and the buy button. You can split the page into named sections with anchor links for long-form products like courses or bundles. The changes are visual only: Elementor uses dynamic content widgets that stay connected to real WooCommerce data, so the product name, price, gallery, short description, and stock status all pull live from the database regardless of where you position them in the layout.

You can also create more than one Single Product template. Each template has its own display conditions, so you might have one layout for products in a “Sale” category, a different layout for a specific high-ticket product ID, and a third default template for everything else. WooCommerce evaluates conditions in order and applies the first match, giving you control without maintaining separate themes.

Common reasons stores make this change: rearranging the image and description layout to match brand guidelines, removing sections the theme adds that aren’t relevant (like a default reviews tab on wholesale products), improving conversions by testing different button placement or urgency elements, and supporting product types that need more visual space than a standard retail layout provides.

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.

When you’re inside the Elementor editor building your Single Product template, the WooCommerce widget panel contains more options than most first-time users expect. Two widgets cause the most confusion: Product Short Description and Product Description. They are not interchangeable. The short description is the text entered in the “Short description” field on the product edit screen, and it’s designed to appear near the add-to-cart button in the main product section. The long description is the main content editor field, and it’s typically displayed in a tabs section lower on the page. If you place the wrong widget in the wrong section, you’ll either show a wall of text next to your buy button or leave the tabs section empty. Add the Short Description widget to your header section and the Product Description widget (or a Tabs widget that includes it) to the lower content area.

To style the Add to Cart button specifically, click the Add to Cart widget in the editor to select it, then open the Style tab in the left panel. Look for the “Buttons” section. From there you can change the button background color, text color, border radius, padding, and hover state. This is separate from Elementor’s global button styles, so changes here apply only to the product page add-to-cart button, not to other buttons on the site.

Before publishing the template, switch to the mobile breakpoint using the phone icon in the Elementor toolbar at the bottom of the screen. WooCommerce product pages get a significant share of mobile traffic, and a two-column layout that looks clean on desktop can stack awkwardly on small screens. Check that the product gallery, title block, and add-to-cart button stack in a logical order and that button sizes are tappable. Elementor’s responsive controls let you set different column widths, padding, and font sizes per breakpoint without affecting the desktop view.

The key widgets for a Single Product template include:

• 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 Short Description: the short description field (place near the buy button)
• Product Description: the main content area (place in a lower section or tabs widget)
• Product Reviews: customer review display

Drag these onto your canvas and arrange them into the layout you want. When you’re done, click Publish. A display conditions popup will appear. Click Add Condition, select Singular > Product, and choose whether to apply it to all products or a specific category. Click Save and Close. Visit a live product page to confirm the new layout is showing correctly.

Setting Display Conditions

In the display conditions popup, click Add Condition. From the dropdown, select Singular > Product. To apply the template to all products, leave the second dropdown set to “All.” If you want the template to apply only to products in a specific category, change it to “In Product Category” and select the category. Click Save and Close.

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.