Displaying the total sales count for a product on its single product page is one such impactful feature to encourage conversions. In this guide, we will see a simple WooCommerce customization that helps to boost your sales conversion rate by explicitly adding a total sale badge count on the product page. Buyers are more likely to purchase when they see the count of how many people have already trusted and bought the product. Let’s dive in to see how it works!
Solution: Display Total Sales Count for Products in Single Product Pages
The code will dynamically retrieve and showcase the total sales count on the WooCommerce product pages for all products.
// Enqueue custom CSS for the sales count badge
function custom_sales_badge_styles() {
?>
<style>
.sales-badge {
font-size: 14px;
color: #fff;
background-color: #e74c3c;
padding: 5px 10px;
border-radius: 5px;
display: inline-block;
margin-bottom: 10px;
}
</style>
<?php
}
add_action( 'wp_head', 'custom_sales_badge_styles' );
// Add a custom badge for the total sales count on the single product page
add_action( 'woocommerce_single_product_summary', 'display_sales_count_badge_single', 11 );
function display_sales_count_badge_single() {
global $product;
// Check if the product exists and has total sales
if ( $product && $product->get_total_sales() ) {
$total_sales = $product->get_total_sales();
// Display the sales badge
echo '<div class="sales-badge">Sold: ' . esc_html( $total_sales ) . '</div>';
}
}
Output
When a customer visits a product page, the Total Sales Count Badge prominently displays the number of units sold for that product.
Displaying the total sales count is an effective promotional tactic to boost conversions. Similarly, you can also highlight the discount percentage, such as displaying ‘You Save x%’ below the sale price, which can make a significant impact. Such WooComemrce customizations provide customers with a clear understanding of the value they’re receiving.
