How to re-write the WooCommerce Single Product Page

You may have seen in the latest transparency report that I’ve revamped the site, as well as moving to a much cleaner WordPress Theme for use on the site.

For 2017, Epic Plugins is the place where you can buy awesome WordPress Plugins. The site is now built on storefront (the official WooCommerce theme) with a customised landing page (written in bootstrap and saved as a landing page template).

Doing it this way has the following benefits:-

• A really nice homepage (or at least I think so)
• Cart, Checkout and My Account pages which are really nice 🙂
• It’s also really nice on mobiles and tablets

Single Product Pages

This is where the fun stops. WooCommerce is great. It’s amazing if you have a store with a product gallery (different t-shirts from different angles). We are going to work through this designing a new product page by taking our latest plugin. Notify Me.

The layout of the page out of the box with the ‘product thumbnail’ is shown below

It then runs down to the description and reviews. Tabbed to the side.

This is a nice layout for a website with a lot of reviews (I don’t get many on the plugins – not quite sure why?!) but indeed there’s my own review on each product…

So you want to redesign your product page?

I do. I did. I wrote a detailed post about it here for the WooPress Theme. But the Storefront is different (and uses just the standard WooCommerce templates). This means there’s no /woocommerce/ folder in the storefront theme.

Here’s the steps (and code snippets) detailing how I converted the pages above to the final design you see on the site today.

Step 1 – Check your theme options!

Before deciding whether you need to dive in and start editing the templates you should review the theme options to see if they have any layout choices. OK done that? Seen there’s no options apart from grabbing extensions (good pricing model, Woo, good pricing model).

Step 2 – Add a ‘product’ gallery.

The first thing I wanted to do was make sure I was fully utilising the WooCommerce template. My plugins have their ‘banner’ for the shop. This is the shop list view

Which is nice (and where possible consistent) but they product tiles don’t give much away about the product. So I’ve now added a bunch of ‘screenshots’ to the Notify Me add on.  How does the product page look now (I also added some tags to the product)

OK it’s coming along. I find the screenshots quite hard to see but it does give an option for potential customers to click the image and see some screenshots. Surely not a bad thing.

Step 3 – Add a Product Short Description

Something still feels like it’s missing though in the ‘headline’ part of the product. Aha. It’s a Product Short Description

Filling in the short description is good. It’s added a nice new… well short description to the product.

OK – the top half of the product page is starting to take shape. Although personally I prefer having a wider image area and a smaller area for the ‘Description’.

Step 4 – Add Custom CSS to the Theme to prevent 

