Mini cart quantity is invisible

  • Resolved anphira

    (@anphira)


    9 months ago

    I just updated to Woo 10.0.3 and the mini cart quantity field is invisible.

    Specifically, the html output on the page is:

    <span class="wc-block-mini-cart__badge">1</span>

    And the CSS that Woo includes for this:

    :where(.wc-block-mini-cart__badge) {
        background-color: transparent;
        color: transparent
    }

    The code is in: /wp-content/plugins/woocommerce/assets/client/blocks/mini-cart.css?ver=wc-10.0.3:1

    Useful content should not be set to transparent. This is a WCAG failure of the text minimum contrast.

Viewing 8 replies - 1 through 8 (of 8 total)
  • Stef

    (@serafinnyc)

    9 months ago

    It’s really hard to help without a URL to view to inspect the console/elements @anphira chances are there’s a conflict with your theme or another plugin though. If we could get a URL we can better assist.

    Plugin Support LovingBro (woo-hc)

    (@lovingbro)

    9 months ago

    Hi @anphira,

    I understand how frustrating it is to discover that the mini cart quantity is invisible, especially after an update. You’re absolutely right that making important content like that transparent is not ideal, and I appreciate you pointing out the accessibility concern as well.

    Just as @serafinnyc mentioned, it would really help to view the issue directly. Please also share your System Status Report so we can get insight into your full setup, including your site URL, theme, and active plugins.

    You can find it under WooCommerce → Status → Get system report, then click Copy for support and paste the full output at https://pastebin.com or https://gist.github.com and share the link here.

    Once we have that, we’ll be in a much better place to dig into this with you. Looking forward to your update!

    Thread Starter anphira

    (@anphira)

    9 months ago

    I specifically cited the location of the CSS code distributed with WooCommerce. The CSS code that you need to fix was listed in my first request. I clearly cited the specific file that is distributed with the WooCommerce plugin. The code is in your plugin — I cited exactly what the code is that needs fixing. https://hello.easya11yguide.com/wp-content/plugins/woocommerce/assets/client/blocks/mini-cart.css

    This has come up multiple times in the past where your support team has to actually download your own plugin and read the code distrbuted in your own plugin. The code is not kept in your github repo. It’s final compiled CSS that you distribute with the download.

    Here is a test site: https://hello.easya11yguide.com/product/test-product/

    Stef

    (@serafinnyc)

    9 months ago

    Hi @anphira thanks for the live url. However, you don’t have any products to add to the mini-cart. So it makes it difficult to replicate your issue.

    You’re also using a custom theme that you are building it appears and we do not support that in this forum per forum rules. I’m sure if you switch to a default theme the issue your encountering wouldn’t be found.

    If you can add a demo product I don’t mind assisting, if you can’t you’ll have to look at your theme.

    Thread Starter anphira

    (@anphira)

    8 months, 4 weeks ago

    I have switched to Storefront. The widget is in the sidebar. Look at the SIDEBAR minicart.

    https://hello.easya11yguide.com/product/test-product/

    The problem is the CSS that your plugin ships with. The error, which I listed in my first post with the transparent content is loaded from your plugin. I want you to fix the CSS code that your plugin ships with.

    The problem code is in: /wp-content/plugins/woocommerce/assets/client/blocks/mini-cart.css

    This is the specific CSS that is in that file. Again, the problem is in WooCommerce plugin and the CSS that ships with it.

    :where(.wc-block-mini-cart__badge) {
        background-color: transparent;
        color: transparent
    }
    Stef

    (@serafinnyc)

    8 months, 4 weeks ago

    Thanks for that @anphira Just reverse this by overriding the CSS for blocks. If you switch to something else it’ll be different.


    :where(.wc-block-mini-cart__badge) {
        background:#000 !important;
        color:#fff !important;
    }

    Most theme’s override this rule. They either keep it hidden or they add color.

    • This reply was modified 8 months, 4 weeks ago by Stef.
    Sai (woo-hc)

    (@saivutukuru)

    8 months, 4 weeks ago

    Hi @anphira,

    Thank you again for reporting this and for providing such a clear breakdown of the issue.

    I’ve confirmed the behavior and opened a GitHub issue for our developers to review this further:
    https://github.com/woocommerce/woocommerce/issues/59902

    As @serafinnyc rightly pointed out earlier, most themes either override the mini cart badge styles or hide it by default. Until the upstream CSS is adjusted, a quick workaround is to manually override the styles by adding this CSS under Appearance → Customize → Additional CSS:

    :where(.wc-block-mini-cart__badge) {
    background: #000 !important;
    color: #fff !important;
    }

    This will make the quantity badge visible again while we wait for a permanent fix.

    Thanks again to @serafinnyc for pointing out the workaround, and to you for your persistence and detailed testing.

    Let us know if there’s anything else we can help with!

    Plugin Support Chris Moreira – a11n

    (@chrism245)

    8 months, 1 week ago

    I’m going to mark this as resolved, as we haven’t heard back from you in a while. Please open a new thread if you need further assistance.

    If you have a few minutes, we’d love if you could leave us a review: https://ww.wp.xz.cn/support/plugin/woocommerce/reviews/

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Mini cart quantity is invisible’ is closed to new replies.