Bug in Niche add product loading gear on mobile

Hi there,

wow never noticed that - good spot.
Can you try adding this CSS and let me know:

@media (max-width: 768px) {
    .woocommerce ul.products li.product .button {
        margin-right: unset !important;
    }
}

Hi David,

Thanks for your code. But there is no change with this CSS. Looks the same with or without.

I spend already some hours to solve this.. looks like a tricky one.. haha :)

I added some !important to the CSS above, try that.
If it still don't work can you leave the CSS added and share a link to your site?

Hi David

Thanks, but no change with the !important option.

You can find the URL in the first post in the Webseite URL field. The current code with !important is added to the CSS.

Thanks & Cheers

That code is actually working, it still overlaps the text a little but not as much without the CSS. The problem there is the length of the button text.

Hi David,

Okey.. I use WooCoomerce in german. So I guess the Text there comes from WooCommerce and not niche right?

Is there a way to overwrite this text?

Yeah Woo is responsible for the text and the translation.

Try this PHP Snippet:

add_filter( 'woocommerce_product_add_to_cart_text', function() {
    return 'your woo button text';
} );

Hi David

Ahh.. now it's quite better! Thanks

But I still see a little Error. The add loading gear is not on the same line with the text. I know, is a little thing, but I just noticed that. Can I do this with CSS?

https://ibb.co/d2v06Yx

Cheers

Hmmm probably because the height of the 'button' is less than it would be in the standard button.
Try this CSS instead of the above:

@media (max-width: 768px) {
    .woocommerce ul.products li.product a.button {
        margin-right: unset !important;
        padding: 10px 0;
    }
}

You may need to tweak the 10px padding value which is what sets the top and bottom padding.

Awesome! Oh Yeah! Thanks you so much! It works!

Cheers

Glad to be of help - and thanks for pointing it out. I'll try to get it updated in the Niche site.