Product Label set up

Hi guys!

How can I configure the shape of the icon for the “sold out” label on products?
I need to adjust this one becouse If I press “round icon” all the product label will be rounded, but I need to change only the Sold out one just because it doesn´t have space for the word (Sold out / Agotado) in spanish.

if is not possible, any other think I can do or any good plugin?

Thanks

Attachments:

You must be logged in to view attached files.

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-grid-item .product-label.out-of-stock {
    background-color: blue;
    color: yellow;
    border-radius:0;
}

Please replace the values as per your needs.

Best Regards

Hi, thanks for your answer.

Unfortunately it didn´t make any change

Hello,

Have you added the custom CSS? I am checking it works: https://gyazo.com/84a21b9f7ea94d66566737f5c5b4c76c

Please provide your site admin access to the private area.

Best Regards

I see, thanks for your video.

I don´t need to change color, what I specific need is to make the label longer, just for the word “Agotado” will be in one word, and not separately like “AGO TADO” because doesn´t have more space, You know what I mean?

How can I do that?

Thanks!

Hello,

Please add this code to the Theme Settings > Custom CSS > Global:

.product-grid-item.outofstock .product-labels {
  max-width: 100%;
}
.product-grid-item.outofstock .out-of-stock {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
	background:red;
	color:white;
	padding-top:5px;
}

Best Regards

Hi,

It does the same, I need it to the single product page please.

Thanks!

Hello,

Replace the code with this one:

.product-images .product-labels {
  max-width: 100%;
}
.product-images .labels-rounded .product-label.out-of-stock  {
  width: 100%;
  max-width: 100%;
  border-radius: 0;
	background:red;
	color:white;
	padding-top:5px;
}

Best Regards

Thank so much guys! It works great.

Any way to make the label thinner and choose the position of the label on the product view? In products grid and single one?

🙌 thanks!

Hello,

What do you mean by saying “thinker”? Do you want to make the text smaller?

Where do you want to move the label on the product page and on the grid, please provide the screen and show?

Best Regards

[Author]

Posts