Change the design of the badge "out of stock"
-
Hello,
I would like to change the design of this badge which does not look beautiful at all with the translation of “sold out” (cf. attachment). I tried the following CSS:
@media (max-width: 768px)
.labels-rounded .out-of-stock {
max-width: 60px;
font-size: 9px;
}
But it doesn’t work, please help me
Attachments:
You must be
logged in to view attached files.
Hello,
Please provide your site URL so that we could provide you with custom CSS. If your site is under maintenance, please provide your site admin access in the private area.
Best Regards
Hello,
I cannot login your site, when I insert yousite/wp-admin I see the maintenance page.
Try his custom CSS, if it does not work, provide valid access.
.product-label.out-of-stock {
font-weight: 900;
font-size:12px;
}
Best Regards
Hello,
It doesn’t work
I will remove the maintenance site so that you can access it and find a solution.
Thank you
Hello,
Replace the code with this one:
body .product-label.out-of-stock {
font-weight: 900;
font-size: 10px;
min-width:70px;
}
body .single-product-content .product-images .labels-rounded .product-label {
min-width:70px;
min-height: 70px;
}
You will get this result on the product page: https://prnt.sc/sz6md3
And this result https://prnt.sc/sz6mo5
If I try to make the label smaller it is not readable. I did not do an ideal circle on the shop page not to occupy a low of space on the product grid, if you still want an ideal circle, add this line: min-height:70px; under min-width:70px;
Best Regards
.
