WooCommerce Template Builder for WordPress

8 min read Updated

The WooCommerce Templates Addon lets you build your WooCommerce store pages with Page Builder. You design the single product page, the product cards in your shop and archives, the Shop page, the cart, the checkout, the thank you page and the My Account page. Each template uses WooCommerce widgets, such as the product images, the price and the Add to Cart button, together with any other widget.

Requirements

Go to SiteOriginPremium Addons and activate WooCommerce Templates. This also activates WooCommerce, Page Builder and the Widgets Bundle if they are installed. The templates don’t work until all three plugins are active.

The Product, Product Archive and Shop templates need a theme that loads the WooCommerce templates in the standard way. Most WooCommerce themes do this.

The Template Builder

Go to SiteOriginWooCommerce Template Builder. You can also click Manage Templates on the addon card. The builder has a tab for each part of your store:

  • Product: the single product page. You can make several templates.
  • Product Archive: each product in the shop and in the category and tag pages. You can make several templates.
  • Shop: the main Shop page.
  • Cart: the cart when it has products.
  • Empty Cart: the cart when it is empty.
  • Checkout: the checkout form.
  • Thank You: the page that shows after a customer places an order.
  • My Account: the customer account area.

Hover over the info icon next to the active tab to see what the tab controls.

Each tab has a Page Builder interface. If you are new to Page Builder, see Building a Page. When you click Add Widget, the widget dialog opens on the WooCommerce widgets for the current tab, for example WooCommerce Product. The tabs for the other WooCommerce widget groups and the other widgets are in the dialog sidebar.

Template Controls

Template
Shows on the Product and Product Archive tabs after you save a template. Select a template to edit it, or select Add New Template. The default template has “(default)” after its name.

Template Title
The name of the template on the Product and Product Archive tabs. You see it in the Template list and in the product and category settings.

Set as Default
Shows on the Product and Product Archive tabs. Uses this template for all products, or all product archives, that don’t have their own template. Only one template per tab can be the default. Default: off.

Enable Template
Shows on the Shop, Cart, Empty Cart, Checkout, Thank You and My Account tabs. Your store uses the template only while this is checked. Default: off.

Save Template
Saves the template and its settings.

Preview template
The eye icon next to Save Template. Shows the layout that is in the builder, before you save, in the SiteOrigin WooCommerce Template Preview dialog. It shows after the template is saved. The Thank You tab has no preview.

Delete Template
The trash icon on the Product and Product Archive tabs. Deletes the selected template after you confirm.

Prebuilt Layouts

To start fast, click Layouts in the builder toolbar and select the default layout for the tab, for example Product Default or Cart Default. Each tab has one. In the Template Builder, the Layouts dialog shows only these layouts. The Clone: WooCommerce Templates tab in the dialog copies a template that you already saved.

For more about the dialog, see Prebuilt Layouts.

Product

The Product tab controls the single product page. Build a template, check Set as Default to use it for all products, and click Save Template.

To use another template for one product, edit the product. In the Product template box in the sidebar, select the template, and update the product. Default uses the default template. In the product list, Quick Edit and Bulk Edit have the same setting, named Template.

Product Widgets

The WooCommerce Product tab of the widget dialog has these widgets:

  • Product Images: the product image gallery. Gallery Type sets whether the gallery adds a lightbox, zoom on hover, or both: Slider, Slider With Lightbox, Slider With Zoom or Slider With Lightbox and Zoom (default). Enable Sale Sticker shows the sale badge on products that are on sale. Default: on.
  • Product Title, Product Price, Product Rating and Product Short Description.
  • Product “Add to Cart” Button: the quantity field and the Add to Cart button. Single Product Button Text sets the button text. Default: Add to Cart. External products keep their own button text.
  • Product Meta: the SKU, categories and tags. Use Display to choose which ones show. Default: all three.
  • Product Data Tabs: the Description, Additional information and Reviews tabs. For each tab, set a Label (empty uses the WooCommerce label), turn it off with Enabled, and set its Order. Default order: 10, 20, 30.
  • Product Description, Product Additional Information and Product Reviews: each part of the data tabs on its own.
  • Product Upsell Display and Related Products: product grids from WooCommerce.
  • Product Sharing: a place for sharing plugins to add their buttons.

