Return to previous page

New, Sale, Hot labels are NOT RESPONSIVE

This topic has 4 replies, 2 voices, and was last updated 2 hours, 45 minutes ago ago by Fifco2000

Fifco2000

Participant

October 13, 2024 at 15:19

Hello,

New, Sale, Hot labels are NOT RESPONSIVE on MOBILE. When I wanna use all of 3 labels I cant see image on product grid, because those labels are so big (I make them smaller but it is not enaugh) and also they are under each other.

Posible solution: Can you create more options for that, please?
– order of labels – in my situation I wanna HOT will be first
– positioning – in my situation I wanna HOT will be TOP-LEFT, NEW will be BOTTOM RIGHT and SALE will be TOP RIGHT
– SALE can also has another special positioning – TOP, BOTTOM, LEFT or RIGHT from PRICE

Thank you so much for helping me 🙂

#418451 Copied

3 Answers

Luca Rossi

Support staff

October 14, 2024 at 13:29

Hi @Fifco2000,

We only saw 2 labels on your products.

You can try with this custom CSS codes intead:


body .etheme-product-grid-item {
    position: relative;
}
body .etheme-product-grid-image {
    position: static;
}
body span.onsale.type-square.left.with-percentage {
    top: 0 !important;
    left: 5px !important;
}

body .sale-wrapper ~ .sale-wrapper .onsale {
    right: 5px !important;
    left: auto !important;
    top: 0 !important;
    transform: none !important;
}

Here is the result:
– Mobile: https://prnt.sc/Kb5BjC_FdwyO
– Desktop: https://prnt.sc/FEEW9sOfM_su

Hope it helps!

#418600 Copied

Fifco2000

Participant

October 14, 2024 at 16:40

Thank you for your help, I edited your CSS, because there was couple mistakes when :hover and now it is working well.

Here is css code:

.elementor-widget-woocommerce-etheme_archive_products .etheme-product-grid-image, 
.elementor-widget-etheme_product_grid .etheme-product-grid-image {
    position: relative;
    overflow: visible;
}

.elementor-widget-woocommerce-etheme_archive_products .onsale.with-percentage, 
.elementor-widget-woocommerce-etheme_archive_products .onsale.new-label, 
.elementor-widget-woocommerce-etheme_archive_products .onsale.hot-label, 
.elementor-widget-etheme_product_grid .onsale.with-percentage, 
.elementor-widget-etheme_product_grid .onsale.new-label, 
.elementor-widget-etheme_product_grid .onsale.hot-label {
	border-radius: 6px;
  transform: none !important;

}

.elementor-widget-woocommerce-etheme_archive_products .onsale.with-percentage,
.elementor-widget-etheme_product_grid .onsale.with-percentage {
    top: auto !important;
    left: -7.5px !important;
    bottom:-7.5px !important;
}

.elementor-widget-woocommerce-etheme_archive_products .onsale.hot-label,
.elementor-widget-etheme_product_grid .onsale.hot-label {
    left: -7.5px !important;
    top: -7.5px !important;
}

.elementor-widget-woocommerce-etheme_archive_products .onsale.new-label, 
.elementor-widget-etheme_product_grid .onsale.new-label {
    left: auto !important;
	  right: -7.5px !important;
    top: -7.5px !important;
}

#418642 Copied

Fifco2000

Participant

October 14, 2024 at 16:42

Could you let me know how can I put Sale label next to price (right side)? Using function.php snippet? Do you know this snippet, please?

Thank you

#418643 Copied