Use the Site Editor to change the layout of your product pages when your store uses a block theme. You can edit the shared Single Product template or create a template for one product.
This guide explains common product-page blocks and how to create a product-specific template. You need permission to edit the site’s design and an existing product. If Appearance > Editor is unavailable, check whether your active theme is a block theme before following these steps.
Product Page Templates
↑ Back to topBy default, product pages use the Single Product template unless a more specific template applies. To edit it, go to Appearance > Editor > Templates and select Single Product. The blocks and layout depend on your theme and previous customizations. You can also create custom templates for specific products.
Blocks
↑ Back to topMost of the blocks on the “Single Product” template are simple and do exactly what their name says. These blocks are dynamic and show the appropriate information for the current product being viewed. To edit the content displayed by one of these blocks for a specific product, edit the product directly. (See more about adding and managing products.)
To customize the template for your shop’s needs, blocks can be repositioned to another place in the layout or removed entirely from the template. Some templates lock blocks or their inner structure. If a move or removal action is unavailable, check the selected block’s lock settings before changing the layout.
The sections below describe common blocks. Your template may use newer alternatives, including Product Gallery and Add to Cart + Options, or separate blocks for the description and reviews. Select a block to inspect the settings and styles available for that block in your template.
Store Breadcrumbs
↑ Back to topThis block is also used on product catalog templates. Breadcrumbs show shoppers where they are in your store and let them return to parent pages.
Block Styles
You can customize both the text and link colors, as well as set a typography size for the store breadcrumbs.
Store Notices
↑ Back to topThe Store Notices block is where your shop will display shopper-facing notifications generated by WooCommerce or extensions. For example, when an item is successfully added to the cart, the notification will show here. The store notices block can be added to any page or template of your site.
Block Styles
Since notifications of different types each have their own styling, there are no style settings for this block.
Product Image Gallery
↑ Back to topImages you add to your product will be displayed in this block as a gallery.
This is the classic product gallery block. WooCommerce also includes a separate Product Gallery block, which has its own layout, thumbnail, and zoom settings. Check which of the two your template uses before you change gallery settings.
Note:
WooCommerce 11.1 adds videos to product galleries. The feature is experimental and turned off by default: enable Product gallery videos in the Experimental section at WooCommerce > Settings > Advanced > Features. Videos have to be uploaded to your media library — links to videos hosted somewhere else aren’t supported. For the steps to add one to a product, see Product Gallery Block.
Compatibility with Add to Cart + Options:
If a template uses this block alongside the Add to Cart + Options (Beta) block, the editor shows a notice: “The classic Product Image Gallery block is not compatible with the Add to Cart + Options block in this template. Switch to the new Product Gallery block for a better experience.” To clear it, replace the Product Image Gallery block in that template with the Product Gallery block.
Product Title
↑ Back to topThe Product Title block displays the title of the product. It has settings to alter the alignment of the title, as well as adjust the heading size. The block has a setting in the sidebar to make the product title a link, which will direct shoppers back to the product page.
Product Rating
↑ Back to topThe Product Rating block displays the average rating of the product from reviews that have been left for it. The text color and size can be adjusted, as well as the block’s margins.
Product Price
↑ Back to topThe Product Price block displays the price of the current product. The block has settings for colors, typography, and dimensions, so you can customize how the price is displayed.
Product Summary
↑ Back to topThe Product Summary block displays the short description for your product. If the short description is empty, the block uses the main description only when its fallback option is enabled. The configured summary length controls whether the text is shortened.
Block Styles
The block has settings for colors, typography, and dimensions, so you can customize how the summary is displayed.
Add to Cart with Options
↑ Back to topThe Add to Cart with Options block displays the product’s add-to-cart form, including quantity or variation controls when applicable. It is separate from the newer Add to Cart + Options (Beta) block named in the gallery compatibility warning above.
Product Meta
↑ Back to topThe Product Meta block is a container that by default has the Product SKU, Product categories, and Product tags blocks inside of it. Each of these three blocks displays the stated metadata about the current product and has color, typography, and dimension settings to control their display.
Product Details
↑ Back to topThe Product Details block displays a product’s details in three tabs:
- The Description tab shows the full product description entered on the “Edit Product” page.
- The Additional Information tab shows the product’s weight, dimensions, and any assigned product attributes.
- The Reviews tab displays product reviews that have been collected, as well as a form to submit a review for the product (depending on your settings)
All the content that gets shown in these three tabs is populated dynamically from the product’s data.
To change or hide the heading shown above the content in the Description tab, see Change or hide the Description heading. That section covers the Site Editor setting and the classic theme filter.
Block Styles
The Product Details Block has style options for displaying the tabs in a classic, boxed way or in a more minimal display. There are also dimension controls for the block’s margins.
Related Products
↑ Back to topThe Related Products block shows products that are related to the main product being viewed on the single product page. It includes a heading block and a product template that contains blocks to show the related product’s image, title, price, and an add to cart button. Products that need options selected before they can be added to the cart will have a “Select Options” button that takes the shopper to that product’s page. WooCommerce selects related products automatically using shared categories and tags. Upsells and cross-sells are separate recommendations you can select in the product editor.
Block Settings
The related products block and its inner blocks have settings to control whether or not the product images and titles act as links to the product pages, whether to show “on sale” badges for on sale products. There are also settings for typography, dimensions, and the number of columns in the related products section.
How to: Create a Custom Product Page Template for a Specific Product
↑ Back to topA product-specific template changes the layout for the selected product while other products continue using their existing templates. Make and check design changes on a staging store first.
To create a custom template for an individual product:
- Go to Appearance > Editor.
- Select Templates, then Add Template.
- Select Single item: Product.
- In the menu that appears, select the specific product this new template should apply to.
- If you’d like to start from a pre-built pattern, select a pattern when prompted.
- Edit the template, then select Save and confirm the changes.
- Open that product’s page on the storefront and confirm the new layout appears. Check another product to confirm its layout is unchanged.
Note: You must add the product to your shop before you can create a custom template for it. Learn how to add products in WooCommerce.
If the new layout does not appear, reopen Templates and check that you saved the template for the intended product. If Single item: Product is unavailable, confirm that the product exists and ask your site administrator to check your access and store setup.
Questions and support
↑ Back to topDo you still have questions and need assistance?
This documentation is about the free, core WooCommerce plugin, for which support is provided in our community forums on WordPress.org. By searching this forum, you’ll often find that your question has been asked and answered before.
If you haven’t created a WordPress.org account to use the forums, here’s how.
- If you’re looking to extend the core functionality shown here, we recommend reviewing available extensions in the WooCommerce Marketplace.
- Need ongoing advanced support or a customization built for WooCommerce? Hire a Woo Agency Partner.
- Are you a developer building your own WooCommerce integration or extension? Check our Developer Resources.
If you weren’t able to find the information you need, please use the feedback thumbs below to let us know.