Skip to content

Posts & Themer

Now that you know how setup a post themer layout, we are going to extend this to setting up Woocommerce product layouts. This section will show you how to use Beaver Themer to create a template for a shop including the main shop page, the category archive page, and singular product page.

Example: Simple Shop Layout

We're going to use the Simple Shop layout as an example to demonstrate how to create a main shop archive page, category archive page, and singular product page in the sections below.

Simple - Shop Page
Simple - Shop Landing
Simple - Category Page
Simple - Shop Prod Cat
Simple - Product Page
Simple - Single Product

Products - Singular Layout

Before you Start

Make sure you have you have created 3 dummy products, using lorem ipsum text and adding a product image, as well as 3 dummy categories. You'll be building out a version of the Simple - Product Page. Review the demo to see the full layout you'll be building and the modules section for the modules used.

  • 1 Add a new singular themer layout
  • 2 Name it something like "Products Singular Layout"
  • 3 In the Location drop down choose Product > All Products
  • 4 Publish the layout, then launch Beaver Builder
  • 5 Click + and select Templates > General > Product and choose to replace current layout. This will give you the basic layout with the proper modules.
  • 6 Add a hero row style the page to be consistent with the layout on the rest of the site/example

Use the following Themer Modules: Product title, rating & short description in hero, product image as hero background with overlay, product details & long description, product images, upsells/linked/related products

Simple - Product Page
Simple - Single Product
View Demo

Important Links: Alternatives to Woopack

Products - Archive Layout

Before you Start

In this section you'll be building out a version of the Simple - Shop Page. Review the demo to see the full layout you'll be building and the modules section for the modules used.

  • 1 Add a new archive themer layout
  • 2 Name it something like "Shop Archive Layout"
  • 3 In the Location drop down choose Product Archive
  • 4 Publish the layout, then launch Beaver Builder
  • 5 Remove the default themer post template - its easier to start with a blank slate
  • 6 Add a hero row style the page to be consistent with the layout on the rest of the site/example
  • 7 Add a posts/products module and set to "main query"

Modules: Hero image, page title & description, featured products carousel (using PowerPack content grid set to show featured), Themer Post Columns module (make sure module content is set to main query)

Simple - Shop Page
Simple - Shop Landing
View Demo

Important Links: Alternatives to Woopack

Products - Category Layout

Before you Start

In this section you'll be building out a version of the Simple - Category Page. However, for this layout we want a different setup as compared to the shop layout and set to display only for a specific category. Review the demo to see the full layout you'll be building and the modules section for the modules used.

  • 1 Add a new archive themer layout
  • 2 Name it something like "Product Category Archive Layout"
  • 3 In the Location drop down choose Product Category Archive > Select any one of the categories from the drop down
  • 4 Publish the layout, then launch Beaver Builder
  • 5 Remove the default themer post template - its easier to start with a blank slate
  • 6 Add a hero row or columns to the page to make it consistent with the layout on the rest of the site/example
  • 7 Add a posts module and set to "main query"

Modules: Hero image, Themer category title & description, category image as hero background with overlay, Themer Post Columns (make sure module content is set to main query)

Simple - Category Page
Simple - Shop Prod Cat
View Demo

Important Links: Alternatives to Woopack, Creating a Different Product Layout for Products of a Different Category

Table of Contents
    Add a header to begin generating the table of contents
    Scroll To Top