WooCommerce Templates

The WooCommerce Templates addon allows you to create custom templates for the Product, Archives, Shop, Cart, Checkout and My Account pages.

Compatible Themes

This addon supports themes that offer basic WooCommerce support such as Vantage. Themes that have heavily modified WooCommerce templates, unfortunately, aren’t supported. If you’re unsure whether your theme will be compatible, feel free to reach out to us via email on [email protected], we’ll gladly take a look.

Our SiteOrigin Corp theme is now fully supported.

Requirements

To make use of this addon, in your WordPress install, go to SiteOriginPremium Addons, locate WooCommerce Templates and click the Activate button.

Overview

Jump to the short video tutorials.

Once activated, go to SiteOriginWooCommerce Template Builder. If you’ve remained on the SiteOriginPremium Addons page after activating the WooCommerce Templates addon, you’ll need to refresh the page before the WooCommerce Template Builder menu item will be visible.

Go to SiteOrigin > WooCommerce Template Builder to begin.

At SiteOriginWooCommerce Template Builder you’ll find seven tabs:

  • Product: supports multiple templates
  • Product archive: supports multiple templates
  • Shop
  • Cart
  • Empty cart
  • Checkout
  • My Account
WooCommerce Template Builder Interface

WooCommerce Template Builder Interface

Within the available tabs, you’ll find the following settings and functionality:

Template
The Template drop-down menu is available in the Product and Product Archive tabs. Use this drop-down to create a new template or select an existing template.

Template Title
The Template title field is available in the Product and Product Archive tabs. Use this field to name your template for easy identification.

Set as Default
The Set as default checkbox is available in the Product and Product Archive tabs. Use this checkbox to assign one of your templates as the default.

Page Builder interface
Each tab uses the SiteOrigin Page Builder interface. If you’re new to Page Builder, you might find this introductory video useful.

Available Page Builder buttons:

  • Add Widget: Opens the new widget interface.
  • Add Row: Opens the new row interface.
  • Layouts: Opens the layouts interface including prebuilt layouts.

If you’d like to get started with the default WooCommerce layout, click the Layouts button, in the Prebuilt Layouts section choose the default layout for the template you’re building. For example, if you’re building a product template, you’ll find a Product Default layout in the Prebuilt Layouts section.

Save Template
Click to save your template when ready.

Preview Template
The preview button is in the form of an eye icon. Click to preview your template.

Delete Template
The delete button is in the form of a trash can/rubbish bin icon. This icon is available in the Product and Product Archive tabs. Click to delete the template you’re currently viewing.

Templates

Product

WooCommerce Product Template

WooCommerce Product Template

The Product tab allows for one or multiple product templates to be created. To create additional templates, use the drop-down field below the Product tab, select the Add new template option to start building a new template.

Once your layout is ready, click the Set as default checkbox to assign your template to all WooCommerce product pages.

To change the template for an individual product, edit the product in WooCommerce and locate the Product template drop-down in the right column, select the template you’d like to use for the individual product.

Change an individual WooCommerce product template using the Product template drop-down on the product page.

Template specific widgets

While any number of widgets can be used, the following widgets are specific to the product template.

Product “Add to cart” button: Display the product Add to cart button.
Product data tabs: Tabs displaying the product description, additional information and reviews.
Product images: display the product image gallery. Choose from the following options: Slider, Slider with lightbox, Slider with zoom, Slider with lightbox and zoom. The Product images widget also provides a setting to enable or disable the product sale sticker. If enabled, the sale sticker will only appear if the product is on sale.
Product meta: Display the product category and SKU information.
Product price: Display the product price.
Product rating: Display the product rating.
Product sharing: Adds a sharing location on the page for third-party plugins to make use of. By default, nothing will be displayed here.
Product short description: Display the product short description.
Product title: Display the product title.
Product upsell display: Display the upsell products.
Related products: Display the related products.

Product archive

WooCommerce Product Archive Template

WooCommerce Product Archive Template

The Product archive tab allows for one or multiple product archive templates to be created. Once your layout is ready, click the Set as default checkbox to assign your template to all WooCommerce product archive pages.

To change the template for an individual archive, edit the category or tag in WooCommerce and locate the Product archive template drop-down, select the template you’d like to use for the individual archive page. The Product archive drop-down will only appear on the WooCommerce category or tag page once a Product archive template has been created.

WooCommerce archive template selector

Change an individual WooCommerce category or tag template using the Product archive template drop-down on the product category or tag page.

While any number of widgets can be used, the following widgets are specific to the product archive template.

Template specific widgets

Product loop “Add to cart”: Display the add to cart button for each product.
Product loop price: Display the product price for each product.
Product loop rating: Display the product rating for each product.
Product loop thumbnail: Display the product thumbnail image for each product.
Product loop title: Display the product title for each product.

Shop

WooCommerce Shop Template

While any number of widgets can be used, the following widgets are specific to the Shop template.

Template specific widgets

Shop product loop: Display the default product loop saved in the Product Archive tab.

It isn’t possible to build a new product loop in the Shop tab. Rather, the Shop product loop widget displays the Product Archive template saved as the default.

Cart

WooCommerce Cart Template

WooCommerce Cart Template

While any number of widgets can be used, the following widgets are specific to the Cart template.

Template specific widgets

Cart cross-sell display: Display the cart cross-sell products.
Cart form: Display the cart form.
Cart totals: Display the cart totals and checkout button.

Empty cart

WooCommerce Empty Cart Template

WooCommerce Empty Cart Template

While any number of widgets can be used, the following widgets are specific to the Empty cart template.

Template specific widgets

Cart empty – Return to shop: Display the return to shop button.
Cart empty message: Display the cart empty message.

Checkout

WooCommerce Checkout Template

Checkout default layout

While any number of widgets can be used, the following widgets are specific to the Checkout template.

Template specific widgets

Checkout customer details: Display the customer details form.
Checkout order review: Display the order review and place order button.

My account

WooCommerce My Account Template

WooCommerce My Account Template

While any number of widgets can be used, the following widgets are specific to the My account template.

Template specific widgets

Account content: Display the account content.
Account navigation: Display the account navigation links.

Video Tutorials

Below you’ll find quick screencasts covering basic usage of this addon.

Activating the Addon

Product Template

Product Archive Template

Shop Template

Cart Template

Empty Cart Template

Checkout Template

My Account Template