WooCommerce Template Builder for WordPress

Create tailored templates for WooCommerce, customizing Product, Archive, Cart, and Checkout pages to boost sales and engagement. The SiteOrigin WooCommerce Template Builder gives you full drag-and-drop control over your store’s layout without touching a line of code.

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 to begin designing your store.

At the WooCommerce Template Builder interface, you’ll find eight specialized tabs for every stage of the customer journey:

  • Product: Design custom single product pages (supports multiple templates).
  • Product Archive: Customize category and tag views (supports multiple templates).
  • Shop: Style your main shop landing page.
  • Cart: Build a high-conversion cart page.
  • Empty Cart: Guide users back to shopping when their cart is empty.
  • Checkout: Optimize the checkout flow for better conversions.
  • Thank You: Create custom order confirmation/success pages.
  • My Account: Personalize the customer dashboard area.

Key Settings and Functionality

Template Selection
Available in Product and Product Archive tabs. Use the drop-down menu to create a new template or select an existing one to edit.

Template Title
Assign a unique name to your template for easy identification within the WordPress admin.

Set as Default
Check this box to assign the current template as the global layout for that page type (e.g., all product pages).

Page Builder Interface
Each tab utilizes the familiar SiteOrigin Page Builder interface. If you’re new to the builder, view our introductory video.

Pro Tip: To get started quickly, click the Layouts button and select the Default Layout for the template you’re building (e.g., “Product Default”).

Customizing Your Shop Templates

1. Single Product Builder

The Product tab allows you to create global or product-specific layouts. Once a layout is ready, you can set it as the default or assign it to an individual product by editing that product and using the Product template drop-down in the right sidebar.

Template Specific Widgets
  • Product “Add to Cart” Button: Custom text and styling.
  • Product Images: Supports Sliders, Lightboxes, and Zoom.
  • Product Data Tabs: Description, Additional Info, and Reviews.
  • Product Upsell & Related Products: Drive more sales with automated product grids.
  • Also Includes: Title, Price, Rating, Meta, and Short Description widgets.
Using the Single Product Shortcode

Display any product using a custom template anywhere on your site (landing pages, blog posts, etc.) using:

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

(The Template ID is automatically provided at the bottom of your Template Builder editor).

2. Product Archive & Category Builder

Customize your Category and Tag pages. You can insert widgets specifically above or below the main product loop to add promotional banners or SEO text.

Template Specific Widgets
  • Product Loop “Add to Cart”: Custom text for Simple, Variable, and Grouped products.
  • Product Loop Thumbnail: Includes sale sticker controls.
  • Also Includes: Loop Price, Loop Rating, and Loop Title.

3. Shop, Cart, and Checkout Builders

  • Shop Tab: Displays your Default Product Archive template. This ensures a consistent look across your main store and category pages.
  • Cart Tab: Features the Cart Form, Totals, and Cross-Sell Display widgets to reduce abandonment.
  • Checkout Tab: Provides the Customer Details and Order Review widgets for a streamlined payment experience.

4. Post-Purchase: Thank You & My Account

  • Thank You Tab: Custom Success/Failure messages, Order Overviews, and Download links.
  • My Account Tab: Organize Account Navigation and Content to improve the user experience for returning customers.

Video Tutorials

Below are quick screencasts covering the basic usage of each addon component.

Activating the Addon

Product Template

Cart Template

Empty Cart Template

Checkout Template

Thank You Template

My Account Template

Advanced Customizations

Developers can override individual WooCommerce Template Builder templates within their theme. Add your custom file to the theme’s /woocommerce folder using the wctb- prefix.

Example: wctb-archive.php will replace the plugin’s default archive template.