Width of quantity input field in shopping cart

[pocket]

Hi,

the maximum width of the quantity field in the shopping cart can only show 2 digits. If the quantity is greater than 99, only the first two digits are displayed.

<input type="number" min="1" name="quantity" value="5000" size="1" class="eStore_cart_item_qty" style="max-width:60px;">

Can this be changed so that the maximum width can be specified in css.

Thanks
Ian

[admin]

Should be able to use something like the following CSS tweak to make that field wider:

.eStore_cart_item_qty{
width: 100px !important;
}

[pocket]

Hi,

we tried that, it doesn’t work. It just makes the quantity column wider, but not the quantity input field.

Sample page: [pocketprograms.com/wp-checkout]

Thanks
Ian

[admin]

I have made a change in the PHP code for this. I have sent you an updated copy via email to test.

[pocket]

Hi,

we have installed the new version (8.4.1), but the width does not change.

If I inspect the HTML it shows

<input type="number" min="1" name="quantity" value="99999" size="2" class="eStore_cart_item_qty" style="max-width:60px;">

I think the max-width:60px is overriding my entry in the CSS. If I ‘disable’ max-width:60px using chrome developer tools, then the field is displayed much wider (I have set width:500px in the css).

Regards
Ian

[admin]

This one is usually a theme specific issue. We have it currently set in a way that should work for most themes but some will need a little bit of CSS tweak.

[pocket]

Unfortunately max-width overrides width

Luckily min-width overrides max-width, so as a temporary solution I have added the following css to the theme:

.eStore_cart_item_qty {
width:200px !important;
min-width: 200px;
}

Can you move the style max-width from the element into your css file in a future release. Then we can override the setting in the theme css.

Thanks
Ian

[admin]

I will try to change this.

You are using the “Show Quantity Update Button” option right?

[pocket]

Yes, Show Quantity Update Button is ticked.

[admin]

Thank you. I have update the core plugin’s code for this.

[Author]

Posts