Before you ask please READ THIS

woocommerce tile banner

in FatMoon Posts: 97
Hi,
How can i make a banner on top left hand corner of my woocommerce tiles. The tiles in the image below read "new". I'd like to make something similar. Is there a plugin or CSS?
image (1)_3.png
1424 x 618 - 334K

Comments

  • Posts: 97
    Great, How can I customize the color of that banner?
  • AirAir
    Posts: 10,796
    Hello :-)

    You can use this custom CSS adjust your colors for the "new" tag.
    .product-labels .ribbon.new {
      background-color: #3498DB;
    }
    .woocommerce div.product-labels .ribbon.new {
      color: #fff;
    }
    With kind regards.
  • Posts: 97
    Hi,
    This worked for the background color, can I have something for the text color?
  • AirAir
    Posts: 10,796
    Hello :-)

    The second CSS rule is for color. Have you tried editing it?
    If yes, please share a live link so I could check why it isn't working.

    With kind regards.
  • Posts: 97
    Hi,
    Yes, the second CSS rule didn't work.
    https://Sensibleedibles.com/shop
  • AirAir
    Posts: 10,796
    You have error in the CSS thta you have added, and it is still set to white.
    Your code looks like:
    .woocommerce div.product-labels .ribbon.new{Ā color:#FFF;

    Please copy the original code once again, change the color, and it will work :-)

    With kind regards.
  • Posts: 97
    Hey Air,
    Yes, you were right, I had a plugin combining my CSS. Played with my code. FML lol.
    Thank you brother! Sending you much love!
  • AirAir
    Posts: 10,796
    Great to hear that you have located the issue :-)

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion