However, customers will still be able to view these products if they have the direct URL. This will cause any out of stock products to be hidden from your shop page, category pages, and search results. What I would like to do next is hide the out of stock items on the category. To do this, go to WooCommerce > Settings > Products > Inventory and check the box next to Hide out of stock items from the shop page. Using a code that 'hides' rather than 'doesn't pull' out of stock products just shows empty spaces where the products would have been shown. If you have a plan to hide the out-of-stock items from a specific page please read. I can't just hide all out of stock products via the WooCommerce settings page as they need to be visible in other areas of the site. If you want to hide all out-of-stock items then you have this option under wp-admin > WooCommerce > Settings > Products > Inventory section. Navigate to Settings under the WooCommerce tab. Thus far the shop pages only display in stock items. The code you have shared is to modify the products shortcode’s output. Hide out of stock products Head to your WordPress admin dashboard. I am using several filters to hide the out of stock products from the display. This can be done by installing the plugin and adding the script to either the header or footer area using the plugin settings. My client sells one item products and has a page dedicated to displaying all out of stock items that are referred to as previously sold. js assets file, you can use the following plugin to add the JavaScript to the header or footer area of your website. The Inventory Options section of the Configuring WooCommerce Settings documentation provides more details. You will need to add the jQuery code snippet ‘woocommerce-disable-out-of-stock-variations.js’ in the. Out of stock items can be hidden from the catalog by ticking this option in WooCommerce > Settings > Products > Inventory. I was asked how to go about changing the colour of the text “Sold Out”. js file in your theme – see below for details. It’s always a good idea to take a backup of your functions.php file in case anything goes wrong – you can just copy the old code back in again.ĭon’t copy the jQuery code into your functions.php file – this needs to be copied into a. The PHP code snippet ‘woocommerce-disable-out-of-stock-variations.php’ should go in your active theme’s functions.php file.Īdd it to the bottom of the file, before any closing ?> characters. We’ve also added the text “sold out” to the variant drop-down list as a clear indication of no stock to our customers.Īs well as adding the code block below, you will of course have to tell WooCommerce to manage the stock for variants in the back-end, by editing the product variants. ![]() Check the Out Of Stock Visibility option to hide out of stock items from your catalog. Now the Colour variant drop-down box has the “Red” variant greyed out so customers can’t click on it. Go to WooCommerce -> Settings and navigate to the Products tab. WooCommerce Out Of Stock Variant Greyed OutĪfter the code block below has been added, you can see the results in the drop-down variations box. We don’t want customers to waste their time clicking on a product that has no stock. WooCommerce Clickable Out Of Stock Variantsīy default, WooCommerce allows customers to select an out-of-stock product, adding the words “Out of stock” just under the price. We can unset the availability_html from the product variations so it’s not there to be output on the product page.It also adds a helpful “Sold Out” to the dropbown list informing your customers. ![]() Let’s try to use that filter instead, and we’ll completely remove the availability / stock data from the variation data. If we go back to our variable product class, we’ll see that there’s a filter wrapped around all of the data output by a variation, including the stock HTML we referenced earlier: woocommerce_available_variation Regardless, we want to something that works with the current version of WooCommerce, so let’s try to find an alternative. As you all know, there is a WooCommerce setting for that, right under Settings > Products > Inventory called Out of stock visibility. AJAX-based plugins display results almost instantly when users apply each filter without reloading the page. Ensure customers get search results fast. It is better to use plugins that automatically hide filters that only show items that are out of stock. PHP Snippet 1: Override Out of Stock Visibility Setting On a Specific WooCommerce Product Category Page. It sounds like you may have the option enabled to still sell products on. I specifically need to hide them only in cross sell products which suggest to customers in cart page. However, if you plan to upgrade to WooCommerce 2.7 right away, this snippet will work in WooCommerce 2.7 automatically as it changes the way the product page is displayed. Check whether all categories include products. I already know we can hide out of stock products via WooCommerce > Settings > Products but that will hide all out of stock products even in their own pages and categories.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |