Menu Close

Blocksify Docs

Build a WooCommerce product template

Build a Blocksify WooCommerce product template that replaces your theme’s single-product layout.

It shows each product’s title, gallery, price, stock, purchase form, and details while keeping the theme header and footer.

  • Before you start: Activate WooCommerce and Blocksify, keep an active theme, and publish a product with images and a price.
  • For Northstar, prepare the variable Hoodie with Color and Logo choices, images, stock, weight, dimensions, and reviews. The template will replace the theme’s single-product content.

Create and target the Dynamic Template

Start with the same creation and targeting controls covered in Dynamic Templates overview.

  1. Go to Blocksify → Dynamic Templates → Add New. A blank template editor opens.
  2. Enter a clear title such as “Northstar single products.” The title identifies the layout in the template list.
  3. Open the Dynamic Template document tab, find Display on, and click the + (Add condition) button. The condition picker opens.
  4. Select Single entry, set Post type to Products, and leave Apply to on All entries. The template now targets every single product.
The Dynamic Template document tab shows Display on set to Single entry, Post type set to Products, and Apply to set to All entries.

Use Specific entries only when one named product needs this design. See Template display conditions for narrower targets and exclusions.

Lay out the product summary

A two-column Section places product media beside the information and purchase controls.

  1. Open the + (Block Inserter) and add Section. A new Section starts with two Container columns.
  2. Select an equal or wider-left two-column Layout. The canvas shows separate left and right content areas.
The Section Layout panel shows two columns selected with an equal-width preset and two empty content areas on the canvas.
  1. Select the left Container, open Blocksify WooCommerce, and add Product Gallery. The Hoodie’s main image and thumbnails appear.
  2. Select the right Container, open Blocksify WooCommerce, and add Product Title. The Hoodie title appears as a heading through Dynamic Data.
  3. Add Product Price and Product Stock below the heading. The preview shows the current product’s price and availability.
  4. Add Product Add to Cart last. The Hoodie’s Color and Logo selectors, quantity, and purchase button complete the right column.
The product summary Section shows Product Gallery on the left and the Hoodie title, rating, price, stock, purchase form, and metadata on the right.

Tip: Keep Product Price and Product Stock separate from Product Add to Cart when you want precise spacing. They follow a valid Hoodie choice automatically.

Add the product details

Place the long description, specifications, and reviews below the summary so shoppers can scan the purchase area first.

  1. Select the outer template canvas below the first Section and add a second one-column Section. A full-row content area appears.
  2. Open Blocksify WooCommerce and add Product Tabs. The preview shows the Hoodie’s WooCommerce tab labels.
  3. Open General and choose the mobile Tab Overflow behavior you want. The device preview updates the tab strip.
  4. Open Tabs Styling and adjust Tab Active or Tab Content when needed. The selected tab and panel take the new design.
The product details Section shows the Hoodie tabs beside the open General panel with responsive tab controls.

For an always-visible layout, replace Product Tabs with Product Additional Information and Product Reviews. WooCommerce supplies the table and review form in either approach.

Preview the product and set the width

Use a real sample product before publishing so every product-aware block shares the same preview.

  1. Open the Dynamic Template document tab and find Editor preview. The picker lists products allowed by the condition.
  2. Search for and select Hoodie. The gallery, title, price, stock, options, information, and tab labels refresh together.
The Dynamic Template Editor preview picker has Hoodie selected while the product-aware blocks show the Hoodie content on the canvas.
  1. Select each Section, open Layout, and set Content width to From Theme for the theme’s normal column or Custom for a chosen maximum. The layout adopts the selected width.
  2. Switch the editor device preview to Tablet and Mobile, then adjust the Section columns and Product Tabs overflow. The summary stacks and the tabs remain usable on narrow screens.

Tip: Preview the sale Beanie after the Hoodie to check a single-image gallery and crossed-out sale price without changing the saved design.

Publish and test the storefront

Publishing activates the replacement where its condition matches.

  1. Click Publish and confirm the action. The template becomes available to matching product pages.
  2. Open the Hoodie on the storefront in a new tab. The new Blocksify layout replaces the theme’s former single-product content.
  3. Choose a Color and Logo, change the quantity, and confirm that the price, stock, gallery, and purchase form show the chosen option.
  4. Open each Product Tab and test the Reviews form. WooCommerce’s product details remain available inside the Blocksify design.
  5. View the Beanie and one product with no reviews. Each page keeps the same structure while showing only the content WooCommerce has for that product.
The completed Northstar product template shows the Hoodie gallery, Color and Logo selectors, purchase controls, metadata, and Product Tabs on the storefront.

If the old product layout remains, confirm the template is Published and that Display on → Single entry → Post type: Products → Apply to: All entries. If another Dynamic Template also matches, use the display-conditions reference to make the intended rule more specific.

Was this helpful?

0

Updated