"Available" and "Out of stock" text in different colours in product list

[albinc]

Hi!

 

In 1.4.4.1 I've managed to separately colour availability text in product list: "Available" in green and "Out of stock" in red.

 

I modified product-list.tpl in line 44 from:

 

 {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

 

to:

 

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{/if}</span>{/if}
			{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability" style="color:red; ">{if (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s=''}{else}{l s='Out of stock'}{/if}</span>{/if}

 

I know this isn't a complete solution, nor an elegant one, but it works, unless allowing orders when product is out of stock.

 

Can anyone please offer a better or maybe a complete way how to solve this?

 

Thanks in advance!

[Carolina Custom Designs]

I've done this before. Just change the second class to something like 'class=outofstock' and then style that any way you want in your stylesheet. This is very flexible.

 

Hope that helps!

 

Marty Shue

[albinc]

Thank you very much, Marty.

 

Can you be so kind and paste the code? The thing is I've already tried that (named the class "availability1") and created it in product-list.css, but it hasn't seemed to work.

 

Thanx again.

[albinc]

Ok,

 

I did what Marty suggested, added new class"outofstock" in row 45, product-list.tpl from lines 42-46 now looks like:

 

<div>
			{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
			{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{/if}</span>{/if}
			{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="outofstock">{if (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s=''}{else}{l s='Out of stock'}{/if}</span>{/if}
			</div>

 

Created additional 4 rows (67-70) in product-list.css:

 

ul#product_list li span.outofstock {
color: red;
font-size: 11px;
}

 

The problem stays the same: this doesn't work if product is allowed to be ordered when out of stock - "Available" and "Out of stock" notes are displayed in product list at the same time.

 

Any suggestions? Thanks.

[albinc]

Ok,

 

the new code is:

 

<div>
			{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
			{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{/if}</span>{/if}
			{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="outofstock">{if (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{else}{l s='Out of stock'}{/if}</span>{/if}
			</div>

 

This eliminates "Available" and "Out of stock" notes being displayed in product list at the same time, that's ok now.

 

Problem with allowing products to be ordered when out of stock still exists, any help will be much appreciated.

 

Over & Out

[Carolina Custom Designs]

You can set this in your BO under Preferences>Products. Just select 'No' beside 'Allow ordering out-of-stock product'.

 

That should do it!

 

Marty Shue

[albinc]

I'm sorry Marty,

 

it doesn't help.

 

Any of 6 combinations, same result: no 'add to cart' button in product page...

[Carolina Custom Designs]

I'm not sure what you are saying. Is it possible for you to provide a link so I can see what is happening?

 

Marty Shue

[albinc]

I mean: two possibilities in BO>Products>Allow ordering out-of-stock product: yes and no

 

and three possibilites for a product which is out of stock: BO>Catalog>Deny orders, Allow orders and Default: Deny orders (as set in Preferences)

 

make 6 combinations, and neither work.

 

Link is here. There's only few test products in at the moment.

 

Thank you ver much for taking your time.

[Carolina Custom Designs]

Your store isn't by chance in 'catalog' mode?

[albinc]

OMG Marty,

 

that was it! You're the king!

 

It's little embarrassing, but hey I learned something new. Sorry for wasting your time.

 

Thanks a million!

 

Best regards.

[Carolina Custom Designs]

Great! Glad you got it worked out. There is nothing to be embarrassed about.......we all learn each day. And, it wasn't a waste of my time! Just glad I could help you.

 

You are very welcome! Good luck with the store!

 

Marty Shue

[albinc]

I'm sorry,

 

it looks like I was a little hasty. I overlooked that product-list problem still persists: "Available" and "Out of stock" notes are displayed in product list at the same time.

 

Obviously my code needs a final touch:

 

<div>
							{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
							{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{/if}</span>{/if}
							{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="outofstock">{if (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{else}{l s='Out of stock'}{/if}</span>{/if}
							</div>

 

 

Thanks for helping!

[Carolina Custom Designs]

You need to use this code

<div>
 {if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
 {if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}
   </div>

 

Marty Shue

[albinc]

Hi!

 

Thank you Marty, but this puts me on beginning, since that is an original code ("Available" and "Out of stock" notes in same color).

 

This is my best shot, but problem with displaying "Available" and "Out of stock" notes in product list at the same time remains:

 

<div>
{if isset($product.show_price) && $product.show_price && !isset($restricted_country_mode)}<span class="price" style="display: inline;">{if !$priceDisplay}{convertPrice price=$product.price}{else}{convertPrice price=$product.price_tax_exc}{/if}</span><br />{/if}
{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{/if}</span>{/if}
{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="outofstock">{if (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{else}{l s='Out of stock'}{/if}</span>{/if}
</div>

 

I can't do it better, any help will be much appreciated.

 

Thanks loads.

[ari100teles]

Hi,

this is what you need:

 

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}</span>
{else}<span class="outofstock">{l s='Out of stock'}{/if}{if isset($product.online_only) && $product.online_only} ({l s='Online only!'}){/if}</span>{/if}

[jkousholt]

Is there anyone that can help setting this up under product.tpl and product.css

I don't have availability under product_list, and I would like to have red or green background whether the product is out of stock or available on the product page.

I use PS 1.5.2.0

[jkousholt]

Bump!

Really need this

[jkousholt]

No one to help?

[Martijnsb]

Hi jkousholt,

 

I do have a solution for you which will work including with different colours.

 

In the product-list.tpl change this code:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

 

to:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if $product.quantity > 0}{l s='Available'}</span>{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="outofstock">{l s='Out of stock'}{/if}</span>{/if}

 

Then in the product_list.css search for the following line:

#product_list li span.availability {
  color: #488C40
}

 

add thereafter:

#product_list li span.outofstock {
  color: #F22C2C
}

 

And then change the colour in everything you want. Now it will show different stock statusses on the product list!

 

Regards!

Edited February 26, 2013 by Martijnsb (see edit history)

[jkousholt]

Hi jkousholt,

 

I do have a solution for you which will work including with different colours.

 

In the product-list.php change this code:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

 

to:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if $product.quantity > 0}{l s='Available'}</span>{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="outofstock">{l s='Out of stock'}{/if}</span>{/if}

 

Then in the product_list.css search for the following line:

#product_list li span.availability {
  color: #488C40
}

 

add thereafter:

#product_list li span.outofstock {
  color: #F22C2C
}

 

And then change the colour in everything you want. Now it will show different stock statusses on the product list!

 

Regards!

 

I've tried it, but am I wrong if this is for the product list? (Yes I'm a rookie ) Because I couldn't get it to work.

I need the feature at the product page.

 

Hope you can help me again.

[Martijnsb]

No problem! Do you mean on the product page itself or do you mean the list that shows the products?

[jkousholt]

I'ts on the product page itself.

I have disabled the "add to cart" button on product list, since my customers need to select size and color before the add to basket. (I sell clothes)

 

Thank you very much!

[Martijnsb]

If it is right the color of the product status on the product page is handled standard in prestashop. When you add a product go to the tab 'Quantities' and at the bottom you will find two fields where you can enter your text which you want to display when a product is in stock and when it is out of stock.

When you add these, you will find a red marked field with your text at the product page when your product is out of stock and a green one when your product is in stock. Hope this is what you mean

 

Regards!

[jkousholt]

Yes i realized that. And the text works perfect. But I need a background color change to red when the quantity reaches 0 and text changes.

I'll guess it's all about CSS, but again. I'm a rookie

Edited February 26, 2013 by jkousholt (see edit history)

[Martijnsb]

Show me a screen where you want that color to appear! No problem, we just need to stay at the same level haha, so a screen would be helpful me!

[jkousholt]

This is a tunic with color attribute grøn (green in danish) and size XXL

http://bettebiksen.dk/da/525-tunika-med-broderier.html#/farve-grøn/størrelse-xxl

 

The item is out of stock, but the customer can still order it. But i need to make it more visible that the item is a "BESTILLINGSVARE" (an out-of-stock item that can be ordered, but have a delivery of 3 weeks).

My customers often miss the text with blue background, and thinks the item is in stock. And when I tell them the items is not in stock, they often cancel the item.

 

With stock items I would like to keep the blue background.

 

Hope this makes sense to you

[Martijnsb]

I understand, you want to make the BESTILLINGSVARE (out of stock) in for example a red color and on stock still in blue.

What you can do is the following, open this file: themes/your theme/css/product.css

 

Search for:

#availability_value.warning_inline

 

There you will find a background-color. Behind change you color to, for example: #CE1017

This will change the color from out of stock items to red. You can change this parameter into any HTML color you want.

Let me know if this works for you, if you still have any problems please advise and I will try to help you out.

 

Kind Regards!

[jkousholt]

I can't find that line in product.css

[ALMAJ]

Hi jkousholt,

 

I do have a solution for you which will work including with different colours.

 

In the product-list.tpl change this code:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if ($product.allow_oosp || $product.quantity > 0)}{l s='Available'}{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}{l s='Out of stock'}{/if}</span>{/if}

 

to:

{if isset($product.available_for_order) && $product.available_for_order && !isset($restricted_country_mode)}<span class="availability">{if $product.quantity > 0}{l s='Available'}</span>{elseif (isset($product.quantity_all_versions) && $product.quantity_all_versions > 0)}{l s='Product available with different options'}{else}<span class="outofstock">{l s='Out of stock'}{/if}</span>{/if}

 

Then in the product_list.css search for the following line:

#product_list li span.availability {
  color: #488C40
}

 

add thereafter:

#product_list li span.outofstock {
  color: #F22C2C
}

 

And then change the colour in everything you want. Now it will show different stock statusses on the product list!

 

Regards!

 

Hello Mertijnsb, tanks for your precious help

that code worked for me, but how to change the color for this: "Product available with different options"

I want this to be Blue

I have tried add to the "product_list.css" this code:

 

#product_list li span.product available with different options {
  color: #0000FF
}

 

but this do not work...

 

EDIT:

Ok my code is now this:

 

#product_list li span.availability {
  color: #0000FF
}

#product_list li span.outofstock {
  color: #F22C2C
}


#product_list li span.available {
  color: #488C40
}

 

but as you can see this makes all available products blue

 

What i want is this: Available Out of stock Product available with different options

i only want add a different color for each product status,

is this to hard to accomplish?

 

 

tanks again for your help.

Edited April 15, 2013 by majority (see edit history)

[opionai]

Good afternoon.
In products-list is displayed when a product has attributes "in stock with other options." Is there a way to display on the product page when an attribute that has no stock no stock display.

 

thanks

 

sorry my english

[Guest]

Thanks guys, it has been really helpful. I use prestashop 1.5.6.1 and it works now. They should implement it in future updates though. Remember, to input proper words in shop pages translations, especially for non-english translations. Opionai, you may use just an empty word or space in your shop page translation - i think there are some more solutions to it.

[ALMAJ]

How to translate it for other languages (multi language store)?

 

is there a way to call the product state from the "Displayed text when in-stock" and "Displayed text when back-ordereding is allowed" from Availability settings instead call it from Quantity?

 

it makes more sense to just display the same availability state as the product page availability state.

 

 

tanks.

Edited January 24, 2014 by majority (see edit history)

[pegasus6464]

is there an easy code for show in prestashop 1.6 in green AVAILABLE and red SOLD items in product-list? thanks!

[Loe-]

*bump*

 

Any solutions yet?

 

tried above code, but all it does changes eveything to black, and i dont have such lines in my css.

 

want the same thing, so  in stick = green

sold out, but available for order =  orange

sold out =  red.

 

using ps 1.6.1.13.

 

thanx!