WooCommerce gives you several ways to edit your product page, from the built-in WordPress Site Editor to visual page builders and custom code. The right approach depends on how much you want to change and your comfort level with technical tools. A simple layout tweak takes minutes in the Site Editor, while a full redesign might call for a page builder or PHP hooks.
Edit the Template in the Site Editor
The fastest way to change your product page layout is through the WordPress Site Editor, which lets you rearrange, remove, and style blocks without writing code. Navigate to Appearance > Editor in your WordPress dashboard, click Templates, then select WooCommerce from the sidebar. Open the Single Product template to start editing.
Every element on the default product page is a block you can manipulate. The Product Title block lets you change alignment and heading size. The Product Price block has settings for colors, typography, and spacing. The Product Summary block (your short description area) offers the same styling controls. The Product Details block, which holds your tabbed content like descriptions and reviews, can switch between a classic boxed style and a minimal display. Related Products can be configured to control column count, whether images link to product pages, and whether sale badges appear.
You can drag any of these blocks to a new position or delete them entirely. Want the price above the title? Just move it. Don’t need breadcrumbs? Remove the Store Breadcrumbs block. Every change applies to all products using that template.
Create a Custom Template for One Product
If you want a unique layout for a specific product, like a flagship item or a landing page for a promotion, you can create a dedicated template without affecting the rest of your catalog.
- Go to Appearance > Editor and click Templates.
- Click the plus sign to add a new template.
- Choose “Single Item: Product.”
- Select the specific product this template should apply to.
- Pick a pre-built pattern as a starting point, or start from scratch.
- Edit the template layout and save.
That product will now use its own template while everything else keeps the default Single Product layout. If you ever want to undo your changes to any template, open it in the editor, click the three-dot menu next to the template name, and choose Reset. This reverts it to the original WooCommerce default.
Use a Visual Page Builder
Page builders like Elementor Pro give you more granular design control than the Site Editor. The concept is similar (you’re designing a template that dynamically pulls in each product’s data) but with a drag-and-drop interface and a wider set of styling options.
In Elementor Pro, the workflow looks like this: open the Theme Builder, go to Single Product, and click Add New. You’ll get a blank canvas where you drag in dedicated WooCommerce widgets for each element: Product Title, Product Images, Product Price, Product Rating, Short Description, Add to Cart, Product Meta, Product Tabs, and Related Products. Each widget can be placed anywhere on the page and styled independently. The Add to Cart button, for example, can be fully customized with your own colors, fonts, and sizing.
When you publish the template, you set a display condition. Choosing “All Products” applies your design across every product page. You can also set conditions for specific categories or individual products if you want different layouts for different parts of your store. Other builders like Divi offer similar functionality with their own widget libraries.
Add Custom Tabs and Fields
The default product page shows three tabs: Description, Additional Information, and Reviews. If you need more, like a sizing guide, FAQ section, or embedded video, a plugin is the simplest route. The free “Custom Product tabs for WooCommerce” plugin lets you create unlimited additional tabs with rich content including images, videos, and shortcodes.
To set one up, go to Products > Tabs in your dashboard, click Add New Tab, and enter a title and content using the standard WordPress editor. You can assign tabs globally based on categories, tags, or brands, so a “Care Instructions” tab automatically appears on every product in your clothing category. For one-off tabs, edit the individual product, find the Custom Tabs section in the Product Data panel, and add a tab there. The plugin also lets you disable default tabs you don’t need, like Additional Information, and reorder tabs using a priority field.
Reposition or Remove Elements with Code
For developers or store owners comfortable with PHP, WooCommerce’s action hooks let you surgically control what appears on the product page and where. Hooks are specific points in the page template where WooCommerce runs code to output elements like the price, add-to-cart button, or product metadata.
The key hooks on the single product page are:
- woocommerce_before_single_product_summary: fires before the product title and details area (where the image gallery sits)
- woocommerce_single_product_summary: fires inside the summary area where the title, price, short description, and add-to-cart button appear
- woocommerce_after_single_product_summary: fires after the summary, where tabs and related products display
- woocommerce_before_add_to_cart_button and woocommerce_after_add_to_cart_button: let you insert content directly around the add-to-cart button
- woocommerce_product_meta_start and woocommerce_product_meta_end: let you add content before or after the SKU, categories, and tags
To remove an element, you use WordPress’s remove_action function. For example, removing the price from its default position and re-adding it at a different hook effectively moves it. Filters like woocommerce_get_price_html let you modify how the price is displayed (adding a prefix like “Starting at” or formatting sale prices differently), while woocommerce_short_description lets you alter the short description output.
Add hook-based customizations to your child theme’s functions.php file or a site-specific plugin. Editing the parent theme directly means your changes will be overwritten on the next theme update.
Choosing the Right Approach
If you just need to rearrange the existing layout or tweak typography and colors, the Site Editor handles it without any plugins or code. It is the most maintainable option since it uses native WordPress functionality. For a completely custom design with precise control over spacing, animations, and responsive behavior, a page builder like Elementor Pro is worth the investment. If your changes are narrow but specific, like moving the SKU above the price or injecting a trust badge next to the add-to-cart button, hooks give you the precision without the overhead of a full page builder. And for adding new content sections to the tabbed area, a custom tabs plugin saves significant development time over building that functionality from scratch.
You can also combine approaches. Many store owners use the Site Editor for their base template, a tabs plugin for extra content sections, and a handful of hook-based tweaks in their child theme for small adjustments the editor can’t handle.