Return to previous page

Customize products featured badges with css

This topic has 8 replies, 3 voices, and was last updated 6 months, 1 weeks ago ago by Andrew Mitchell

  • Avatar: Tiang
    Tiffany
    Participant
    November 12, 2024 at 13:28

    Hello, good afternoon, I am customizing the badges of my products, placing personalized images, I want to modify the featured badges, but I don’t know how to call the command. I am using this code for the badges of products on sale, and it works for me but now I want to do it with the featured products.

    .single-product .product .onsale{
    background-image: url(“https://woocommerce.divicon.net/wp-content/uploads/2020/09/oferta.png”) !important;
    font-size: 0;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    padding: 40px !important;
    }

    #422933 Copied Theme version: 9.4.4
    7 Answers
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 12, 2024 at 15:37

    Hello,

    We kindly request that you provide the URL of the page where the featured product badges are visible.

    Thank you for your assistance.

    Best regards,
    The 8Theme Team

    #422976 Copied
    Avatar: Tiang
    Tiffany
    Participant
    November 12, 2024 at 16:38

    They are the products that have the logo (limited), I want to change it for an image, as I did with the products on offer like the code I placed previously

    Please contact administrator
    for this information.
    #423002 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 12, 2024 at 16:59

    Hello, Tiffany,

    Please try to use this code:

    .products-loop .hot-label {
    background-image: url("image-url") !important;
    font-size: 0;
    background-color: transparent !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    padding: 40px !important;
}

    Best regards,
    The 8Theme Team

    #423011 Copied
    Avatar: Tiang
    Tiffany
    Participant
    November 13, 2024 at 12:27

    great, solved, thank you very much,

    I have a question regarding the size, is there the possibility within this same code to establish a different measurement of the image, in mobile and desktop versions?

    Because it happens to me that on the desktop it looks good in size but it is very big on mobile phones, and if I place the smaller badge image in the padding it looks good on mobile phones but very small on the desktop version.

    #423138 Copied
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    November 13, 2024 at 15:49

    Hello, Tiffany,

    You’re welcome!

    Please try to use this code in Theme Options > Theme custom CSS > Mobile:

    .products-loop .hot-label {
    padding: 20px !important;
}

    Best regards,
    The 8Theme Team

    #423175 Copied
    Avatar: Tiang
    Tiffany
    Participant
    November 14, 2024 at 10:46

    solved, thank you very much

    #423345 Copied
    Avatar: Andrew Mitchell
    Andrew Mitchell
    Support staff
    November 14, 2024 at 10:46

    Dear Tiffany,

    We trust our theme is enhancing your experience. Taking a brief moment to rate it with a glowing 5 stars on ThemeForest would be immensely appreciated. Your feedback holds significant value for us.

    Click here to rate now: https://themeforest.net/downloads

    Thank you sincerely for your ongoing support!

    Best Regards,
    The 8Theme Team

    #423346 Copied
  • Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘customize products featured badges with css’' has been successfully resolved, and the topic is now closed for further responses

Recent Community Activity

Helpful Topics

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Shoes Store – WooCommerce Theme
lazy-placeholder
Gym Store – WordPress WooCommerce Theme
lazy-placeholder
Engineer Store – WordPress WooCommerce Theme
lazy-placeholder
Default RTL – WordPress WooCommerce Theme
lazy-placeholder
Minimal Electronics – WordPress WooCommerce Theme
lazy-placeholder
School – WordPress Theme
lazy-placeholder
WooPress Fullwidth
lazy-placeholder
Water Delivery – WordPress WooCommerce Theme
lazy-placeholder
Kids Toys Store – WordPress WooCommerce Theme
lazy-placeholder
Bike Store – WordPress WooCommerce Theme

See All Templates

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.