Modify product quantity touchspin

[DARKF3D3]

I need to modify product quantity field moving decrease quantity button to the left, and increase to the right. (quantity field showed on product page and checkout).
To be done on PS8.1
Avoiding to edit theme.js file

Edited September 17, 2023 by DARKF3D3 (see edit history)

[MEG Venture]

3 hours ago, DARKF3D3 said:

I need to modify product quantity field moving decrease quantity button to the left, and increase to the right. (quantity field showed on product page and checkout).
To be done on PS8.1
Avoiding to edit theme.js file

Offer is sent

[DARKF3D3]

Your solution it's interesting, but I think it fit better for categories only because of the limited space available.
The quantity field I'm trying to modify it's the one on product page (and checkout), I'm not using add to cart button on categories.

[Butch0071]

Have you managed to change it?

I know how to make it to look like this - but how to make it work right without modyfing core js.

 

[Butch0071]

<div class="cart-input-wrapper">
	<div class="input-group bootstrap-touchspin">
      <span class="input-group-addon bootstrap-touchspin-prefix" style="display: none;"></span>
      <input style="width: 40px; display: block;" class="js-cart-line-product-quantity form-control" 
             data-down-url="op=down" 
             data-up-url="op=up" 
             data-update-url="" 
             data-product-id="idproduct" 
             type="number" 
             value="25" 
             name="product-quantity-spin" 
             min="1">
      <span class="input-group-addon bootstrap-touchspin-postfix" style="display: none;"></span>
      <span class="input-group-btn-vertical">
        <button class="btn btn-touchspin js-touchspin js-increase-product-quantity bootstrap-touchspin-up" type="button">
          <i class="material-icons touchspin-up"></i>
        </button>
        <button class="btn btn-touchspin js-touchspin js-decrease-product-quantity bootstrap-touchspin-down" type="button">
          <i class="material-icons touchspin-down"></i>
        </button>
      </span>
  </div>
</div> 

OK - so I have it wrapped in DIV. Looks OK but buttons with +/- are not inline.
It is preview of HTML that is generated by all js in Presta. I was thinking to change the CSS to make buttons looks in line like this: "-" "input" "+"

If I make it looks good it doesn't work as it should - buttons do not increase or decrease..
I do not want to change core files.

To tell the truth it is really annoying - such a simple and obvious thing and such a pain the a...

 

Edited January 31, 2024 by Butch0071 (see edit history)

[DARKF3D3]

Unfortunatelly from what I saw the only way it's modifying the theme.js file.

[Jonathan Z]

Try this CSS, i used in theme WareHouse.

.bootstrap-touchspin {
    border-radius: 0px;
    overflow: hidden;
    border: 1px solid #979797;
    max-width: 9rem;
}
.bootstrap-touchspin .input-group-btn-vertical {
    position: static;
}
.bootstrap-touchspin .input-group-btn-vertical > .btn {
    width: 35%;
    height: 100% !important;
    border: none;
    padding: 0px;
    margin: 0px;
    background-color: transparent;
}
.bootstrap-touchspin .input-group-btn-vertical .btn i {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    top: 0px;
    height: 100%;
    color: #979797;
    width: 100%;
    justify-content: center;
    left: 0;
    font-size: 1.3rem;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up {
    position: absolute;
    right: 0;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-up i:before {
    content: "\f067";
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down {
    position: absolute;
    left: 0;
}
.bootstrap-touchspin .input-group-btn-vertical .bootstrap-touchspin-down i:before {
    content: "\f068";
}
.bootstrap-touchspin input {
    color: #979797 ;
    border: none;
}
.product-quantity .qty .input-group,
.block-cart-product-quantity {
    text-align: center !important;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 1.4285714286rem;
}
.product-quantity .qty .input-group i.fa-angle-up {
    top: 0;
}
.js-cart-line-product-quantity {
    padding-top: 0;
    padding-bottom: 0;
}