Stock icon pulsing

Hello team, I am trying to add some animation on the stock icon dot such as pulse, but need some help from you guys.

What I am trying to archive?
On the single page (see website-link below) you see the following stock status ” • 1 in stock” in green colored.

The CSS Pulse effect sample can be find here: https://codepen.io/FlorinPop17/pen/drJJzK

How can I do this for my template?

I am trying the following CSS but ain’t working:

p.stock.wd-style-bordered span:before {
    content: "";
    display: inline-block;
    margin-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #85B951;
    vertical-align: baseline;
}

p.stock.wd-style-bordered span::before  {
    background-color: #00A341 !important;
}

.theme-woodmart .stock.wd-style-default.in-stock:before  {
    animation: inventory-pulse 2s linear infinite;  
}

Looking forward for your support.

Hi Pladi1,

Thanks for reaching to us.

Please remove your code and add the below Custom CSS code to Theme Settings > Custom CSS > Global Custom CSS:

p.in-stock.stock.wd-style-bordered span:before{
	transform: scale(1);
	animation: pulse-green 2s infinite;
}

@keyframes pulse-green{
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 163, 65, 0.7);
	}
	
	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 163, 65, 0);
	}
	
	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 163, 65, 0);
	}
}

Regards,

This works, thank you for he 5-star support once again!

Hi Pladi1,

Glad to hear your issue has been resolved. Keep us in mind for future questions and concerns, we’re always here to help!

Regards,

[Author]

Posts