Home › Forums › WoodMart support forum › Stock icon pulsing

Stock icon pulsing

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • September 8, 2024 at 11:18 am #595970

    Pladi1
    Participant

    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.

    September 9, 2024 at 11:47 am #596107

    Hung Pham
    Keymaster

    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,

    September 9, 2024 at 12:37 pm #596144

    Pladi1
    Participant

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

    September 10, 2024 at 4:37 am #596299

    Hung Pham
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)