I added the following code to display the quantity-controls
span.quantity-box, span.quantity-controls {
display: inline-block;
}
But the + and - do not show.
quantity-controls
Hi modernmagic,
I have checked the new.retaildisplayusa.com site and see that the button showing well. Give me the site URL if you still face this issue.
They are only displaying after adding all this custom css:
span.quantity-box, span.quantity-controls {
display: inline-block;
}
input.quantity-input.js-recalculate {
width: 80px;
}
input.quantity-input {
text-align: center;
}
span.quantity-controls input.quantity-plus {
background: url(/components/com_virtuemart/assets/images/vmgeneral/quantity-controls.png) no-repeat;
margin: 1px 0;
}
span.quantity-controls input.quantity-minus {
background: url(/components/com_virtuemart/assets/images/vmgeneral/quantity-controls.png) repeat-x;
background-position: 15px 0;
margin: 1px 0;
}
div.productdetails-view span.quantity-controls input.quantity-controls {
padding: revert;
border: none;
}
span.quantity-controls {
width: 15px;
display: inline-flex;
vertical-align: middle;
margin: 0 0 0 1px;
flex-direction: column;
}
span.quantity-controls input.quantity-controls {
height: 15px;
border: none;
width: 15px;
cursor: pointer;
}
Why were the quantity buttons hidden by default in the first place?
Hi modernmagic,
I have checked and see that the following CSS has hidden this box, this is a confusion of the template, we will update it.
span.quantity-box, span.quantity-controls {
display: none;
}You can use the following CSS code that you added to show this box:
span.quantity-box, span.quantity-controls {
display: inline-block;
}And to remove other CSS code and then if you want to show the icon, you can go to the Backend > VitureMark > Configuration > Templates tabs and find the following option to enable it:
