Quantity in cart only displays in Internet Explorer

  • Author
    Posts
  • #144427

    When adding items to my cart, the quantity of the item in your cart only displays correctly when using Internet Explorer. When I test in Chrome and Safari, the quantity is not displayed, although the cart total will calculate correctly when updating the cart quantity.

    When I inspect the element, I find the following:
    <input type="number" id="quantity_5cf7108e14701" class="input-text qty text" step="1" min="0" max="" name="cart[f1b6f2857fb6d44dd73c7041e0aa0f19][qty]" value="4" title="Qty" size="4" inputmode="numeric">

    I then try to add the following CSS to my site but the color of the text doesn’t change:

    .input-text qty text	{
    	color: black;
    }

    Any help would be great. Thanks!

    The blog I need help with is eastendflorals.com.

    #144435

    lelandf
    Theme Author

    Hi there,

    Hmm, interesting bug you have uncovered.

    A couple issues with your code:

    – The CSS selector is not valid. It should be something like .woocommerce .quantity .qty. If you want to learn more about this, this article might help.

    – The issue causing the number to be invisible is not because of the font color. It is because WooCommerce has a fixed width on its quantity element and Spatial adds padding to several input elements including number inputs, which is what WooCommerce’s quantity element is. These two conflicting rules cause the quantity number to be “smushed” inside.

    It should be resolvable with the following CSS:

    .woocommerce .quantity .qty { box-sizing: content-box; }

    Changing the box-sizing value makes sure that padding is added to the fixed width of WooCommerce’s quantity input, rather than included (or “smushed”) within it.

    Let me know how this works out for you!

    Best regards,
    Leland

    #144436

    Leland, thanks for your reply! The quantity now displays in Chrome. I also tested on mobile safari and it looks good too. Thank you!

    #144453

    lelandf
    Theme Author

    Glad to hear that! If you notice any other issues like this, feel free to open a new topic and I’ll take a look.

    Best regards,
    Leland

The topic ‘Quantity in cart only displays in Internet Explorer’ is closed to new replies.