The WooCommerce Templates addon allows you to create custom templates for the Product, Archives, Shop, Cart, Checkout, and My Account pages.
Most themes are compatible, however, themes that have heavily modified WooCommerce template functionality might experience minor display issues. If you’re unsure whether your theme is compatible, feel free to reach out to us via email on [email protected], we’ll gladly take a look.
- SiteOrigin Premium Plugin
- Page Builder by SiteOrigin Plugin
- Optional: SiteOrigin Widgets Bundle Plugin
To make use of this addon, in your WordPress install, go to SiteOriginPremium Addons, locate WooCommerce Templates and click the Activate button.
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.
At SiteOriginWooCommerce Template Builder you’ll find seven tabs:
- Product: supports multiple templates
- Product archive: supports multiple templates
- Empty cart
- My Account
Within the available tabs, you’ll find the following settings and functionality:
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.
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.
Click to save your template when ready.
The preview button is in the form of an eye icon. Click to preview your 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.
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.
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. Adjust the Single product button text as required.
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 reviews: Display the product review form and reviews.
Product data tabs: Tabs displaying the product description, additional information and reviews.
Product title: Display the product title.
Product upsell display: Display the upsell products.
Related products: Display the related products.
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.
While any number of widgets can be used, the following widgets are specific to the product archive template.
Product loop “Add to cart”: Display the add to cart button for each product. Adjust the Simple product button text, Variable product button text and Grouped product button text as required.
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.
While any number of widgets can be used, the following widgets are specific to the Shop template.
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.
While any number of widgets can be used, the following widgets are specific to the Cart template.
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.
While any number of widgets can be used, the following widgets are specific to the Empty cart template.
Cart empty – Return to shop: Display the return to shop button.
Cart empty message: Display the cart empty message.
While any number of widgets can be used, the following widgets are specific to the Checkout template.
Checkout customer details: Display the customer details form.
Checkout order review: Display the order review and place order button.
While any number of widgets can be used, the following widgets are specific to the My account template.
Account content: Display the account content.
Account navigation: Display the account navigation links.
Below you’ll find quick screencasts covering basic usage of this addon.