When you’re selling exclusive items like event tickets or seasonal items, you can implement progress bars to show customers exactly how many stock items are left. This clear visual of stock status display on the product page creates a sense of urgency or scarcity, motivating customers to buy before the item sells out. Let’s continue to know how this WooCommerce customization adds progress bars to indicate stock status on the product page.
Solution: Add Progress Bars to Indicate Stock Status on the Product Page
The code snippet adds a progress bar to indicate the stock status on the product page of a WooCommerce store.
add_action( 'woocommerce_before_add_to_cart_form', 'ts_stock_status_progress_bar', 10, 0 );
function ts_stock_status_progress_bar() {
global $product;
if (!$product->managing_stock()) return; // Don't show the progress bar if stock isn't being managed
$stock_quantity = $product->get_stock_quantity();
echo 'Only ' . $stock_quantity . ' tickets remaining!<br><progress max="100" value="'.$stock_quantity.'"></progress>'; // 100 being the fill level of the progress bar (the left most value)
}
Output
The progress bar indicating stock availability, will be displayed on WooCommerce product pages as shown in the below image. This display occurs only if the stock status is enabled for the product and a value is set from the admin side to represent the stock quantity.
The above output displays the count of stock items displayed via progress bar. Let’s look into the value of stock quantity set for this product from the admin edit product page.
Similar to the progress bar which is a visual indicator of stock status, you can also integrate additional visual elements such as adding social media icons on the product page. Placing these icons prominently on the product page will help customers to share their favourite items on social media platforms which in turn helps store owners to reach a wider audience.
