How to Add a Custom Stock Progress Bar to Your WooCommerce Products?

Have you ever wanted to show your customers exactly how many products you have left in stock, but more visually and engagingly? Today, I’ll show you how to add a sleek progress bar to your WooCommerce product pages that displays stock levels. Don’t worry if you’re new to coding – I’ll break everything down into simple terms and show you the easiest way to implement this feature!

What Does This Code Do?

This code adds a neat visual progress bar to your WooCommerce product pages that shows how many items are left in stock. Instead of just showing a boring number, your customers will see:

• A progress bar indicating stock levels
• A friendly message showing the exact number of items remaining
• Different messages for out-of-stock or backordered items

The best part? It automatically replaces WooCommerce’s default stock message with this more appealing visual indicator.

Here’s the result:

How the Code Works

Let’s break down what this code does in simple terms:

1. First, it checks if you’re managing stock for the product
2. If the product is out of stock or on backorder, it shows appropriate messages
3. For in-stock products, it:

• Shows how many items are available
• Displays a progress bar (maxing out at 100 units for visual appeal)
• Removes the default WooCommerce stock message to avoid duplication

How to Implement the Code

You have two ways to add this code to your site. Let’s look at both methods:

Method 1: Using functions.php

⚠️ Warning: This method requires more technical knowledge and can break your site if not done carefully!

1. Connect to your site via FTP or file manager
2. Navigate to your theme folder (wp-content/themes/your-theme)
3. Open functions.php
4. Add the code at the bottom of the file
5. Save and upload the file

Method 2: Using the Code Snippets Plugin (Recommended!)

👍 This is the safer and easier method!

1. Install and activate the “Code Snippets” plugin from WordPress.org
2. Go to Snippets → Add New in your WordPress dashboard
3. Give your snippet a title (e.g., “WooCommerce Stock Progress Bar”)
4. Copy and paste the code into the code editor
5. Select “Only run in administration area” as “No”
6. Click “Save Changes and Activate”

Why Use Code Snippets Instead of functions.php?

The Code Snippets plugin is far superior to editing functions.php directly for several reasons:

Safety First:

• There is no risk of breaking your site with syntax errors
• Easy to deactivate if something goes wrong
• You won’t lose your changes during theme updates

Better Organization:

• Keep all your custom code in one place
• Easy to manage multiple snippets
• Add descriptions and tags for better organization

User-Friendly:

• No FTP or file editing required
• Simple interface for managing code
• Built-in PHP validation

Video: How to Add a Custom Stock Progress Bar to Your WooCommerce Products?

Add a Custom Stock Progress Bar to Your WooCommerce Products: Use this code

This code implements a stock progress bar.

// Add custom stock progress bar and handle stock messages
add_action( 'woocommerce_before_add_to_cart_form', 'wpsh_stock_bar', 10, 0 );

function wpsh_stock_bar() {
	global $product;

	// Remove the default WooCommerce stock notice
	remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

	// Handle product stock status
	if ( ! $product->managing_stock() ) {
		return; // Don't show the progress bar if stock isn't being managed
	}

	// If the product is out of stock, display default "Out of stock" message
	if ( ! $product->is_in_stock() ) {
		echo '<p class="stock out-of-stock">' . esc_html__( 'Out of stock', 'woocommerce' ) . '</p>';
		return; // Stop further execution if the product is out of stock
	}

	// If the product is on backorder, display default "Available on backorder" message
	if ( $product->is_on_backorder() ) {
		echo '<p class="stock backorder">' . esc_html__( 'Available on backorder', 'woocommerce' ) . '</p>';
		return; // Stop further execution if the product is on backorder
	}

	// Get the current stock quantity and ensure the progress bar reflects it
	$stock_quantity = $product->get_stock_quantity();
	$max_stock = 100; // Define a maximum stock limit for the progress bar

	// Ensure $stock_quantity doesn't exceed the defined maximum stock
	$progress_value = min( $stock_quantity, $max_stock );

	// Output the custom stock progress bar with appropriate styling and alignment
	echo '<div class="wpsh-stock-bar">';
	echo esc_html( 'Only ' . $stock_quantity . ' in stock!' ) . '<br>';
	echo '<progress max="' . esc_attr( $max_stock ) . '" value="' . esc_attr( $progress_value ) . '" style="width: 100%;"></progress>';
	echo '</div>';
}

// Hide the default stock notice completely if the progress bar is displayed
add_filter( 'woocommerce_get_availability', 'wpsh_hide_default_stock_notice', 10, 2 );

function wpsh_hide_default_stock_notice( $availability, $product ) {
	// If stock is being managed and product is in stock, hide the default stock message
	if ( $product->managing_stock() && $product->is_in_stock() && ! $product->is_on_backorder() ) {
		$availability['availability'] = ''; // Empty the availability message
	}

	return $availability;
}

To style your stock progress bar, you’ll need to add some CSS code. Navigate to Appearance >> Customize >> Additional CSS and insert the CSS code provided below. If you’d like to use your own colors, simply adjust the “background-color” section as needed.

.wpsh-stock-bar {
			text-align: left;
			display: block;
			margin-bottom: 10px;
			margin-top: 10px;
		}

		/* Customize the progress bar's filled portion for WebKit browsers (Chrome, Safari, Edge) */
		.wpsh-stock-bar progress::-webkit-progress-value {
			background-color: #ffcc00; /* Yellow for the filled part */
		}

		/* Customize the background color for WebKit browsers */
		.wpsh-stock-bar progress::-webkit-progress-bar {
			background-color: #ccc; /* Light grey for the unfilled part */
		}

		/* Customize the progress bar's filled portion for Firefox */
		.wpsh-stock-bar progress::-moz-progress-bar {
			background-color: #ffcc00; /* Yellow for the filled part */
		}

		/* For browsers that don't support progress bar styling, apply default background */
		.wpsh-stock-bar progress {
			background-color: #ccc;
			border: none;
			width: 100%;
			max-width: 300px;
			height: 20px;
			overflow: hidden;
		}

Give It a Try!

Adding a stock progress bar to your WooCommerce products is a great way to enhance your store’s user experience. By using the Code Snippets plugin, you can implement this feature safely and easily, even if you’re not a coding expert.

Remember to test the feature on a development site first or during low-traffic hours. Once implemented, you’ll give your customers a much better visual indication of product availability!

Pro Tip: After adding the code, visit one of your products that has stock management enabled to see the progress bar in action. You can adjust the maximum stock display (currently set to 100) by changing the $max_stock variable in the code to better suit your needs.