Customizing Your Product Pages

Product pages are the most detailed view your customers will get of your product before deciding whether to buy it. Depending on what you’re selling you may want to give as much information as possible to help your buyers make the right decision, or keep things straightforward for a tight conversion funnel. With WooCommerce Store Editing, you can fit your shop to your purposes, no matter the product.

Here we cover the template and blocks that make up product pages in WooCommerce when using a block theme, as well as how to create a custom product page template for a specific product.

By default, all product pages will use the `Single Product` template, unless a specific template for that product exists. You can also create custom templates for specific products.

Most 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. The “Related Products” blocks section can be moved as a whole, but its inner blocks cannot be removed from the related blocks section.

Since many of these blocks use dynamic content, many of the blocks on the single product page do not have block-level settings or styles. If no settings or styles are mentioned for a block below, it’s because none are available.

This Block is also used on product catalog templates. Adding breadcrumbs to your shop is an SEO boost and improves ease of navigation for your shoppers.

Block Styles

You can customize both the text and link colors, as well as set a typography size for the store breadcrumbs

The 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.

Images you add to your product will be displayed in this block as a gallery.

The 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.

The 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.

The 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.

The Product Summary block displays the short description for your product. If no short description has been entered for the product, an excerpt of the main product description will be displayed (and truncated if it’s too long.)

Block Styles

The block has settings for colors, typography, and dimensions, so you can customize how the summary is displayed.

The Add to Cart with Options block displays a button so the customer can add a product to their cart. The options which are displayed to the customer vary depending on the product’s type. e.g. quantity selectors, dropdown menus to select a variation.

The 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 display the stated metadata about the current product, and have color, typography, and dimension settings to control their display.

The 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.

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.

The 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 which 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 cart will have a “Select Options” button that takes the shopper to that product’s page. See more about selecting related products.

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, as well as settings for typography, dimensions, and the number of columns in the related products section.

In addition to customizing the default product page template, what if you want to create a special template that’s used for a specific product? With store editing, it’s easy!

To create a custom template for an individual product:

1. Head to the site editor at Appearance > Editor.
2. Click “Templates” then the plus sign to add a new template.
3. Choose the “Single Item: Product” option.
4. In the menu that appears, select the specific product this new template should apply to.
5. If you’d like to start from a pre-built pattern, select a pattern when prompted.
6. Edit the template to meet your needs for that specific product!

Do you still have questions and need assistance? 

• 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.