Out of Stock product to displayed at the end

[kushalkamra]

Hi,

I have some out of stock products, that are displayed on product category pages in between in stock products.

I want Out of Stock products to either not appear on product category pages or in the end of the pages when all the in stock products have been displayed.

Please advise with a solution.

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

The only that is possible is to hide the out of stock products.
Can you give us an example category page where you have some of the out of stock products?

-Rui

[kushalkamra]

Hi,

Below is a category page with Out of Stock Products

https://mydhaba.in/product-category/food-and-beverages/edible-oils/

Please suggest a solution.

Thanks

[David Martin – Support]

You can hide those using:

.tax-product_cat li.outofstock {
    display: none;
}

[kushalkamra]

Hi,

Thanks, this is working as expected for category pages.

Can we also hide them from the related products list shown on product page ?

[Rui Guerreiro – SUPPORT]

Try to add this code.

.single-product .product-related-wrap .outofstock {
    display: none;
}

-Rui

[David Martin – Support]

Then you would use:

.single-product li.outofstock {
    display: none;
}

[kushalkamra]

Hi David,

Implemented your code

.single-product li.outofstock {
display: none;
}

This is not showing the products as expected, but instead it is adding empty space for those products in list. Please check at link

https://mydhaba.in/shop/food-and-beverages/extra-virgin-olive-oil-ekin/

[Rui Guerreiro – SUPPORT]

This reply has been marked as private.

[kushalkamra]

Hi Rui,

As you can see from attached image. When products are scrolled, it is adding empty space at the end. Earlier it was scrolling only till the products were present.

As suggested I’ve tried after clearing Browser cache and page cache as well.

Thanks

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

I see what you mean, in that case a css solution won’t work. It would need a PHP customization that is outside our support scope.

-Rui

[Damsho]

/**
* Sorting out of stock WooCommerce products - Order product collections by stock status, in-stock products first.
*/
class iWC_Orderby_Stock_Status
{
public function __construct()
{
// Check if WooCommerce is active
if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
add_filter('posts_clauses', array($this, 'order_by_stock_status'), 2000);
}
}
public function order_by_stock_status($posts_clauses)
{
global $wpdb;
// only change query on WooCommerce loops
if (is_woocommerce() && (is_shop() || is_product_category() || is_product_tag())) {
$posts_clauses['join'] .= " INNER JOIN $wpdb->postmeta istockstatus ON ($wpdb->posts.ID = istockstatus.post_id) ";
$posts_clauses['orderby'] = " istockstatus.meta_value ASC, " . $posts_clauses['orderby'];
$posts_clauses['where'] = " AND istockstatus.meta_key = '_stock_status' AND istockstatus.meta_value <> '' " . $posts_clauses['where'];
}
return $posts_clauses;
}
}
new iWC_Orderby_Stock_Status;
/**
* END - Order product collections by stock status, instock products first.
*/

Put this code in the function.php and it will show your out of stock products at the end.

[Rui Guerreiro – SUPPORT]

Thanks @Damsho for providing the code.

-Rui

[Damsho]

Would it be possible to integrate this function in atelier theme?
So other people can just set on or off for showing out of stock products at the end of the catalog?

[Rui Guerreiro – SUPPORT]

@Damsho I will forward the suggestion to the development team so can consider it for a future update.

-Rui