Black Friday & Cyber Monday SUPER SALE ALL WEEK:
Grab 40% OFF on plugins
Days
Hours
Minutes
Seconds

How to Add Progress Bars to Indicate Stock Status on the Product Page?

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.

How to Add Progress Bars to Indicate Stock Status on the Product Page? - Tyche Softwares

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.

How to Add Progress Bars to Indicate Stock Status on the Product Page? - Tyche Softwares

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.

Browse more in: Code Snippets, WooCommerce How Tos, WooCommerce Tutorials

Share It:

Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x