The arrows in the QTY box of the Product Page & Basket Page of WooCommerce.

  • Resolved noisychook

    (@noisychook)


    3 years, 10 months ago

    Hi

    In Firefox you cannot press on the arrows to change the qty number, in the Product Page & Basket Page.
    You have to place the mouse cursor to the very far right edge of the arrows
    before able to. (only when the cursor changes from ‘Input symbol “I” ‘
    TO an arrow symbol)

    * I changed the theme to WordPress’s default “Twenty Twenty One” and
    still the same issue.`

    I don’t know if this is a bug fix required or additional tweaking for the various browsers out there.

    For me looks to be a Firefox for desktop (PC, don’t have a Mac to test) issue.
    The browsers: MS Edge & Android 9 – Firefox mobile … have no issues.

    After tinkering with CSS code, I found this fix: (using Firefox inspector) FYI

    ==================================================
    /* QTY value box arrow fix in Single Product Page */
    .woocommerce #page-wrapper .product .cart .qty {
    padding-right: 2px;
    padding-left: 8px;
    }

    /* QTY value box arrow fix in WooCommerce Basket Page */
    .woocommerce .shop_table .quantity .qty {
    padding-right: 2px;
    padding-left: 8px;
    }
    ===================================================

    The original figures were 12px, 12px … don’t know where this comes from, still learning css.
    This allows a 3 & 4 respectively digit numbers to be seen, though I prefer only 2 digit display windows, working on that.

    The issue is the ‘padding-right’ figure, it has to be a low number before it works correctly with the arrows & mouse cursor. Personally I don’t know why.

    Naturally this is having some effect on the visual look using Microsoft Edge & Android 9 – Firefox mobile.
    * In MS Edge: The product page can only visibly show one digit now.

    This change below, corrects both pages, without needing the code change above:

    .woocommerce .quantity .qty {
    padding-right: 2px;
    padding-left: 8px;
    }

    I hope there is a fix which all browsers are happy with.

    I used this URL to test your Storefront theme and same issues
    https://themes.woocommerce.com/storefront/product/lowepro-slingshot-edge-250-aw/

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)
  • laceyrod

    (@laceyrod)

    Automattic Happiness Engineer

    Hi @noisychook –

    Thanks for reaching out.

    Can you send a screencast of what you are seeing? I tested the sample URL with Storefront theme and wasn’t able to reproduce this in Firefox (desktop):

    Thanks and looking forward to your reply.

    Thread Starter noisychook

    (@noisychook)

    Hi @laceyrod

    I’ve included this video of the issue using the URL of the StoreFront theme as mentioned previously. I hope this helps. Used latest version of Firefox Desktop PC.

    Video of issue

    Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Hey there!

    A couple things:

    Since you see this on our testing site, as well as you seeing it on Storefront on your site; all while we don’t see this on any Storefront themed site, seems to indicate that there might be something in your specific browser that is changing the default look and function of the qty selector.

    I’d recommend testing it on another browser, another device altogether, etc.

    Thread Starter noisychook

    (@noisychook)

    Hi @slash1andy;

    I agree something is odd.

    As you saw with @laceyrod reply with her screen capture, there is customization with her Firefox, as I’ve never come across ’rounded’ arrows before in the QTY box.

    I’ve tested other demo themes on the web with mixed results and other devices/web browsers. Unfortunately there is no common denominator, which is frustrating.
    I’ve put a shout-out to Firefox, but no response yet.

    Still backtracking to find when this change had occurred and I haven’t seen anyone else on this forum noticing an issue.

    So, best to close this thread and thank you both for your input.

    Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Hey again!

    I hope you have good luck figuring this dilemma out!

    I’m marking this as resolved per your recommendation.

    Thread Starter noisychook

    (@noisychook)

    Hi @slash1andy @laceyrod

    Just a quick update. Updated Firefox Desktop PC to v89 (just released) and Mozilla have corrected the issues with a revamp of their ‘web form controls’.

    So my problem vanished overnight so to speak.
    I don’t have details on specifics to give, as Mozilla does not give them out to plebs.

    Anyway its back to its normal self the arrows.

    Thanks.

    Plugin Support AW a11n

    (@slash1andy)

    Automattic Happiness Engineer

    Glad to hear that this is fully sorted for you, what a weird one!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘The arrows in the QTY box of the Product Page & Basket Page of WooCommerce.’ is closed to new replies.