How to show verified badge above the vendor's image

[arry]

Hey guys, I have made the vendor listings in a row using css. Can you guide me as to how I can show the verified badge Above Vendor photo & next to his ratings. Please check the below photo of how it looks at the moment. Quick guide will help. I can write the code. Thanks

[arry]

I have solved this by using the following css, hope it helps other fellow users:

.hp-vendor__verified-badge {
    display: none;
}

.hp-vendor__image::before {
    content: "Verified";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4caf50;
    color: #fff; 
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

Final output:

[rudy]

Hello @arry thank you for your CSS

I have tested on my website and the only problem is that also vendors that are not verified get the VERIFIED text above the image.

I am non technical… does your CSS separates vendors that are not verified from the verified ones?

Thank you

[arry]

Hi @rudy , the css code does not separate the non-verified vendors. On my website we were allowing only verified vendors to be displayed. So this solution worked fine for me.

[rudy]

Thank your for the reply @arry !
Please @ihor @andrii is it possible to make so that the css code Arry created is only applied to already Verified Vendors? what should be added? thank you

.hp-vendor__verified-badge {
    display: none;
}

.hp-vendor__image::before {
    content: "Verified";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #4caf50;
    color: #fff; 
    padding: 5px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
}

[andrii]

Hi,

Thanks for sharing the code, it will be useful for our community. Unfortunately, this block does not have a separate class for wrapper like verified. Please try not to create a new badge but move an existing badge to the left using position:absolute;.

I believe this will be useful to you.