How to Display the WooCommerce Inventory Status on Shop Page?

Do you want to display the WooCommerce inventory status on the shop page?

If yes, then you have landed at the right place!

WooCommerce only allows you to display the stock status on individual product pages. But if you want to display the stock status on shop or category pages and let the customers know when an out-of-stock product will be back in stock from the shop page, then you need to use a custom code which can be very difficult if you don’t have much knowledge of code. 

Well, don’t worry, I got you covered here!

It can frustrate customers if they waste time going to the product page and seeing that it is out-of-stock. 

So, In today’s article, I’ll show you how to display the WooCommerce stock status of each product on the shop and category pages with the help of the WooCommerce Product Table plugin. So the users will know from the shop page if a product is out of stock and when it will be restocked. 

Preview

Here’s a quick sneak peek of what we’ll achieve today.

How to Display the WooCommerce Inventory Status on Shop Page?

Here I’ll show the step-by-step process to display the stock status of each product on the shop and category pages. 

It’ll be beneficial for your customers to speedily the buying process as they’ll get to know which product is out of stock from the shop page, and they won’t have to go to the product page to see it.

Note: Make sure to enable the ‘Stock Management from the settings of WooCommerce. If you haven’t, please navigate to WooCommerce » Product » Inventory from your WordPress dashboard and check the ‘Enable Stock Management‘ box to follow along with the tutorial.

Follow the following steps to display the inventory status on the shop page. 

1. Install and Activate the WooCommerce Product Table Plugin

Note: You can skip this step if you have already installed and activated the WooCommerce Product Table plugin. 

To install the Woosuite Lead Time plugin, you will need to install the Woosuite Core plugin and activate it with the help of a license key. We have created a Quick Start Guide for you to figure out how to install and activate the Woosuite Lead Time plugin. 

2. Create a New Product Table

Once you have installed and activated the plugin, we need to create a product table to display the stock status of each product on the WooCommerce shop page. So, follow the given steps:

1. Add a New Table

Navigate to Woosuite » Product Table from your WordPress dashboard and click on the Add New Table button. 

Once you click it, you’ll see a screen from where you can create and control the different table settings. 

2. Order Form Display

Give an internal name to the table. You should use a unique name as It will be helpful in case you are working with multiple product tables at a time. 

3. Add Stock Column to the Table 

Now expand the Order Form Information by clicking on the (▾) 

Now, specify the columns you want to add to the table. To add a column, drag it from the Available columns section and drop it in the selected section. 

Don’t forget to add the ‘Stock’ column. This column will display the stock status of each product.

You can also adjust the other settings like the image size and description length. I am keeping them as the default. 

4. Configure Other Settings

Once you have added the columns to the table, now is the time to configure a few more settings to improve the user’s experience. 

1. Bulk Add to Cart

Now expand the Bulk Add to Cart by clicking on the (▾) 

1.1. Select the Add to Cart Display

Now select how to display the individual add to cart button in the table. You can show it in three ways:

• Buttons Only
• Checkbox Only
• Buttons and Checkbox

You can select any of them, but I am selecting the ‘Buttons and Checkbox’. 

1.2. Enable the Quantity Selectors

Enable the quantity selectors in the add-to-cart columns.

1.3. Select the Variations Display

Now select how you want to display the variations in the table. You’ll get three options in the dropdown: 

• Link to Product Page
• Dropdown list in the add-to-cart column
• Separate rows in the table(one per variation

For this tutorial, I select the ‘Separate rows in the table(one per variation)’.

1.4. Select The Position of Bulk Add To Cart Button

Finally, select the position of the bulk to add to the cart button. You’ll get three options in the dropdown: 

• Above table
• Below table
• Above and Below the table

 For this tutorial, I am selecting the ‘Above table.’ It will display the button above the table so users can easily choose the products and add all of them to their cart by clicking the ‘Bulk Add to Cart’ button. 

2. Order Form Controls

Now expand the Order Form Controls by clicking the (▾) 

Once you expand the tab, you’ll get a few options you can customize according to your choice.

2.1. Sort Products

You can select how you want to sort the products in the table and add product conditions to filter the products by categories, tags, and attributes. 

I have kept the sort order as default and haven’t added any product conditions for this tutorial. 

2.2. Product Filters

In the dropdown, you’ll get three options:

• Disabled
• Show based on columns in the table
• custom 

For this tutorial, I have chosen ‘Show based on columns in the table.’

2.3. Page Length

Select the position of the ‘Show [x] products‘ from the ‘Page Length’ dropdown list. I have selected ‘Above table’. 

2.4. Search Box

Select the position of the search box. As we’ll be displaying the table on the shop page, I have enabled its position ‘Above table’ to make it easy for users to search the shop. 

2.5. Product Totals 

Now select the position of the product totals, e.g. ‘Showing 1 to 5 of 10 products’. I have selected ‘Above table’. 

2.6. Pagination Buttons 

Select the position of pagination buttons as ‘Above table’ from the dropdown. 

2.7. Pagination Type 

Now, you need to select the type of the pagination buttons from the dropdown. I have selected the ‘Prev/Next + Numbers’.

2.8. Reset Button 

Finally, enable the reset button. 

6. Save Changes

Once you have created the table, now click on the Save Changes button on the top to save the changes. 

5. Set Woosuite Product Table As Default Shop Page Layout

To set the Woosuite product table as the default shop page layout, go back to the plugin’s General Settings by clicking the back arrow at the top. 

Select the table from the ‘Shop Pages’ and ‘Product Category’ dropdowns we just created. 

6. Save Changes

Now, click the Save Changes button at the top right corner of your screen to save the changes. 

7. Final Results

Now, if you visit the shop page on your store, you’ll see that the products are displayed in a table layout, and there is a ‘Stock’ column that tells the stock of each product. 

Bonus tip:

How to show WooCommerce Stock Quantity

1. Navigate toWooCommerce → Settings → Products → Inventory 
2. Enable ‘Manage Stock’
3. Under ‘stock display format’ choose how you would like to display the stock information.
4. Click save changes.

Conclusion

That’s it for today’s article. 

Now you know how to display the stock status of each product on the shop and the category pages. 

Now it’s up to you to play with the settings and configure them as you want. WooCommerce Product Table plugin will help you display the stock status to your customers so they’ll be aware from the shop page if a product is in stock or not.

Let me know in the comments section if you have any queries. I would love to answer all your questions. 

You can also contact our customer support for quick assistance. Our dedicated customer support team typically replies within an hour or less.
To get started, download the  WooCommerce Product Table plugin today!