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

Home Forums Support Bug in Niche add product loading gear on mobile

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1348499
    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

    #1348552
    David
    Staff
    Customer Support

    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;
        }
    }
    #1348801
    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 🙂

    #1349166
    David
    Staff
    Customer Support

    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?

    #1349304
    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

    #1349330
    David
    Staff
    Customer Support

    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.

    #1349399
    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?

    #1349409
    David
    Staff
    Customer Support

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

    #1349442
    David
    Staff
    Customer Support

    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.

    #1349603
    nik9

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

    Cheers

    #1349609
    David
    Staff
    Customer Support

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.