A bit weird question that I got from my client.

Is there a way to make a green "light" or "dot" just next to where it says in stock and a red one for where it says out of the stock front end?

1 Answer 1


It can be done by CSS

.stock.available::after {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: green;
    display: inline-block;
    content: open-quote;

enter image description here

Same can be done for non available stock

  • Thanks for this, the greenlight worked. However, the problem is they have allowed backorder on this website. So the stock is never unavailable. Is there a way to use CSS that will recognize when the stock is 0? Nov 22, 2022 at 11:23
  • for that we need to add logic in phtml/block class and need to check qty and and add class if qty is zero.
    – Pawan
    Nov 23, 2022 at 5:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.