Home Forums Basel support forum Quantity input suffix Reply To: Quantity input suffix

#70633

Bogdan Donovan
Keymaster

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