The product’s HTML layout might be something you can modify with CSS to get it looking the way you want. This is the easiest way to approach changing themes if they’re not quite right for you. It avoids editing the template files (i.e. creating your own /woocommerce/ folder and trying to understand what’s going on the the woocommerce templates (they’re a bit of a headf*ck) but more on that later (maybe).

Looking at the single product page we have the following HTML (right click in google chrome and inspect the element)

So you can see from the layout that the product’s images block has the class”images” which is wrapped in an overall ‘product’ class. Any woocommerce page also has the body class of ‘woocommerce’. Putting this together you can add custom CSS to the theme.

.woocommerce div.product .images{
//custom CSS goes here
}

But what custom CSS should you put there. Another image might help. In Google Chrome you can see the style which is already applied to an element by looking at the right hand panel

This shows that it’s currently a random width (30.43%) and the product summary also has a width CSS shown below

div.product .summary {
    width: 65.2173913043%;
    float: right;
    margin-right: 0;
    margin-bottom: 3.706325903em;
}

So putting this together, say I want to flip my image size and top summary around I’d do the following CSS

.woocommerce div.product .images{
    width: 30.4347826087% !important;
}
.woocommerce div.product .summary {
    width: 65.2173913043% !important;
}

You can see how this look ‘on the fly’ by changing the values in the right hand side of the ‘inspect element’ before you save them into the Theme Settings. Through doing this I can see that 65% and 30% are probably a bit too wide (and narrow) respectively. See the grab below

I settled on 45% for the summary and 50% for the images. As shown below

.woocommerce div.product .images{
    width: 50% !important;
}
.woocommerce div.product .summary {
    width: 45% !important;
}

I then open up the Theme Customiser and then enter it into the Custom CSS (tip – switch to the relevant product page first in customiser). I’ve added this to any of the styles which I’ve added for other means (such as making my blog content larger font)

OK Great. Lets see how it looks now the changes have been saved down and the site is visited again.

It’s starting to get there now 🙂 which is great. There’s still some work to do though. First lets recap what we’ve done so far:-

• Step 1 – Checked the theme options to see if there’s any alternative layouts (no luck)
• Step 2 – Added a product gallery (of screenshots)
• Step 3 – Added a product short description
• Step 4 – Added Custom CSS to change the layout without editing PHP

OK good.

Step 5 – CSS to remove any ‘unwanted’ areas. 

I’m not a fan of the superfluous ‘Product Description’ at the top of the product description. So I’ll hide that with CSS. But, it’s in a <h2> element without any class or ID assigned to it. Dammit.

For this it’s a clever little CSS tip, I only want to hide the first <h2> under the product description tab so I can do a bit more inspection of elements and find out the code to add is the following

.woocommerce-Tabs-panel--description h2:first-of-type { display:none; }

This can also be used to hide different elements by using the :nth-of-type(0) to hide the first instead of first-of-type (you can hide the second h2 by doing :nth-of-type(1)) for example.

So, the layout now is getting there. It’s quite nice. But there’s a few more things I want to accomplish with the layout. We sell digital products here at epic plugins. So having the product listing and screenshots is great. However potential customers also tend to like to see a demo of the plugin in action.

Step 6 – Adding a ‘Demo’ button.

This is where delving into the templates is needed.  If you take a look in the /woocommerce/ folder of your theme (or in the /templates/ folder of the WooCommerce plugin you’ll see the folder that produces the single product is saved in a folder called /single-product/

There’s various different templates depending on the type of product.

So editing each one can be a bit messy. Although you should be able to notice there’s a ‘do_action’ in that file.

do_action( 'woocommerce_before_add_to_cart_button' );

This tells me that I can write a function for in my themes (child themes) functions.php. This can also be added by writing a quick plugin (to save it being over-written by your theme update) and also allows me to transfer the code to my other site.

Here’s an example plugin.php

Plugin Name: WooCommerce - Before Add to Cart
Plugin URI: http://epicplugins.com
Description: Adds an extra button to the single product page
Version: 1.0
Author: epicplugins


function epic_add_new_button(){
   //your output code goes here. 
}
add_action('woocommerce_before_add_to_cart_button','epic_add_new_button');

You see the ‘add_action’ part of the code? this tells WooCommerce to produce the output before the add to cart button. Great. My code does a couple of extra things:-

• I save the demo URL in a custom field called ‘epic_product_demo’
• It grabs this for the particular post and includes this as a link.

The ‘Final’ code for the (very simple) plugin is below.

Plugin Name: WooCommerce - Before Add to Cart
Plugin URI: http://epicplugins.com
Description: Adds an extra button to the single product page
Version: 1.0
Author: epicplugins

function epic_add_new_button(){
        global $post;
	$demo_link = get_post_meta($post->ID, 'epic_product_demo',true);
	echo "<div class='epic-demo'><a href='".esc_url($demo_link)."' target='_blank'>" . __('View Demo') . "</a></div>";
}
add_action('woocommerce_before_add_to_cart_button','epic_add_new_button');

Remember, a plugin is just like a portable ‘functions.php’ file so writing into that gives me a way to move it easily.

Step 7 – Styling the button

OK, ideally this would also be in the plugin (so I can move it over to another site without having to re-do the CSS in the customiser) but given it’s just one button. I’m doing it via adding to custom CSS on the theme customiser. I took the same CSS from the Add to Cart button and copied it. Simply changing the background colour to my secondary colour.

.epic-demo{
    float: right;
    margin-left: 20px;
    border: 0 #6d9c56;
    background: #6d9c56;
    color: #fff;
    cursor: pointer;
    padding: .6180469716em 1.41575em;
    text-decoration: none;
    font-weight: 600;
    text-shadow: none;
    display: inline-block;
    outline: 0;
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    border-radius: 0;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.3);
}

What’s the end result? See for yourself below