I suspect you have checked “Sold individually” in the Product data meta box, Inventory tab. If so, the user may buy only one at a time, so no need for a quantity input.
thank you so much! it did solve the issue. now I have another issue but I doubt it’s theme specific. on the quantity box, you have something that’s hardly discernible. if you look closer it looks like an up and down arrow. I think I may need to contact studiopress for that.
The up and down arrows are the standard way for modern browsers to render an input[type=”number”] field.
The actual number is partially hidden because there is too much padding on the element. This can be corrected by some custom css:
.woocommerce .quantity .qty {
padding: 9px;
}
thanks so much – again! I went ahead and added that line to the css but the arrows are still too tiny. I guess we may need to increase the size of the element.
The smallness of the arrows is a common problem. There doesn’t seem to be a generally accepted cross-browser fix. Increasing the size of the element doesn’t help. You can increase the font size:
.woocommerce .quantity .qty {
padding: 0 !important;
font-size: 32px;
}
Ideally one would hide the up/down arrows and provide separate up/down or +/- buttons powered by Javascript, but that’s outside the scope of a forum answer.
thank you so much. one question though: should I put it in the theme css or in a file in the woocommercee plugin? if so, which one please? thanks. I got a response from studio press. though they said they cannot assist in theme customization, they pointed me to where I should look> snippet as follows:
<input type=”number” id=”quantity_5d346a554d6ae” class=”input-text qty text” step=”1″ min=”1″ max=”20″ name=”quantity” value=”1″ title=”qty” size=”4″ inputmode=”numeric”> == $0
if I know where that snippet is located, I’m sure I will be able to modify it. thank you again.
Any theme or plugin file should not be edited because edits will be overwritten by updates. The custom css should be entered at:
Dashboard > Appearance > Customize > Additional CSS
The point to make to the theme vendor is that the buttons are, by default, too small to be useable and they should be revising the theme to overcome that. You’re not asking for customisation, you’re asking for a defect to be put right.
thank you for your input. I agree. I thought this was minor and it was a shortcoming in the way that displayed. I’m sure the issue wouldn’t be in another theme. that said, this is a child theme. so editing it will not be affected by updates.
now I see the problem. it’s not the size of the font or the padding. it’s the arrows are too small. so small on chrome that you can hardly tell what they are, much less to act on them. so it looks like it’s a woo commerce issue rather than the theme that I’m using. your thoughts?
Nope, the arrows are a UI feature rendered by the browser. If you increase the font size and decrease the padding as per the above css, the arrows will be commensurately bigger. The theme author could have done this if he’d have thought of it.
The simple way if you don’t like the arrows would be to hide them in css, then allow the customer to only fill in the field as text, which they can do already.
thank you for all of your help. the issue has been resolved. though they didn’t acknowledge guilt, they sent me 2 css snippets that I used I had to tweak the second one to suit my taste because the font was a little too big:
1.
input.input-text {
padding: 10px 0;
}
2.(which eerily looks like the original snippet you sent me!)
woocommerce .quantity .qty {
font-size: 28px;
font-size: 2.8rem;
padding: 0;
width: 2em;
}
I reduced font size to 16px and 2.0rem respectively. I know about em though I don’t remember about rem.
Hi @soulcis,
I’m glad to see that @lorro was able to help you get this all sorted.
I’ll go ahead and mark this thread as resolved now. If you have any other questions, feel free to open a new thread.
