Return to previous page

New, Sale, Hot labels are NOT RESPONSIVE

This topic has 6 replies, 3 voices, and was last updated 2 months, 2 weeks 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)