WooCommerce product page customization is a theme-dependent process. Updated: ****.
In most stores, six methods cover the work:
- Block theme: Edit the Single Product template from Appearance → Editor → Templates → WooCommerce → Single Product.
- Classic theme: Use theme settings, a child theme, WooCommerce hooks, or PHP template overrides.
- One product: Create a product-specific template in the WordPress Site Editor.
- Product content: Edit the product under Products → All Products → Edit.
Start with the Site Editor or your theme settings. Use custom code when the visual editor cannot handle the layout or functionality you need.
WooCommerce Product Page Customization Methods
| Method | Best for | Technical skill |
|---|---|---|
| Site Editor | Changing the layout of most product pages | Low |
| Product editor | Editing descriptions, images, prices, stock and variations | Low |
| Product-specific template | Giving one product a different layout | Low to medium |
| Theme settings or page builder | Making broader visual changes | Low to medium |
| WooCommerce hooks | Adding or moving content | Medium |
| Template overrides | Changing the PHP structure | High |
1. Check Whether Your Theme Uses the Site Editor
Go to Appearance → Editor.
If you can access templates and site-wide styles, the site uses a block-based editing system. WooCommerce includes a Single Product template for individual product pages. Changes to this template affect every product page that uses it.
If Appearance → Editor is not available, the site probably uses a classic theme. Check the theme customizer, page builder, child theme, hooks or template files instead.
2. Customize All Product Pages with the Site Editor
Go to:
Appearance → Editor → Templates → WooCommerce → Single Product
The Single Product template contains WooCommerce blocks that display information for the product being viewed. You can move, remove, style or replace many of these blocks.
Common blocks include:
- Store Breadcrumbs
- Store Notices
- Product Gallery
- Product Title
- Product Rating
- Product Price
- Product Summary
- Add to Cart with Options
- Product Meta
- Product Details
- Related Products
Arrange the Main Product Information
A useful product page order is:
- Breadcrumbs
- Product gallery
- Product title
- Rating and review count
- Price
- Short description
- Variations or product options
- Add to Cart button
- Shipping, returns or availability message
- SKU, categories and tags
- Full description
- Additional information
- Reviews
- Related products or upsells
Keep the title, price, options and Add to Cart button together. Put supporting details such as materials, dimensions and delivery information below the main purchase area.
Change the Product Gallery
Select the Product Gallery block to change how product images appear. Depending on the block and theme, its settings may include the gallery layout, thumbnails, zoom, spacing and image presentation.
WooCommerce has both a classic Product Image Gallery block and a newer Product Gallery block. Check which one the template uses before changing its settings.
Use:
- One clear primary product image
- Multiple angles
- Detail shots
- Lifestyle images
- Size or scale references where useful
- Consistent image ratios across products
Edit the Title, Price and Short Description
The Product Title block controls the product name. The Product Price block controls the displayed price. The Product Summary block normally displays the product's short description.
Use the short description for information a shopper needs before deciding whether to continue:
- Main benefit
- Intended use
- Main material or specification
- Included items
- Compatibility details
- Delivery or availability information
Keep the short description brief. The long description has space for full specifications, instructions and supporting content.
Customize Product Details and Reviews
The Product Details block can display:
- Full description
- Additional information
- Product attributes
- Weight and dimensions
- Customer reviews
WooCommerce fills these sections using the product data entered in the product editor. Depending on the template, you can also change the tab style, spacing and headings.
Add Related Products and Upsells
The Related Products block displays products connected to the current product. Use it for complementary items, alternatives or accessories.
Examples include:
- A camera with compatible memory cards
- A sofa with matching cushions
- Running shoes with performance socks
- A laptop with a protective case
WooCommerce also provides settings for related product images, titles, sale badges, columns, typography and spacing.
3. Create a Different Layout for One Product
A product-specific template works when one product needs a different structure or more content than the rest of the catalogue.
Go to:
- Appearance → Editor
- Templates
- Select Add Template
- Choose Single Item: Product
- Select the product
- Build the layout with blocks
- Save the template
The product must exist before you can assign a product-specific template. This approach suits flagship products, launches, bundles and high-value products that need demonstrations or extra calls to action.
Use a separate template only when the product needs a different structure. A different description or price belongs in the product editor, not in a new template.
4. Edit the Product Content
Changing the template changes the page structure. Editing the product changes the information shown inside that structure.
Go to:
Products → All Products → Edit
The product editor includes fields for:
- Product name
- Long description
- Short description
- Product images
- Product gallery
- Product data
- Product type
- Price
- Inventory
- Shipping
- Attributes
- Variations
- Linked products
- Reviews
- Categories and tags
The long description can include text, images, videos, tables and HTML. The short description provides a brief summary near the main product information.
Product Content Checklist
For each product, check that you have:
- A descriptive product name
- A concise, benefit-led summary
- A detailed description
- Clear specifications
- Dimensions and weight where relevant
- Materials or ingredients
- Compatibility information
- Care or usage instructions
- Delivery and returns information
- Accurate stock status
- Correct variations and prices
- High-quality product images
For variable products, test every option on the live page. Confirm that the selected variation changes the price, image, stock status and Add to Cart behavior correctly.
5. Customize a Classic WooCommerce Theme
Classic themes usually provide these options:
- Appearance → Customize
- Theme-specific settings
- A page builder
- Custom CSS
- A child theme
- WooCommerce hooks
- PHP template overrides
Use the least complex option that solves the problem. A CSS change should not require a template override. A simple text notice should not require a rebuild of the full product template.
Add Custom CSS
For small visual changes, use the theme's Additional CSS area or a child theme stylesheet.
font-size: 1.5rem;
font-weight: 700;
color: #1d5f3b;
}.single-product.single_add_to_cart_button {
border-radius: 6px;
padding: 14px 24px;
}
Use specific selectors and test the result on mobile, tablet and desktop. If you only want to change the WooCommerce Add to Cart button, avoid selectors that affect every button on the site.
6. Add or Move Content with WooCommerce Hooks
Hooks let developers add content at set locations without editing WooCommerce's original plugin files.
The classic product template includes hooks for:
- Content before the product
- Product images and sale notices
- The product title
- Rating
- Price
- Short description
- Add to Cart button
- Product meta
- Product tabs
- Upsells
- Related products
The woocommerce_single_product_summary hook controls the title, rating, price, short description, Add to Cart button and product meta in a priority order.
This example adds a delivery message after the Add to Cart button:
add_action(
'woocommerce_single_product_summary',
'my_product_delivery_message',
35
);
function my_product_delivery_message() {
echo '<p class="product-delivery-message">
Dispatches within 1-2 business days.
</p>';
}
The standard Add to Cart function uses priority 30, while product meta uses priority 40. Priority 35 places the message between them.
Add custom PHP through a child theme or code snippets plugin. Do not put custom code directly in the parent theme, because a theme update can overwrite it.
7. Override WooCommerce Templates Only When Needed
Use a template override when you need to change the PHP markup or product page structure beyond what blocks, hooks and CSS can handle.
The upgrade-safe process is:
- Create or use a child theme.
- Find the required WooCommerce template.
- Copy it into the child theme's
/woocommerce/directory. - Keep the same file structure.
- Edit the copied file.
- Check WooCommerce → Status for outdated templates after updates.
Do not edit files inside the WooCommerce plugin. Plugin updates replace those files and remove your changes.
WooCommerce also recommends checking template overrides for compatibility because the default templates can change over time.
8. Improve the Page for Sales and Search
A custom layout should make the buying decision easier. Changing the appearance alone is not enough.
Show the Main Buying Information Early
Place these elements where shoppers can find them without excessive scrolling:
- Product name
- Main image
- Price
- Main benefit
- Product options
- Stock or availability
- Add to Cart button
Make the Content Easy to Scan
Use:
- Short paragraphs
- Descriptive subheadings
- Specification tables
- Bulleted features
- Clear variation labels
- Visible delivery and returns information
Keep Product Data Consistent
The product title, short description, long description, attributes, image captions and structured product information should describe the same product accurately.
Do not put important purchase information only in images or hidden tabs.
Test the Full Purchase Path
After changing the page, test:
- Simple products
- Variable products
- Out-of-stock products
- Sale prices
- Products with backorders
- Quantity changes
- Coupon behavior
- Add to Cart notices
- Mobile layouts
- Related product links
- Reviews and review submission
A product page that looks good but prevents variation selection or hides the Add to Cart button is not working properly.
Which WooCommerce Product Page Method Should You Use?
Use the Site Editor when you want to rearrange blocks or change the layout of most product pages.
Use the product editor when you need to change product information, images, prices, inventory, attributes or descriptions.
Use a product-specific template when one product needs a different layout.
Use hooks and CSS for targeted changes such as notices, labels, spacing and button styles.
Use a template override when you need control over the PHP structure and can maintain the override after WooCommerce updates.
For most stores, this order keeps the work manageable:
- Edit the Single Product template visually.
- Improve the product content and product data.
- Add CSS for small visual changes.
- Use hooks for custom content.
- Use template overrides only for structural changes that the other methods cannot handle.