Quantity input suffix

Hi, I’m trying to add a suffix to the quantity input box on the single product page and on the shopping cart, but it is being displayed under the input box, not to the right. CAn you please indicate the custom CSS (or php template) to align the quantity input box and the quantity input suffix?

thanks a lot!
p.s. alternatively a prefix would also work (aligned to the left of the quantity input box)

Attachments:

You must be logged in to view attached files.

Hello,

Please provide your site URL and product page URL we shall check and try to provide CSS.

Best Regards

Hi, I:m sending a private content now. thanks for your help

Just send us your admin access via the private content field.

Hi, I have reinstalled the plugin (Advanced Quantity Input from MorningTrain.dk), asked support from them but they wrote that the layout and display is controlled by the Theme.

Some products now show the input box,suffix and add to cart button aligned (presenting the wrong colors on the +/- buttons, though), but others not.

I appreciate your help.

Attachments:

You must be logged in to view attached files.

Hello,

Please check your site admin I cannot log in.

Best Regards

see private content below

Hi,

The plugin that you are using removes styles classes of our theme quantity buttons. In this case the buttons will look wrong.

Try to add the following code snippet to the Custom CSS area in Theme Settings to change plugin button styles.

.quantity .woo-advanced-minus,
.quantity .woo-advanced-plus {
    background-color: transparent;
    border: 1px solid #E0E0E0;
    background-color: transparent;
    color: #848484;
    min-width: 20px;
    background-color: #f9f9f9;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    border-radius: 0;
}

.quantity .woo-advanced-minus {
	border-right: none;
}

.quantity .woo-advanced-plus {
	border-left: none;
}

.quantity .woo-advanced-minus:hover, 
.quantity .woo-advanced-minus:focus, 
.quantity .woo-advanced-plus:hover, 
.quantity .woo-advanced-plus:focus {
		box-shadow: none !important;
    outline: none !important;
    background-color: #ECECEC !important;
    border-color: #E0E0E0 !important;
		color: black !important;
}

Regards

Hi, thanks a lot for your help! The buttons look the same in all products now.
I still have an issue on the shopping cart list. Some items have a wide quantity input box while others have the same box as on the product page (expected).
see more details in private below.
thanks again!

Attachments:

You must be logged in to view attached files.

Hi,

Your plugin changed the structure of quantity buttons so now they look different in the HTML markup (https://prnt.sc/kdqsw4). You need contact the plugin support to know what exactly option of the plugin makes products look different.

Try to replace the previous code with the following CSS code snippet to change the quantity form width:

.quantity .woo-advanced-minus,
.quantity .woo-advanced-plus {
    background-color: transparent;
    border: 1px solid #E0E0E0;
    background-color: transparent;
    color: #848484;
    min-width: 20px;
    background-color: #f9f9f9;
    transition: all .2s ease;
    -webkit-transition: all .2s ease;
    border-radius: 0;
}

.quantity .woo-advanced-minus {
	border-right: none !important;
}

.quantity .woo-advanced-plus {
	border-left: none !important;
}

.quantity .woo-advanced-minus:hover, 
.quantity .woo-advanced-minus:focus, 
.quantity .woo-advanced-plus:hover, 
.quantity .woo-advanced-plus:focus {
		box-shadow: none !important;
    outline: none !important;
    background-color: #ECECEC !important;
    border-color: #E0E0E0 !important;
		color: black !important;
}

body .on-cart-plus-minus-button input[type="text"] {
 	width: 40px !important;
}

body .plus-minus-button {
		float: none;
    display: inline-flex;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    flex-direction: row;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    -webkit-align-items: stratch;
    -ms-flex-align: stratcht;
    align-items: stratch;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    white-space: nowrap;
}

Regards

Thanks a lot for your quick help!
I now have all buttons on the same style, only the sizes are different for some product categories. I will contact the quantity plugin provider to ask what can be done in that respect.
Thanks a lot again for your help!

You are welcome!

[Author]

Posts