Prestashop: [IMPROVEMENT] Display 'Out of Stock' on Catalog pages

[Bewitching-Co]

Is your feature request related to a problem?

When I am looking at a list of products in a category, there is no indication of the products status unless you click quick view or go directly to the products page. While scrolling thru a list of products in a category, there is NO indication of whether a product is in stock or out of stock without an additional action, either via quick view, or clicking on the product and going to that product's page. Labels are enabled in Back office.

Describe the solution you'd like

A simple label on each product while in list view indicating that a product is in stock or out of stock, like ver 1.6 had.
I thought this was included on stock ver 1.7, but apparently it is not.

Specs:

Add a toggle on the Shop Parameters > Products settings > Products stock page:
"Display out-of-stock label on product listing pages" in _Admin.Shopparameters.Feature_: Yes/no
Help text under the toggle: "Note that the label will be displayed only if backorders are denied." in _Admin.Shopparameters.Help_
The toggle is on yes by default
The out of stock label should be displayed only if the product stock is <= 0 AND if the order of out of stock product is denied.
If the product has combinations, the out of stock label should be displayed only if all combinations are out of stock (stock is <= 0 AND if the order of out of stock product is denied)

Be carefull there is 2 ways to define if the order of out of stock product is allowed or not:

• In Shop Parameters > Products settings > Allow ordering of out-of-stock products
• In the product page > Quantities or combinations tab > Availability preferences

https://github.com/PrestaShop/prestashop-specs/pull/153/commits/310d4a9f03b0c752f15064fbbc649095fb88e978

Additional context

Version 1.6

Version 1.7

[prestashop-issue-bot[bot]]

Thanks for opening this issue! We will help you to keep its state consistent

[sarahdib]

@PrestaShop/product-team Could you check this improvement ?
Thank you!

[prestascott]

Hi @Bewitching-Co.

Thank you for your improvement request!
This is a nice idea, I'll add it to the related Epic. :)

Not showing that the product is 'Out of Stock' on this page is a really bad UX. It's as if a merchant is putting an item in its shelves but doesn't sell it. Customers of the merchants will have a negative experience towards their online shopping on merchants' e-ecommerce website. The availability of the product must be clear on this page and on the product page.

Here is my design proposition where we can use labels on 1.7:

We can even emphasize the fact that the product is 'Out of Stock' by reducing the image opacity:

[MatShir]

Indeed it is a nice idea, we just need to keep in mind to make it optional.

[NeOMakinG]

@PrestaShop/prestashop-maintainers I need a backend dev for the "optional" feature, I can do the front.

@PrestaShop/product-team How do we display the out of stock label?

[marionf]

It's rather a question for @PrestaShop/ux-team

[Progi1984]

@NeOMakinG Backend in da place ;)

[NeOMakinG]

@Progi1984 we should add a toggle on /configure/shop/product-preferences/ on Product stock part, Show out of stock label on listing pages, and I should have access to this parameter variable inside smarty

[Progi1984]

@NeOMakinG I create the PR this afternoon :) and you continue on it :+1:

[marionf]

Maybe we can display another wording than "out of stock" if the product has combinations and is available in other combinations like "available with different options" ? Otherwise I am afraid the customer thinks the product isn't available at all while it's only the default combination

[Progi1984]

@marionf What is the default value for "Show out of stock label on listing pages" ?

[marionf]

It should be enabled by default, I completed the specs part of the issue.

@Julievrz wdyt of the new label "Display the "out of stock" label on the product's listing pages" and the help text under the toggle "Displayed only if the order of out of stock product is denied." ?

[Julievrz]

I suggest the following wording:

"Display out-of-stock label on product listing pages" in Admin.Shopparameters.Feature
"Note that the label will be displayed only if backorders are denied." in Admin.Shopparameters.Help

[Bewitching-Co]

Out of stock already shows on individual product listing page.
It needs to be shown anywhere a group of products are shown ie: category page, featured product on home page etc..
If a product has options, then perhaps "view available options"?

I suggest the following wording:

"Display out-of-stock label on product listing page" in Admin.Shopparameters.Feature
"Note that the label will be displayed only if backorders are denied." in Admin.Shopparameters.Help

[Julievrz]

Out of stock already shows on individual product listing page.
It needs to be shown anywhere a group of products are shown ie: category page, featured product on home page etc..
If a product has options, then perhaps "view available options"?

I suggest the following wording:
"Display out-of-stock label on product listing page" in Admin.Shopparameters.Feature
"Note that the label will be displayed only if backorders are denied." in Admin.Shopparameters.Help

I think the "product listing page" is the page where all the products are listed and the product page is the individual page.

"products listing page" is not grammatically correct in my opinion.

Or maybe we could add an "s" to "page" if it applies to multiple pages (category page, featured product, ...)

If the product has options, I think @marionf 's wording was good "Available with different options".

[marionf]

Yes, it's rather "products listing pages" as we can have listing of products on differents pages: categories pages, home page, best sales pages, new products page, prices drop page ...

For products with combinations we will display "out of stock" label only if all combinations are out of stock, otherwise we will display nothing as the wording "Available with different options" is too long to be displayed on the product's image.
Furthermore, the goal is to encourage visitors to click on the product to see all the combinations and choose the one he/she wants.
Anyway, he/she will be able to see if the selected combination is available or not on the product page.

[Julievrz]

@marionf I modified my first comment and added an "s" to "page". However, I'm really not sure about adding an "s" to "product" as I think it is not grammatically correct to write "products listing pages".