Improving our digital product WooCommerce product pages

WooCommerce is a great plugin, we moved from WPeStore to WooCommerce almost 2 years ago now and even though it’s taken time to set up and to find a theme which I like. It’s worth the effort.

In the July 2016 transparency report I mentioned that I had improved the ‘products loop’ by adding consistently designed thumbnails. This was great and the store looks great.

I also wrote about 10+ reasons why I removed 9 plugins for sale on CodeCanyon back in May.

In that post, I touched on revenue vs fees through selling on CodeCanyon. The charge they take from the Elite Authors is still 30%, but as much as 50% for newer authors. So I sacrificed around $300-500 a month in CodeCanyon revenue to be able to sell these products direct and be in control of the dynamics. Breaking down the actual revenue from direct sales vs historical on CodeCanyon I’ll write about in another post.

Improving the digital product page

What I wanted to write about here is an update on the improvement of the digital product page design. This includes some before and afters and some technical pointers for anyone wanting to do the same. In the 10+ reasons why I removed 9 plugins for sale I listed the following things CodeCanyon provided (to justify their 30-50% cut). As a reminder:-

• Targeted traffic – millions of buyers are registered on their marketplace
• Standardised item pages with easy links to demos <— this post is about this point in the ‘What they give Authors’
• e-Commerce capability (handle store, checkout, etc) – WooCommerce can do everything and possibly more than the CodeCanyon system.
• “You do the creative, we do everything else”
  • They do customer help / support (optional by authors)
  • They set the price for items (low, like eBooks) This is BAD
  • They process refunds (and pay for them from their share of the sale)
  • They pay the tax (VATmoss) For now..

The old digital product page

First, lets take a look at a ‘before’ screenshot of one of the digital product pages. Check out the new look by clicking any of the products on the store.  The first one I have spent time adding content to is WPeddit Plugin and over the next few days I’ll continue to work on the content of these pages (now the design has been improved).

So there it is…   breaking it down into what I liked and what I didn’t like is below.

P.S The other big thing was that the actual CONTENT of the product pages really sucked. Less than 50 words, no demo link (even through there is a demo site with a lot more content about the product). No social proof about how many people had purchased it or what they think (reviews).

Which new customer would purchase a product when the information was that weak.

The old design did have some good points though:

What I liked about the old digital product design

• The overall theme is nice and crisp, the design is nice
• Social Share buttons make the product easy to share
• Adding extra photos to the products really looked nice
• The product photo gallery had a nice lightbox effect
• Looks and feels nice, like amazon does

What I didn’t like about the old digital product design

• It was good for physical products. Like t-shirts. But not good for digital products
• I was asked a lot about “Where’s the demo for the plugin” – there wasn’t a way to add a ‘View Demo’ button. Just Add to Cart.
• Reviews – I hadn’t enabled them in WooCommerce settings (whoops)
• Email to a Friend was there twice (once in the share buttons too)
• SKU and Category – not strictly needed when the store is a store selling digital products
• No ‘Sales Count’
• The review rating (when reviews were made) used grey stars (to fit into the overall theme design)
• Other content blocks – like features and which WordPress it uses was missing (no easy sidebar widget)

So I set about digging through the theme files for the theme I’m using and went about making some edits to improve these pages.

The new digital product page

So here it is. The products themselves all need good content to explain the product. That’s what I’ll be improving throughout this month. But here’s a look at the new page design

Quite a move around. The majority of the core files of the theme are the same. I just worked on adding more sidebar information. I also added when the product was last updated and when it was created. I still need to update the ‘created’ dates for the products. This date is when it was created on the WooCommerce store. The actual date of creation was a lot earlier for some of the plugins which moved over from CodeCanyon.

Some other important changes

• I added a link to the documentation site into each product description. People have no excuses for not finding it now 🙂
• I removed the SKU and additional information which didn’t add anything to the page (like double email to a friend options)
• I changed the review stars from grey to yellow (not a CSS tweak)

I also updated the total sales count to include the sales from CodeCanyon. Finally I opened up reviews and added a starter for 10 review on the products.

So, what do you think of the new design? Let me know in the comments.

How to change your digital product design

If you use WooCommerce and you have a theme whose product pages don’t quite cut it you may want to tweak them. But how do you go about doing this? Themes can be full of files and it’s difficult to know where to look to make changes that then apply on your site. Especially when using WooCommerce.

First up. I recommend doing this in a child theme of your theme so that you don’t lose any updates if your theme updates. Read how to create a child theme.

OK, done that? Great.

Given I was changing the WooCommerce files. I wanted to look into the WooCommerce templates in the theme. If your theme doesn’t have a /woocommerce/ folder then download the WooCommerce plugin and copy over the ‘templates’ contents from the WooCommerce plugin into a folder /woocommerce/ in your theme.

Assuming your theme does have a /woocommerce/ folder it should look something like the below. I’ve highlighted the main files I edited for the improvement to the pages

You’ll see I created a couple of backups ‘content-single-product-bk.php’ and ‘single-product-bk.php’ just in case I goofed up.. The main changes I made in these files are:-

• I changed the col-md-x bootstrap sizes to be less for the main column and more width for the sidebar
• I added extra content into the sidebar area.
  • I copied out the contents of rating.php (below) into the sidebar below the add to cart part (after declaring the global $product; variable in the PHP)
  • I added the sales count for each product with some custom PHP and HTML
  • I replaced the rating-active.png in the themes /images folder to have yellow stars not grey (I did this in affinity designer)
• I put in some extra dividers with new classes (so I could style things)

Those templates, certainly in my theme, are pretty complicated to handle all the settings and options.  If you dig into these two files you’ll see there’s a lot of do-actions etc and then realise a lot of the actual good stuff comes from inside the ‘single-product’ folder.

Coding aside: How to add the WooCommerce product sales count to your product page (like I did above)

Let’s take a look at the contents of the single-product folder and then I’ll go into what I tweaked here..

So what did I do in here. Apart from cause a bit of a car crash. I’m not selling this theme so I did this in a ‘just make it work for me’ way. An overview of the changes I made are:-

• I added a couple of content blocks of HTML to the simple.php (to add the feature list with ticks) and the view demo button
• A new custom field was created for each WooCommerce product to hold the demo page URL
• This new custom field was accessed and outputted to the product page
• Grabbing it via the usual method gave me broken links. So I did a quick JS workaround (using data-demo) variable and onclick events (whoops)..
• I copied in the variation-add-to-cart-button.php (this wasn’t in the theme /woocommerce/ so I copied over from the WooCommerce plugins /templates/ folder
• I made the same edits that I did to simple.php

Last but not least (and probably the most important part) I did some CSS styling of the new elements. For this I wanted to ‘box up’ my sidebar area and the main image to give a nice compartmental feel.

Hopefully this type of insight into the ‘how to’ helps you if you want to do the same. I also hope you like the new product page designs and they help you to find out more information about each product that I have available to purchase.