at some point i did this here in a development environment but decided against it.
if memory serves me right it was either because it confused the issue for the user or the boxes would have been way too big for the cart, but I cannot remember anymore exactly.

i guess your could try adding this again along these lines so the relevant scripts/styles get loaded on all pages and not only the order page.

you will possibly also have to apply the spinner css/styles again somehow after the car is refreshed . *perhaps* look here https://www.wp-pizza.com/topic/running-your-own-custom-javascript-functions-on-cart-refresh/

anyway , the below might get you going (not tested though and just off the top of my head so to speak)

add_action('wp_enqueue_scripts', 'my_script');
add_action('wp_footer', 'my_footer_script');
function my_script(){
global $wp_scripts;
/*get wppizza options*/
$wppizza_options = get_option('wppizza');
$style= $wppizza_options['layout']['order_page_quantity_change_style'];
/*load spinner css on all pages - keep 'order_page_quantity_change_style' to only enqueue once*/	
$ui = $wp_scripts->query('jquery-ui-spinner');
wp_enqueue_style('jquery-ui-'.$style.'', "//ajax.googleapis.com/ajax/libs/jqueryui/".$ui->ver."/themes/".$style."/jquery-ui.min.css", false, null);    	
/*load spinner js*/ 	
wp_enqueue_script("jquery-ui-spinner");
}
function my_footer_script(){
print'<script>
jQuery(document).ready(function($){
var spinnerElm=$( ".wppizza-cart-incr" );
spinnerElm.spinner({ min: 0});/*set min var*/
spinnerElm.on( "DOMMouseScroll mousewheel", function ( event ) {
if( event.originalEvent.detail > 0 || event.originalEvent.wheelDelta < 0 ) { //alternative options for wheelData: wheelDeltaX & wheelDeltaY
// down
if (parseInt(this.value) > 0) {
this.value = parseInt(this.value, 10) - 1;
}
} else {
// up
this.value = parseInt(this.value, 10) + 1;
}
//prevent page from scrolling
return false;
});
});
</script>
';  
}