How to Change the Color of Product Availability "In Stock" and "Out of Stock"?

[Marty]

The template we have uses the same font color for stock availability. People are not noticing if the item is in stock or out of stock. I would like to have "In Stock" be green and "Out of Stock" to be red. I looked in the listing_0.html and see the code block [availability_itemprop]. Does anyone know how to change the color of the displayed font based on availability?

[Toocutebeads]

Marty

I do not use the [availability] tag, so this won't be exact for you, but it should get you started.

<style>
.FONT1[catalogid] {
color:green;
}
.FONT2[catalogid] {
color:red;
display:none;
}
</style>

Add 2 different styles to the top of your product_items.html. One with each fond color.

<div class="FONT1[catalogid]" id="Available[catalogid]">
<!--START: product_availability-->
<span class="availability">[stock]</span>
<!--END: product_availability-->
</div>

<div class="FONT2[catalogid]" id="NOTAVAILABLE[catalogid]">
<!--START: product_availability-->
<span class="availability">[stock]</span>
<!--END: product_availability-->

</div>

Create 2 availability blocks. The class with determine the style. The ID is for the script to choose which to display

<script>
if ([stock]==0) {document.getElementById('Available[catalogid]').style.display = "none";}
</script>
<script type="text/javascript">
if ([stock]==0) {document.getElementById('NOTAVAILABLE[catalogid]').style.display = "block";}
</script>

These 2 scripts will either hide or display the appropriate block depending on if the [stock] tag is at zero. Without testing, you probably want to try replacing my [stock]==0 with [availability]==In Stock and [availability]==Out of Stock

Hope this is enough to get you started. If you just want to use the code as is, it will display the actual number of items on hand. This helps my customers to not add more than we have and getting an error. Good luck.

[Marty]

Marty

I do not use the [availability] tag, so this won't be exact for you, but it should get you started.

<style>
.FONT1[catalogid] {
color:green;
}
.FONT2[catalogid] {
color:red;
display:none;
}
</style>

Add 2 different styles to the top of your product_items.html. One with each fond color.

<div class="FONT1[catalogid]" id="Available[catalogid]">
<!--START: product_availability-->
<span class="availability">[stock]</span>
<!--END: product_availability-->
</div>

<div class="FONT2[catalogid]" id="NOTAVAILABLE[catalogid]">
<!--START: product_availability-->
<span class="availability">[stock]</span>
<!--END: product_availability-->

</div>

Create 2 availability blocks. The class with determine the style. The ID is for the script to choose which to display

if ([stock]==0) {document.getElementById('Available[catalogid]').style.display = "none";}
</script>
<script type="text/javascript">
if ([stock]==0) {document.getElementById('NOTAVAILABLE[catalogid]').style.display = "block";}
</script>

These 2 scripts will either hide or display the appropriate block depending on if the [stock] tag is at zero. Without testing, you probably want to try replacing my [stock]==0 with [availability]==In Stock and [availability]==Out of Stock

Hope this is enough to get you started. If you just want to use the code as is, it will display the actual number of items on hand. This helps my customers to not add more than we have and getting an error. Good luck.

Thank you! It worked great. I still used [availability_itemprop] in my listing_x.html file and left the the javascript code with [stock]==0 since the cart checks stock, and we don't allow backorders. If the stock is 0 it hides the availability block and displays the unavailable block (in red) with a red "Out of Stock." Note: I did try replacing the javascript [stock] with various availability code blocks and message strings such as "Out of Stock", but nothing worked. I then realized that even though I'm not displaying [stock] in my listing, the cart still checks stock using your code.

Clarification for People trying to figure this out:

<style> .FONT1[catalogid] { color:green; } .FONT2[catalogid]
{ color:red; display:none; } </style>

This styling block goes into the top of your listing template such as listing_0.html

Replace your [availability_itemprop] in your listing template with the 2 code blocks Toocutebeads listed. You can change [stock] to [availability_itemprop] if you don't want to list number of units remaining and just want to list "In Stock" or "Out of Stock".

You can put the javascript block Toocutebeads listed at the very bottom of your listing template. NOTE: Make sure you have a javascript opening tag.

[Toocutebeads]

Marty

Glad to hear it works the same with or without [availability]. I've been working on going 1 step further, and changing my add to cart block to a waiting list button when [stock]==0. You can see what I mean here.

https://www.toocutebeads.com/Holiday-Jewelry-Kits

That prevents customers from getting an error when adding multiple items that would be at 0. Trying to get the waiting list into a Modal has been my challenge so far, but Im confident I can get it to work with the 3dcart system,.

[Marty]

Marty

Glad to hear it works the same with or without [availability]. I've been working on going 1 step further, and changing my add to cart block to a waiting list button when [stock]==0. You can see what I mean here.

https://www.toocutebeads.com/Holiday-Jewelry-Kits

That prevents customers from getting an error when adding multiple items that would be at 0. Trying to get the waiting list into a Modal has been my challenge so far, but Im confident I can get it to work with the 3dcart system,.

Let me know if you get it worked out. That would be a great feature!

[3DCuser]

Is there not a standard 3Dcart function that will put a "out of stock" text across all the imagaes that are out of stock? Seems this would be a standard function of a shopping cart.

[Marty]

Is there not a standard 3Dcart function that will put a "out of stock" text across all the imagaes that are out of stock? Seems this would be a standard function of a shopping cart.

That would indeed be a VERY useful feature.

[JoeBTI]

I'm sure text can be easily shown over the image based on the availability text of "In Stock" or "Out Of Stock". Have you contacted one of the 3dCart experts?

[Marty]

I'm sure text can be easily shown over the image based on the availability text of "In Stock" or "Out Of Stock". Have you contacted one of the 3dCart experts?

No, I haven't. They usually want to charge a lot of money for "advice." I found this article https://support.3dcart.com/Default/K..._block-feature , which would be a good way to add a message over the whole page, BUT it said it doesn't work with Advanced Options inventory. We use Advanced Options for nearly all our products.

[3DCuser]

I am asking them now

[3DCuser]

They said the system will make a note on the product page, but not on the image. And, this probably only is possible with automatic inventory; I only use manual inventory though, which is never zero stock.