Skip to content
GPLWP Guides

How to customize product pages in WooCommerce

WooCommerce Time About 30 minutes 6 steps Updated 16 Oct 2026

WOOCOMMERCE
The short answer

WooCommerce product pages can be rearranged in Appearance > Editor when you use a block theme. Classic themes need Customizer settings, hooks, or child-theme template overrides; advanced swatches, galleries, tabs and sizing charts usually need an extension.

The route
  1. 01Check which editing route applies
  2. 02Edit the shared product template
  3. 03Create a product-specific layout
  4. 04Use the classic theme route
  5. 05Add only the features you need
  6. 06Choose the fast route

What you need

  • A WooCommerce store on WordPress 6.0 or later
  • Administrator access to WordPress
  • A staging site or recent backup
  • A clear list of the product-page changes you need

Check which editing route applies

Go to Appearance > Editor. If you can open Templates, your active theme is a block theme and you can edit the WooCommerce product template visually. If Appearance > Editor is unavailable, you are probably using a classic theme, so use its Customizer, builder, hooks, or a child-theme override instead.

Before changing a live shop, make a backup and check the page on mobile. A theme or builder may already control the product layout, and editing the wrong system can leave your changes apparently missing.

Edit the shared product template

With a block theme, open Appearance > Editor > Templates, then choose WooCommerce > Single Product. Select the product-page layout and use List View to move, remove, or add blocks such as the gallery, title, rating, price, summary, add-to-cart area, product details, and related products.

Save the template, then check a simple product and a variable product. Some blocks can be locked, and newer WooCommerce templates may use different gallery or add-to-cart blocks, so do not assume every store has the same layout.

Create a product-specific layout

For one product only, go to Appearance > Editor > Templates > Add Template, choose Single item: Product, and select the product. Build the layout or start from a pattern, then save it. Other products continue using the shared template.

If the design does not appear, reopen the Templates screen and confirm that the template was assigned to the intended product. The product must already exist before you can create this specific template.

Use the classic theme route

With a classic theme, change product content in the product editor and use Appearance > Customise > WooCommerce > Product Images for the standard image sizing and cropping controls. For layout changes, developers can add content around the confirmed single-product action points woocommerce_before_single_product_summary and woocommerce_after_single_product_summary.

For deeper changes, copy the matching WooCommerce template into your child theme's woocommerce directory and keep the same relative structure. Do not edit files inside the WooCommerce plugin or parent theme: updates can overwrite them. Template overrides also need checking after WooCommerce updates because template versions can change.

Add only the features you need

Core WooCommerce and the Site Editor handle layout, product content, standard galleries, variations, reviews, and related products. They do not provide every specialised product-page feature in one place. Variation swatches, variation-specific galleries, custom tabs, sizing-chart pop-ups, advanced review displays, brands, and custom labels usually require an extension or bespoke development.

Check each feature on a variable product, not just a simple product. A common failure is that the selected variation changes the price but not the gallery, or that a builder replaces WooCommerce's variation form and breaks selection. Keep one system responsible for the product template and test after plugin, theme, and WooCommerce updates.

Choose the fast route

If you only need spacing, colours, block order, product text, or a different gallery position, the built-in editor or your theme is usually enough. You do not need a product-page plugin for those changes.

If you need several advanced controls together, Kadence Shop Kit is a practical shortcut. It adds product-template controls, variation swatches and galleries, reviews, sizing charts, custom tabs, labels, brands, and related WooCommerce enhancements from one plugin. Configure one product first, check the checkout flow and mobile layout, then roll the settings out more widely.

The fast route

Let Kadence Shop Kit do it

All-in-one product-page controls for templates, swatches, galleries, reviews, tabs, and sizing charts.

Get Kadence Shop Kit

Sources

  1. woocommerce.com /document/woocommerce-store-editing/customizing-product-page…
  2. woocommerce.com /document/woocommerce-store-editing/templates/customizing-si…
  3. woocommerce.github.io /code-reference/files/woocommerce-templates-content-single-p…
  4. developer.woocommerce.com /docs/theming/theme-development/set-up-a-child-theme?utm_sou…
  5. woocommerce.com /document/woocommerce-store-editing/blocks/?utm_source=opena…

Questions

Can I customise WooCommerce product pages without a plugin?
Yes, you can customise layout and content without a plugin when your block theme supports the Site Editor. Use Appearance > Editor > Templates > WooCommerce > Single Product, or use your theme's settings and a child-theme override on a classic theme. Advanced features such as swatches, sizing-chart pop-ups, and variation galleries normally need an extension or custom development.
Why can’t I see Appearance > Editor in WordPress?
You cannot use the Site Editor for WooCommerce templates unless your active theme is a block theme. Classic themes may show Appearance > Customise instead, or they may provide their own builder. Check which theme controls the shop before editing anything; changes made in a separate page builder will not necessarily affect the WooCommerce single-product template.
How do I change the order of product-page sections?
With a block theme, open the Single Product template in Appearance > Editor and move blocks in List View. With a classic theme, use the theme’s product settings, confirmed WooCommerce action points, or a child-theme template override. Avoid editing WooCommerce plugin files because updates replace them, and test the result on simple and variable products.
How do I add a sizing chart or custom product tab?
WooCommerce does not provide every type of sizing chart or custom tab as a standard product-page control. You can add simple information to the description or product details, but reusable tabs, pop-ups, per-product assignment, and structured sizing charts generally require an extension or custom code. Check that the feature works with your active theme and does not replace the variation form.
Why did my product-page changes disappear after an update?
Changes disappear when they were made directly in a parent theme or WooCommerce plugin file, or when another template system takes priority. Use the Site Editor, a child theme, or a maintained extension instead. After updates, check the active template, template overrides, browser cache, and variable-product behaviour. WooCommerce can also revise template files, so review override notices before updating a live shop.