Customize the product page

Every product page is rendered by the Single Product template. It is built from blocks, so the product page is edited like any other layout: move the gallery, add a section, remove what you do not need.

Open the template

  1. Open the Flatsome Builder and choose Templates in the editor navigation.
  2. Open Single Product. The canvas previews a real product, and you can switch which one with Choose preview.
Flatsome Builder with the Templates panel open and Single Product highlighted in the Shop group
Single Product template previewing Hoodie with Logo, with the preview picker highlighted and the block tree showing Gallery, Product Info, Sidebar, Product Accordion, and Related Products

What the template contains

The default layout is a Row with three columns, Gallery, Product Info, and an empty Sidebar, followed by a product accordion and related products below the Row. Each part is its own block, and all of them can be moved, styled, or removed:

  • Product Gallery with thumbnails and a lightbox, and a Product Badge for sale and new labels.
  • Post Title, Product Price, Product Rating, Excerpt for the short description, and Product Meta (SKU, categories, tags).
  • Add to Cart with variation and quantity selection, plus optional Buy Now, Add to Wishlist, and Share Icons.
  • Product Tabs or Product Accordion for the description, additional information, and reviews.
  • Related Products, a WooCommerce Product Collection, and an optional Product Up-sells block, as a grid or slider.

Tabs and accordion

Product Tabs shows the WooCommerce product tabs horizontally or vertically, opened on click or hover. Product Accordion, used in the default template, shows the same content stacked, with settings to open the first panel automatically and to allow several panels open at once. Its Type setting switches between Accordion and Tabs, so swapping one for the other is a single setting. You can also place the description and reviews as separate blocks anywhere on the page. For extra content such as a size chart or shipping details, add a regular Tabs or Accordion block with your own text.

Product Accordion settings with the Type switch for Accordion and Tabs highlighted, next to the accordion on the canvas

Related products are chosen by WooCommerce from shared categories and tags; up-sells are set per product in its Linked Products. To hide either, remove its block from the template. Reviews are turned off in WooCommerce → Settings → Products, or by removing the reviews block from the template.

A different layout for some products

  1. In the Templates panel header, click the + (Add Template) button and pick Single item: Product.
  2. Search for the product and select it. The new template applies only to it; the Single Product template keeps handling the rest.
  3. Build the layout. Starting by copying the blocks from Single Product is usually quickest.
Add template dialog for a product, searched for Hoodie, with Hoodie with Logo highlighted

Quick view

The popup opened by the Product Quick View button in product grids has its own layout: Template Parts → Quick View. Keep it short, typically gallery, title, price, and add to cart.