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

[El Patron]

On 9/17/2023 at 10:32 AM, 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

we have solution which might interest you, at category when add to cart it changes  the add to cart to show qty, they can then see the category as a 'real' isle shopping.  

 

her is client example, click any add to cart, others require options.

https://calligraphyartsuk.com/en-co/8-calligraphy-dip-pens-ink

this has proven over and over again to improve visitor experience and increase total products  by car...

this post only to show our passion for making solutions that are better than any idea store amin might have looool

[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.