quantity selector SS

script.html

<script>
 
  // select the quantity input element
  el = document.querySelector('.product-quantity-input input')

  // create two elements to increase and decrease
  prev = document.createElement('div') 
  prev.id = 'btn-prev'
  prev.innerHTML = '-'
  next = document.createElement('div') 
  next.id = 'btn-next'
  next.innerHTML = '+'

  
  // attach the buttons to input
  el.parentNode.insertBefore(prev, el);
  el.parentNode.insertBefore(next, el.nextSibling);  

  // add behaviours
  next.addEventListener('click', ()=>{el.stepUp(1)})
  prev.addEventListener('click', ()=>{el.stepDown(1)})

</script>

<style>
  /* hide the default +/- slider buttons */
  .product-quantity-input input::-webkit-outer-spin-button,
  .product-quantity-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .product-quantity-input input[type=number] {
    -moz-appearance: textfield;
    border-radius: 0;
    width: 80px !important;
    text-align: center;
    padding-bottom: 0.65rem !important;
  }

  /* style increase decrease buttons */
  #btn-prev, #btn-next {
    display: inline-block;
    color: var(--tweak-product-basic-item-variant-fields-color);
    border-radius: 0;
    width: auto;
    background-color: #c57479;
    border: 1px solid #000;
    padding: 15px;
    font-size:1.5rem;
    cursor:pointer;
  }
</style>