How to add the WooCommerce total sales count to your product page

You may want to display the WooCommerce total sales count for your products.

When re-designing my product pages, you can read what I did here, I wanted to add on the front of the site the ‘total sales’ of the product.

This gives me a good Social Proof element that people can see how many purchases the product has had previously.

Doing this is quite easy. The code below is how I did it (tweak the PHP variable names to avoid any conflicts)..

 <div class="product-sales epic_box"> 
    <i class="fa fa-shopping-cart"></i>
    <?php 
    $count = get_post_meta($post->ID,'total_sales', true);
    $text = sprintf( _n( '%s Sale', '%s Sales', $count, 'wpdocs_textdomain' ), number_format_i18n($count));
    echo $text;
    ?> 
 </div>

What does this do?

  • It adds a sales box (styled appropriately)
  • The total sales of a product is in the post meta ‘total_sales’
  • It adds appropriate ‘Sales’ or ‘Sale’ depending on how may sales
  • It applies number formatting

Styling the sales box

To have this display nicely (ok, pretty basic styling) on the item pages like below, I added some simple styles (and also used the font-awesome icon set)

sales-box

.epic_box {
 padding-top: 12px;
 border: 1px solid #ddd;
 padding: 10px;
 border-radius: 8px;
 margin-bottom:10px;
}
.product-sales{
 font-size:25px;
 font-weight:600;
}
.product-sales .fa{
 margin-right:10px;
}

So that’s all there is to it. To recap on the very short process to add the total sales count you

  • Get the custom field data using the get_post_meta(); WordPress function passing the $post->ID;
  • Output this onto the page using the _n(); WordPress function
  • Style it appropriately

Pro-Tip

You may feel a bit sad that by doing this you expose all your weakly performing products sales figures. 0 Sales. Ouch. You can suck it up and start selling your products through good marketing and using a cool customer relationship management tool (like Zero BS CRM). Or you can manually edit the figures.

To do this go to Edit Product then ‘Screen Options’ at the top. Make sure ‘Custom Fields’ is ticked. Then scroll down and find the total_sales meta and you can manually edit this number.

screen-options

Disclaimer: this isn’t something I have done to falsify the sales counts, however for the plugins I removed from CodeCanyon I updated their sales count to reflect the sales they’ve had on CodeCanyon..  It may mess with your WooCommerce reports if you edit this meta (I’ve not checked, I suspect it doesn’t).


Comments

3 responses to “How to add the WooCommerce total sales count to your product page”

  1. […] But first, hey, the last post on the blog isn’t the last transparency report. Winner. I wrote all about how I updated the item pages and how to expose some of the WooCommerce figures on the front end (like adding the total WooCommerce sales number) […]

  2. pushka Avatar
    pushka

    This includes non-completed items (direct-deposit, but not confirm-paid) – can it be updated to show how many sales, rather than how many times it has been checked out ?

  3. craig Avatar
    craig

    Is there anyway to add a sold date (all my products are individual, one of a kind items)….

    So it shows this for example

    Sold: July 2018

Leave a Reply

Your email address will not be published. Required fields are marked *