How-to add OUT-OF-STOCK note on Product miniatures

[Jeff A]

This took me a couple of hours to figure out. This is one way to add 'Out of Stock' labels over product images when users are browsing your site.

This works for me, using PrestaShop 1.7.6.5 - hopefully, you already have created a child_classic theme, that inherits from the Classic theme.

In your themes folder: copy classic/templates/catalog/_partials/miniatures/product.tpl to child_classic/templates/catalog/_partials/miniatures/product.tpl

Modify: child_classic/templates/catalog/_partials/miniatures/product.tpl - find the <article class="product-miniature... tag and add an attribute: x-data-product-quantity="{$product.quantity}" to the end of this tag. This attribute should end up containing the product quantity - use your developer tools while browsing your shop, to inspect the tag and make sure the attribute is present, and contains the quantity of the product.

Modify: child_classic/assets/css/custom.css - add the following lines:

  /*
    miniature product articles - add an Out-of-Stock float over the images with zero quantity
    Note that you have to update template/_partials/miniature/product.tlp and add in
    attribute x-data-product-quantity="{$product.quantity}"
  */
  [x-data-product-quantity="0"]  {
    position: relative;
  }

  [x-data-product-quantity="0"]::before  {
    position: absolute; top: 10px; left: 8px; z-index: 10;
    font-weight: bold; font-size: 120%;
    color: #444; background-color: hsla(200,20%,80%,0.7);
    content: "Out of Stock";
    padding: 4px 1em;
  }

You can see the result here: https://shop.chailey-iris.co.uk 

[[email protected]]

Hi @Jeff A,  Your post is super helpful! Thanks so much for sharing this. I was pretty upset that I won't able to know which are Out Of Stock items unless clicking into the product, and I can see my customers will be really unhappy about it too if too many OUT OF STOCK attempts. Thanks so much for this again. It's really appreciated!! 

[pantoffelke]

Helpfull, however this show also to products that are available for backorder.

Any idea how to fix that?

[technocracy]

@Jeff A - Thanks so much for this!  Exactly what I was looking for - I still do not understand why this functionality is not standard by default! 

I decided I wanted a Red banner across the top of the listing - the same as the default Orange banner that is used for items on sale - if anyone wants that just use this formatting:  

   position: absolute;
    top: 0px;
    z-index: 10;
    font-weight: bold;
    font-size: 100%;
    color: #fff;
    background-color: #c94444;
    content: "OUT OF STOCK!";
    text-align: center;
    padding: 5px 1em;
    width: 100%;

 then it look like this: 

[Murat Kezli]

Why you don't use directly {$product.quantity} in classic/templates/catalog/_partials/miniatures/product.tpl file
(English =>) Although the code above works, it is not the right method especially if you are using multiple languages. You can translate your tag from theme translations in any language as follows.
(Turkish =>) Yukarıdaki kod çalışıyor olsada özellikle çoklu dil kullanıyorsanız doğru yöntem değil, aşağıdaki şekilde tema çevirilerinden etiketinizin çevirisini her dilde yapabilirsiniz.
......

{block name='product_thumbnail'}

{if $product.quantity < 1 } <div class="mycustom-out-of-stock-class">{l s='Out of Stock' d='Shop.Theme.Catalog'}</div>{/if} 

........

 

 

 

Edited June 25, 2021 by Murat Kezli (see edit history)

[Jeff A]

An excellent suggestion - esp. as this lets you use the translation / multi-language feature. I recommend Murat's solution for those who need multi-language support.

The reason I used the approach above:

• I support a couple of clients that chose to use PrestaShop - and core technical documentation is lacking (no published data-model for example).
• Out-of-Stock styling should be a core feature, and one day when it is added, I know I will have to remove this and other tweaks. I keep all changes to PrestaShop as small as possible, and preferably confined to a single custom CSS file.
• There have been so many changes in the template/.tlp layer over the last few years that break when ever there is even a minor upgrade. I therefore keep .tlp changes to the absolute minimum.
• The translation setup in PrestaShop does not work for my clients - the Admin interface is so poor that they contact me to manually insert rows into the Database tables to get it to work. So at the moment, I avoid the translation layer unless it is absolutely necessary.
• The exposure of the product quantity in the element attributes lets me use other CSS selectors too. My clients have styling that is applied when the stock levels get low (but there is still stock available to sell).

But I agree that if you are happy to keep merging in upstream .tpl changes, and if you want a multi-language shop then making deeper changes in the Smarty templates is a better option for you.

[stech]

hello, I need this:

• out of stock
• available for preorder when customer can select product in backorder
• and in stock

can you help me ?

[Murat Kezli]

Hi Stech, 

If you can give a little more detailed information about the features that come with the existing infrastructure, what is not working, we will help you.

 

On 6/7/2022 at 11:13 PM, stech said:

hello, I need this:

• out of stock
• available for preorder when customer can select product in backorder
• and in stock

can you help me ?