[Resolved] Bug in Niche add product loading gear on mobile

[nik9]

Hello

I just noticed that there is a UX bug in Niche Theme. I found this bug first on my website but I’m also able to reproduce this on the niche demo page (https://generatepress.com/site-library).

If I add a product on mobile into the cart, the loading gear appears in the product text. On desktop the gear is on the right edge.

Here a link to a screenshot: https://ibb.co/JHfTjnv

I already tried to fix this but no success. Are you guys aware of this?

Cheers

[David]

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;
    }
}

[nik9]

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 🙂

[David]

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?

[nik9]

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

[David]

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.

[nik9]

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?

[David]

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';
} );

[nik9]

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

[David]

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.

[nik9]

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

Cheers

[David]

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

[Author]

Posts