Adding a banner to a specific product in the main shop page

  • Resolved jazzu

    (@jazzu)


    2 years, 3 months ago

    Hello!

    Like I wrote in the title, I want to add a banner to a specific product in the main shop page – something like a wrap at a 45° angle.

    I tried to just add a banner on the image I used for the thumbnail, but it doesn’t look good, because the images are smaller.

    The best attempt I had is to use background-image: url in CSS, but the thing is, that I need the background image to be in front of the actual thumbnail image.
    I tried with z-index, but it doesn’t do anything.

    I think the problem would also be, that I don’t know how big the image would actually have to be if I did it like that.

    What would be the best approach for me?

    Kind regards

    • This topic was modified 2 years, 3 months ago by jazzu.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support Daniyal Ahmed (a11n)

    (@daniyalahmedk)

    2 years, 3 months ago

    Hi there,

    Thanks for reaching out.

    I understand that you would like to add a banner on top of some specific products. It looks like you need to customize the content-single-product.php file by first placing it in your child theme.

    You can learn more about overriding templates by using the following article:

    https://woocommerce.com/document/template-structure/

    You also, need to place some checks on the banner where you would like to display that.

    You can get in contact in touch with one of the customization experts listed on the WooCommerce Customizations Page:

    https://woocommerce.com/customizations/

    I hope it helps,

    Best,

    Thread Starter jazzu

    (@jazzu)

    2 years, 3 months ago

    Hi @daniyalahmedk !

    Thank you for your reply. I just want to ask, in case I didn’t express myself correctly. Doesn’t the content-single-product.php contain the code for specific products – like directly products, where you write the description of the product, add images, etc.?

    Because I want to add a banner in the main shop page, where products are listed.
    HERE you can see, what it looks like when I just changed the thumbnail. I want that red banner to be angled by 45°, at the edges of the actual product wrap – you can see what I mean HERE.

    Kind regards

    Igor H

    (@ihereira)

    2 years, 3 months ago

    Hello there,

    I understand you would like to add product badges.

    This extension might help you out:
    https://woocommerce.com/document/product-badges/

    Also, you can try this plugin below, you will be able to add a badge like this:


    Link to image: https://snipboard.io/CYZWVs.jpg

    https://wordpress.org/plugins/yith-woocommerce-badges-management/

    Let us know if this helps 🙂

    MayKato

    (@maykato)

    2 years, 3 months ago

    Hi @jazzu

    We’ve not heard back from you in a while, so I’m marking this thread as resolved. If you have further questions, please feel free to open a new topic.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding a banner to a specific product in the main shop page’ is closed to new replies.