Are you looking for a good way to customize woocommerce product pages and improve the user experience? Then you’re here. In this guide, you will learn how to hide out of stock products in woocommerce. Why hide out of stock products in woocommerce? If you run an online business that sells actual products, some products sometimes sell out. In this case, you can: Hide product prices and inventory in Google search and allow shoppers to access product pages even if products are not available. Add the \
This may cause inconvenience to some users, especially selling products within a limited time or changing inventory frequently. Therefore, if you only want to display the products that are currently available and ready for shipment, it is recommended to temporarily hide the unavailable items. Let’s take a look at how woocommerce does this. Methods of hiding out of stock in woocommerce two main methods of hiding out of stock in woocommerce. In woocommerce setup, we will introduce two methods in detail programmatically. 1) In the woocommerce setting, the easiest way to hide out of stock items that cannot be used is to use the woocommerce setting. From the WordPress dashboard, go to woocommerce > Settings > Products > inventory. The no stock display option is displayed. Just activate and click save changes.
Now all products without inventory will be automatically hidden on the next page. This is a good alternative if you want to provide a simple solution in the up selling and cross selling sections of the related products section of the shopping page search results product categories product labels page, and want to hide the products that are not available on this page. However, if you want more flexibility and want to hide out of stock options on specific pages, you need to use some code. 2) Hide woocommerce products without inventory programmatically hide out of stock products in woocommerce programmatically, and filter hooking must be used. If you are not familiar with hooking, it is best to learn more about hooking in this guide and how to make the most of it.
This guide shows several scripts that you can add directly to your site to hide out of stock products. Before you start, you will modify some key files, so it is recommended to back up the site. Also, create a sub theme or use one of the plug-ins to ensure that changes are not lost the next time you update the theme. The script to show today is functions. Must be in a PHP file. To open the file, go to shape > theme editor from the WordPress administration panel. Then the function in the right column. Click PHP file to open the theme function file.
The scripts listed below can be simply pasted into this section. Now let’s look at a few examples of hiding out of stock items in woocommerce. 2.1) how to hide the woocomerce_product_query_meta_query filter hook of out of stock goods on the store archive page, and use the following functions to sho
P the archive page can hide sold out products. The functions of the subtheme. Just add the following script to the PHP file and update the file. add_filter( ‘woocommerce_product_query_meta_query’, ‘shop_only_instock_products’, 10, 2 ); Function shop_only_instock_products ($meta_query, $query) {\/ \/ only return if (is_admin() |is_search() |! Is_shop() $meta_query [] = arrange (\
add_filter( ‘woocommerce_product_query_meta_query’, ‘filter_product_query_meta_query’, 10, 2 ); Only on the functionfilter_product_query_meta_query ($meta_query, $query) {\/ \/ home page of \
add_action( ‘pre_get_posts’, hide_out_of_stock_in_search’ ); Function hide_out_of_stock_in_search ($query) {if ($query – > is_search() & & $query – > is_main_query() {$query – > set (\
Male function hide_out_of_stock_option ($option) {returns \
Another interesting alternative to removing out of stock text from a particular product is to use several CS
Use s to hide out of stock text only in specific products. This allows you to display specific products in the store, but you can disable the purchase option. This may be useful if you are launching a new product and want to make some exaggerated advertisements, or add the option to receive notifications when the project is available again. To delete the out of stock text of a specific item, you must confirm the item ID of the item you want to hide. To do this, navigate to the product on the WordPress Management Dashboard, hover over the product, and copy the product ID under the specific woocommerce product. For example, for us, the product ID is 37.
Male then move to shape > Customize > attach CSS. Male then paste the CSS code and click publish. Don’t forget to replace XX with the post ID number. postid-xx . Out of stock {display: none! Important;} For us, use the following code to hide the out of stock text of a specific product, where the product ID is 37 postid-37 . Out of stock {display: none! Important;} You can also use this CSS code to hide out of stock text in all woocommerce products.
.woocommerce-page . Out of stock {display: none! Important;} Save your changes to complete the customization. Bonus: if the product inventory is not displayed, you can also decide whether to display the product inventory instead of deleting the out of stock products. When you go to woocommerce > Settings > Products > inventory and move in stock display format, three options are displayed. Always display the remaining inventory quantity. The remaining quantity is displayed only when the inventory is small. If you select the third option of \
Functions quadlayers_remove_stock_data_variable_products ($data){
unset( $data[‘availability_html’] );
$return data;
}
add_filter( ‘woocommerce_available_variation’, ‘quadlayers_remove_stock_data_variable_products’, 99 ); That’s all! This will delete the inventory information from the product page of the variable product. See this page for more information. Adding lines of code in the wrong way in the final suggested theme file may damage the site, so remember the following before starting Customization: Always use subtopics to modify the code or script generated by a full backup of your site. If you don’t know how to make it, check the guide. You can test the changes individually to determine what is causing the problem. If you use more than one code, make sure that when you merge code, it works well in all possible cases. To sum up, if shoppers only want to show what the store can buy, hiding unavailable goods may be a good idea for those who sell actual products. This guide shows woocommerce how to hide products without inventory in two ways. Specialty in woocomerce setup
