New Product Bagde Location

  • Resolved shoptak

    (@shoptak)


    5 years, 8 months ago

    Hello Team,

    I’m using the Add a “New” badge for recently added products option but if I set the badge position top left the badge disappears and if I set it above the title it shows like this: https://ibb.co/X7GFDbt

    My target is to have it at the top left corner of the product photo

    Thank you
    Shoptak

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Kaira

    (@kaira)

    5 years, 8 months ago

    Hi @shoptak

    Can you please give me the url to your site and then I’ll be able to give you CSS to fix that.

    I’ll need your site url so I can get the correct class name from your theme you’re using.

    Thanks

    makigirl

    (@makigirl)

    5 years, 8 months ago

    Hi!

    I thought I had the same but it’s not disappearing BUT it’s BEHIND/UNDERNEATH the product image!! :S …I found it out by mistake: uploaded a transparent png!

    Have no idea what’s the solution to this! :S
    …how to bring the badge to the front since z-index won’t work on this element… :S

    Any help?

    makigirl

    (@makigirl)

    5 years, 8 months ago

    Ok, I found it!

    .wcz-badge-pos-topleft {
    top: 10px; /* padding… */
    left: 15px;
    z-index: 1; /* bring the button forward */
    }

    div.wcz-new-product-badge span {
    background-color: rgb(230, 85, 64, 0.6); /* set button color with transparency */
    color: #FFFFFF !important; /* set button text color */
    }

    Thread Starter shoptak

    (@shoptak)

    5 years, 8 months ago

    Thank you @kaira for your prompt reply I was testing it first on my localhost Im using Oceanwp theme.

    Thank you @makigirl your CSS works like a charm!
    The only change I made for me to work is Z-index to 2.

    End result:

    Before: https://ibb.co/qdryMjc
    After: https://ibb.co/g3zMQ95

    .wcz-badge-pos-topleft {
    top: 10px; /* padding… */
    left: 15px;
    z-index: 2; /* bring the button forward */
    }

    div.wcz-new-product-badge span {
    background-color: rgb(6, 104, 208); /* set button color with transparency */
    color: #FFFFFF !important; /* set button text color */
    }

    Thank you Guys for your prompt help and support!

    Plugin Author Kaira

    (@kaira)

    5 years, 8 months ago

    Hi @makigirl & @shoptak

    Glad you sorted it out already, and thanks, I’ll add this to the next update too.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘New Product Bagde Location’ is closed to new replies.