Out of Stock to be prominent as Button, Stock progress bar be visible in BOrdere

Hello Luke,

I ma facing couple of issue and have a request as well. If you could please take a look into these and help me to resolve these.

1. When the product goes Out of Stock, then on the Single product page (for Simple product), it shows just a simple text in Red color. Hence, it is barely visible for customers to identify what is happening and why they can’t add product to cart.
And as the text is not in a Button (like Add to Cart), this is Not that prominent too. And as can be seen here –
https://i.paste.pics/107bef4bb0a2ade9d1e88b483c06683c.png
https://www.vasangini.com/product/michael-kors-handbag-premium-leather-womens-sling-bag/

So, how can we have the Button for Sold Out items also on Single PPage. To place the Text inside the this button just like we have button for Add to Cart also.

2. When the product is Out of Stock the Stock progress bar gets Invisible. I think it should not be made Hidden considering the above point also. That way, users will atleast be aware that X out X units (say 15 out of 15) got Sold Out, hence All units are gone now and are not available for purchase any more. That way it will be visibly more appealing and clear, even when there is just a text of “Out of Stock”

2.b). Interestingly, for Back-Ordered items (when we enable the option and allow customers to place Backorder), the Stock progress bar should atleast be visible. As customer may come to know that All units that were In-stock, now goes Out. And now when they are about to purchase that item then the item will be placed as Back-Ordered.

Many of our customers are saying that they were Not aware of item being Back-ordered and they were about to place their order on such BOrdered items and also when few of the customers have placed their order too.

Atleast that will help them some way or other to identify the status. And can give them visual clue too.

If below one can be resolved then please suggest or else, if you could please forward this to the team in order for them to bring such changes in next or future update.

3. If the Stock progress bar could be shown when the product goes Out of Stock (or Backordered), and can be shown dynamically like Sold X/Y —– Left 0
Say, if there were 15 Initial Qty set, then it shows as Sold 15/15 —– Left 0 and the Stock progress bar remains visible.

Please suggest

Regards

Hello,

1. You can make bigger the “Out of stock” label with the help of the below code, paste it into the “Desktop CSS” area in Theme Settings -> Custom CSS.

.single-product .woocommerce-product-gallery .product-labels .out-of-stock {
    min-height: 60px;
    display: flex;
    align-items: center;
}

2. I sent your suggestion to the team, they will consider it.

Kind Regards

Hello Luke,

1. Thank you for sharing the CSS. I will try that and let you know.

1. b). One thing, can the same Add to Cart button be dynamically changed to Out of Stock text, once the product Sold All units. Atleast for Simple products.
If not, can you please forward this request to team to implement such change.
As this has come up so many years back and can be seen in almost every ecommerce platforms. With just the plain text (that too not prominent), it looks very basic and Old-fashioned.

1. c). In the meantime, can Out of Stock be shown in button somehow or other. By using Custom Code

2. Thank you. I wish team would consider it.

I am still waiting for a response from your side on this ticket. Can you please take a look on this. I had made it opened for you to test on that same day.

https://xtemos.com/forums/topic/2-strange-issues-unwanted-slider-padding-tb-n-incorrect-layout-of-product-tabs/

Regards

Hello,

1. Ok, I will send it to the team.

1c. Sorry to say that but It requires Customization and this is beyond our limitations and support policy scope. Hope you can understand our limitations.

2. Sure, I will check it. Sorry for the delay.

Kind Regards

Hello Luke,

1. Thank you.

1. c) If button is not possible, as of now. Then, how can we have atleast a Background color for Out of Stock text with slight Padding all-around the text to make it atleast slightly more visible or bit prominent.
I am looking for Red colored BG and the text “Out of stock” to be in white color.
I will change colors later-on, If I wish to.
Can you please share the Custom CSS for this

Regards

Hello,

Yep, please try to use the below code, enter it into the “Global Custom CSS” area in Theme Settings -> Custom CSS.

.single-product .entry-summary .stock.out-of-stock {
    background-color: red;
    color: #fff;
    padding: 10px;
}

Kind Regards

Hello,

Thank you for sharing the Code. I tried the CSS.
Just one thing, currently, this the BG color is across the whole width, and the text itself is of limited width, being it small.
Currently this is how it is showing
https://i.paste.pics/db97b7312f9c51442b7e9842eab8aafe.png

So how can we have the BG color just around the Text. That is, BG color should be limited to the end of the word “Out of stock” itself (just with some padding) Like shown below-
https://i.paste.pics/87b071fee32a728c408cfbca7de45891.png

How can we have this. Can you please share the updated code.

If you require Live page for updated CSS, you can test on this page-
https://www.vasangini.com/product/designer-pure-cotton-kurta-with-ankle-pant-seti-gotta-detailing-hand-work-full-width-dupatta-set-partywear-style-women-kurta-l-3xl-sizes/

Regards

Hello,

Ok. In this case, replace the old code with the below one.

.single-product .entry-summary .stock.out-of-stock {
    background-color: red;
    color: #fff;
    padding: 10px;
    width: 182px;
    text-align: center;
}

Kind Regards

[Author]

Posts