WooCommerce Views helps you develop custom e-commerce sites on any theme. Build everything from the WordPress admin, without editing a single template file.

WooCommerce is feature rich and has amazing back-end functionality. But with this power, comes considerable complexity. Mastering the WooCommerce template system is a time-consuming task. Customizing it requires many hours of reading, coding and testing. WooCommerce Views lets you enjoy all the power, without the pain.

We’ll start with the basics:

WooCommerce Views saves time, but costs money

You get WooCommerce Views when you buy our Views plugin or the entire Toolset package.

If you don’t want to buy right now, you can experiment with WooCommerce Views for free. Create your own, private, free WooCommerce Training Site. You will get a fully working e-commerce site and can learn to build and customize it from the WordPress admin.

Design product templates

WooCommerce’s Single Product template is a complex beast and to tame it, you’ll need to copy templates and probably get your hands dirty with a bit of PHP. WooCommerce Views allows you to fully customize your Product detail page, without wandering outside of your site admin screens.

This is what we want to display on our product detail page:

Variable product detail
Variable product detail

Building your Product detail page is a two step process:

  1. Replace the default WooCommerce Single Product template with your own page template
  2. Create a Content Template to display your Product details

Replace the default WooCommerce Single Product template

Click on the WooCommerce Views option on the admin sidebar.

You’ll see a drop-down listing all suitable templates available in your theme and child-theme directories. This will be set initially to the WooCommerce default single product template, you’ll want to change this to one of your own theme templates. If you are using the Toolset Bootstrap theme, then page.php or page-fullwidth.php would be good choices.

Assign template for WooCommerce Single Products
Assign template for WooCommerce Single Products

Once you have selected the template for your product page, and clicked Save all Settings, take a look at a single Product on your site. You’ll probably see just the title and the body text. All the other elements, such as the add to cart button, and price have disappeared. Now we can create a Content Template for our product detail, to display it just how we want.

Create a Content Template to display your Product details

Goto Views, Content Templates. Click on Add new Content Template. Select the Products Single page for your template and give it a name, e.g Product detail and click to Create a template.

Product detail Content template
Product detail Content template

WooCommerce Views has added some new shortcodes you can use in your Content Templates. Click on the V icon to open the Shortcode inserter, and let’s a quick look at the new shortcodes.

Insert Views Shortcodes
Shortcode inserter – WooCommerce shortcodes

These shortcodes encapsulate complex WooCommerce functionality, and together they allow you build a fully functional Product detail page with just a couple of lines of meta HTML

We’ll take a look in more detail at an example.

We’re using the Toolset Bootstrap theme, which you can download for free from our downloads page.
The classes we’ll be using in the example are standard classes for the Bootstrap grid

Add the following meta HTML to your Content template.

Product detail
[wpv-add-to-cart-message]
<div class="row-fluid">
	<div class="span6">
		Price: [wpv-woo-product-price]
		<div id="buy_options">
			[wpv-woo-buy-options]
        </div>      
    </div>
    <div class="span6">
        [wpv-woo-product-image]
    </div>
</div>
<div id="tabs_product_customized">
	[wpv-woo-display-tabs]
</div>

If you have already created Products on your site, you’ll need to ensure that the Content Template is being applied for these products. In the Content Template Settings sidebar panel, click on the Apply to all link to make all your products use the template.

Apply for all Products
Apply for all Products

So let’s take a look at how our product will display on the front end.

The following image shows a Variable product alongside a Simple product, both using the same Content Template we created above.

You can see how and where the shortcodes you inserted into your view are displayed on the page.

For example, our Purchase options for single product shortcode (outlined in pink in the diagram) displays a quantity field and add to cart button for the Simple product, but for a Variable product, your customer can select a product variation and see the price, image and stock for the individual product variant.

Product detail - Variable & Simple
Product detail – Variable & Simple

The nice thing is that you don’t need to worry about this, once your products are setup, the WooCommerce Views shortcodes will display exactly what you’d expect on the page.

This is what our shortcodes are doing:

  • Price – we have a sales price set, so the original price gets a line though it and the sales price is highlighted. For the Variable product, we get the text “From” followed by the lowest price of all the Variants.
  • Purchase options for single product – Displays the quantity selector and add to cart button for the simple product. For Variable products the Variant dropdown and Variant details are displayed.
  • Product image – the Product Featured image for simple products. For Variables products, the Variant image if available.
  • Add to cart message – place holder for add to cart success and exception messages.

So you can see that with just a few simple shortcodes, you can add complex behavior to your Product detail page. What’s more, using the Content Template Meta HTML, you can display and style your products to match your current theme. In our case, using the Toolset Bootstrap theme, with just a couple classes, we’ve made our Product detail page, fully responsive.

Load products from the database and display them

The WooCommerce Main Shop page, is a WordPress archive View. The Toolset makes it really easy for us to replace the shop with our own product list page.

Shop replacement header

Go to Views, WordPress Archives. Click on Add new WordPress Archive. Select the Products post type loop for your template and give it a name, e.g Main shop listing and click to Add new Archive.

Shop WordPress archive
Shop WordPress archive

Scroll down to the Layout HTML/CSS/JS section and we’ll replace the contents with the following code:

Shop page layout
[wpv-layout-start]
	[wpv-items-found]
		<!-- wpv-loop-start -->
		[wpv-add-to-cart-message]
		<table class="products">
			<thead>
				<tr>
					<th>Products</th>
					<th>Image</th>
					<th>Price</th>
					<th>Buy now</th>
				</tr>
			</thead>
			<tbody>
			<wpv-loop>
				<tr>
					<td>[wpv-post-link]</td>
					<td>[wpv-woo-product-image size="thumbnail"]</td>
					<td>[wpv-woo-product-price]</td>
					<td>[wpv-woo-buy-or-select]</td>
				</tr>
			</wpv-loop>
			</tbody>
		</table>
		<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No products found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]

We’ll also add a little CSS to set our table width to a responsive width, and center our product information:

Click on the Open CSS editor window button, and add the following styles:-

table.products {
 width:100%;
 text-align:center;
}

So now let’s take a look at our shop page. Assuming that you have enabled the default pages for WooCommerce, you should see Shop as a menu option. If this is not the case, then you can set the Shop Base Page from WooCommerce – Settings – Pages – Page Setup.

Shop base page
Shop base page

Let’s look at the shortcodes we have available for our product listing pages:

  • Price – sales price is highlighted if present, and for Variable products, we get the text From followed by the lowest price of all the Variants.
  • Buy or select product for listing pages – Displays add to cart button for the simple product. For Variable products displays ‘Select options’ button which takes the customer to the detail page.
  • Product image – the Product Featured image for simple products. For Variables products, the Variant image if available.
  • Add to cart message – place holder for add to cart success and exception messages.

If we look at our Views results, you can see that our Price shortcode is displaying the Sales price where appropriate and the From price for Variable Products. Similarly, the Add to cart button, will add a Simple product directly to the cart, but for Variable products, the customer will be sent to the Product detail page to select the variant they want to purchase.