WooCommerce is a great system for creating online stores, but it has its basic shortcomings, although you can easily fix them all.
For example, if you don’t fix it, it shows out-of-stock product variations or doesn’t show only the cheapest price when it’s a variable product.
Table of Contents
The problem
One of the mistakes of WooCommerce, in my opinion, that can make you lose customers, is to display in the store products with out-of-stock inventory.
Why is this a problem? Well, because you show the customer a product in the store, apparently like the rest of the products…
But when the customer clicks to view, and even buy the product, it turns out that they cannot.
And it is a problem because you have made the customer navigate to a page where you have provoked a disappointment, a dissatisfaction, and negative emotions are expensive in an online store.
Unless you have well studied the strategy so that you offer an alternative product on the same page of the out of stock product, the customer is very likely to leave your store, thinking that he is wasting his time in your Ecommerce, that you offer products that you do not have, and most likely will not return if this was his first experience in your online store.
The solution
To solve this problem you have to hide the products when their inventory is out of stock and to show them again when there is stock.
And the way to achieve this is with a bit of code, which we will add to our customizations plugin so that it is not lost if we change theme, but you can add it too to the functions.php file of your theme(child), and this is the code:
/* Hide out of stock products */
add_filter( 'woocommerce_product_query_meta_query', 'wphelp_hide_out_of_stock_products', 10, 2 );
function wphelp_hide_out_of_stock_products
( $meta_query, $query )
{
// Only on archive pages online store
if( is_admin() || is_search() || ! is_shop() ) return $meta_query;
$meta_query[] = array(
'key' => '_stock_status',
'value' => 'outofstock',
'compare' => '!='
);
return $meta_query;
}Code language: PHP (php)Save the changes and the product will no longer be displayed on all product catalog pages, such as the store page and the search results archive.
If you want the out of stock products to be hidden only on the cover page, the code would look like this:
/* Hide out of stock products on shop landing page */
add_filter( 'woocommerce_product_query_meta_query', 'wphelp_hide_out_of_stock_landing_page', 10, 2 );
function wphelp_hide_out_of_stock_landing_page( $meta_query, $query )
{
// Only on home page
if( is_front_page() ){
$meta_query[] = array(
'key' => '_stock_status',
'value' => 'outofstock',
'compare' => '!=',
);
}
return $meta_query;
}Code language: PHP (php)Another possibility would be that you only want to hide out of stock products on the search pages, in which case the code will look like this:
/* Hide out of stock products on search bar */
add_action( 'pre_get_posts', wphelp_hide_out_of_stock_search' );
function wphelp_hide_out_of_stock_search( $query )
{
if( $query->is_search() && $query->is_main_query() ) {
$query->set( 'meta_key', '_stock_status' );
$query->set( 'meta_value', 'instock' );
}
}Code language: PHP (php)And, also, you can even hide out of stock products in the list of related products displayed on individual product pages, also very convenient, to avoid customer annoyance.
The code would be this:
/* Hide out of stock related products */
function wphelp_hide_related_out_of_stock( $option ){
return 'yes';
}
add_action( 'woocommerce_before_template_part', function( $template_name ) {
if( $template_name !== "single-product/related.php" ) {
return;
}
add_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'wphelp_hide_related_out_of_stock' );
} );
add_action( 'woocommerce_after_template_part', function( $template_name ) {
if( $template_name !== "single-product/related.php" ) {
return;
}
remove_filter( 'pre_option_woocommerce_hide_out_of_stock_items', 'wphelp_hide_related_out_of_stock' );
} );Code language: PHP (php)That’s all for today! I hope you have learned something useful for your WooCommerce online store that will prevent you from angering your customers by leading them to out-of-stock products when you don’t have a strategy to show them alternative products.
