This topic has 4 replies, 2 voices, and was last updated 2 hours, 45 minutes ago ago by Fifco2000
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 🙂
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!
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;
}
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
You must be logged in to reply to this topic.Log in/Sign up