Product Shortcode

You can show a product with a Product template anywhere on your site, for example on a landing page. Save the template first. At the bottom of the Product tab, the Template Shortcode field has the shortcode for the template:

[sowctb template="456" product="ProductId"]

Copy it, and replace ProductId with the ID of the product. The shortcode needs both IDs.

Product Archive

A Product Archive template is the layout of each product in the product grid: for example the image, the title, the price and the Add to Cart button. The default template applies to the Shop page and to all product category and tag pages.

The tab has three builders:

Before Product Archive Loop
Content above the product grid, for example a banner. Click Open Builder to edit it.

Product Archive Loop
The main builder: the layout of one product.

After Product Archive Loop
Content below the product grid, for example text about the category. Click Open Builder to edit it.

The before and after content shows on product category and tag pages. On the Shop page, use the Shop tab to add content around the products.

To use another template for one category, go to ProductsCategories and edit the category. Select the template in Product Archive Template and click Update. Product tags have the same setting. The setting shows after you save at least one Product Archive template.

Product Archive Widgets

The WooCommerce Product Archive tab of the widget dialog has these widgets:

  • Product Loop Thumbnail: the product image, linked to the product. Enable sale sticker shows the sale badge. Default: on.
  • Product Loop Title, Product Loop Price and Product Loop Rating.
  • Product Loop “Add to Cart”: the button for each product. Set the button text for each product type: Simple product button text (default: Add to Cart), Variable product button text (default: Select Options) and Grouped product button text (default: View Options).

Shop

The Shop template is the layout of the main Shop page. Add the Shop Product Loop Widget where the products should show, and add other widgets around it. The Shop Product Loop shows the products with the default Product Archive template, plus the result count, the sorting menu and the pagination from WooCommerce. Check Enable Template and click Save Template.

Cart, Checkout and Account Pages

The Cart, Empty Cart, Checkout, Thank You and My Account tabs each hold one template. Build the layout, check Enable Template and click Save Template. Each tab has its own widgets:

  • Cart: Cart Form, Cart Totals and Cart Cross Sell Display.
  • Empty Cart: Cart Empty Message and Cart Empty – Return to Shop.
  • Checkout: Checkout Customer Details and Checkout Order Review.
  • Thank You: Thank You Order Status, Thank You Order Overview, Thank You Order Details, Thank You Order Downloads and Thank You Customer Details.
  • My Account: Account Navigation and Account Content.

When you preview the Cart template with an empty cart, the preview adds a product for the preview only.

Checkout Order Review

Display Product Images
Shows a thumbnail next to each product in the order review. Default: off.

Thumbnail Image Size
Small, Medium or Large. Default: Small.

Border Width and Border Color
A border around each thumbnail.

Thank You Order Status

Success > Message
The text for a successful order. Default: “Thank you. Your order has been received.”

Failed > Message
The text for a failed payment. The default tells the customer that the bank declined the payment and asks them to try again.

Advanced Customizations

Override the Page Templates in Your Theme

The addon wraps the Shop template and the category and tag archive template in its own page template files. To use your own file, copy it from the addon’s templates folder to a woocommerce folder in your theme (or child theme), and add the wctb- prefix:

  • woocommerce/wctb-shop.php replaces templates/shop.php.
  • woocommerce/wctb-archive.php replaces templates/archive.php.

Show All Prebuilt Layouts in the Template Builder

By default, the Layouts dialog in the Template Builder shows only the WooCommerce layouts. To show the other prebuilt layouts too, add this to your theme’s functions.php file or a code snippets plugin:

add_filter( 'siteorigin_premium_wctb_panels_remove_layouts', '__return_false' );