Return to previous page

New, Sale, Hot labels are NOT RESPONSIVE

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

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 🙂

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#418451 Copied

5 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
Luca Rossi

Support staff

October 15, 2024 at 06:30
Hi @Fifco2000,

Please try adding this custom code under functions.php file loactes in your child theme:

add_action('wp_footer', 'n2t_wp_footer', 999); function n2t_wp_footer(){ ?> <script> jQuery( function($){ $(document).ready(function(){ $('.etheme-product-grid-item').each(function(e){ $(this).find('span.onsale.with-percentage').insertAfter($(this).find('.etheme-product-grid-content .price span:last-child')); }); }) }); </script> <?php }

Also add this custom CSS:

.etheme-product-grid-item .price { position: relative; }

Should you require any further customization, you are welcome to submit your request through the following link: https://www.8theme.com/account/#etheme_customization_panel.

Please note that, unfortunately, there are no other available methods to achieve the outcome you have in mind.

Thank you for your understanding.

Best regards,
The 8Theme Team
#418690 Copied
Andrew Mitchell

Support staff

October 15, 2024 at 15:36

Dear Fifco2000,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#418786 Copied
Viewing 6 results - 1 through 6 (of 6 total)