Hello again,
I apologize but my site is not yet online, I only host it in my computer. But I can give you the code that I use in my style.css file under childtheme for you to test it out. If I remove the “ul.products .onsale,” the after style doesn’t show up. But usually I only use .onsale on woocommerce and it should work. So I am thinking this has to do with your theme?
ul.products .onsale, .onsale {
position: absolute;
animation: 1s ease 0s normal none infinite pulse;
background-color: #ff3371;
color: #fff;
font-weight: 700;
width: 46px;
height: 46px;
line-height: 46px;
text-align: center;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 99; }
.onsale:after {
background: none repeat scroll 0 0 padding-box #ff3371;
-webkit-border-radius: 5px;
border-radius: 5px;
bottom: 0;
content: “”;
display: block;
left: 0;
position: absolute;
right: 0;
top: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
z-index: -4; }
@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
@-moz-keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
@-o-keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }
@keyframes pulse {
from {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); }
70% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2); }
to {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1); } }