Jeśli chcesz zmienić wygląd i sposób zmiany ilości w inpucie z trójkącików znajdujących się zaraz za cyfrą na plus i minus znajdujące się obok niej to w pliku functions.php Twojego szablonu, należy dodać poniższą formułę:
/* Show Buttons */
add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_plus' );
function display_quantity_plus() {
echo '<button type="button" class="plus" >+</button>';
}
add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_minus' );
function display_quantity_minus() {
echo '<button type="button" class="minus" >-</button>';
}
//Note: to place minus @ left and plus @ right replace above add_actions with:
//add_action( 'woocommerce_before_add_to_cart_quantity', 'display_quantity_minus' );
//add_action( 'woocommerce_after_add_to_cart_quantity', 'display_quantity_plus' );
add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );
function add_cart_quantity_plus_minus() {
// Only run this on the single product page
if ( ! is_product() ) return;
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('form.cart').on( 'click', 'button.plus, button.minus', function() {
// Get current quantity values
var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
var val = parseFloat(qty.val());
var max = parseFloat(qty.attr( 'max' ));
var min = parseFloat(qty.attr( 'min' ));
var step = parseFloat(qty.attr( 'step' ));
// Change the value if plus or minus
if ( $( this ).is( '.plus' ) ) {
if ( max && ( max <= val ) ) {
qty.val( max );
} else {
qty.val( val + step );
}
} else {
if ( min && ( min >= val ) ) {
qty.val( min );
} else if ( val > 1 ) {
qty.val( val - step );
}
}
});
});
</script> <?php
}
Nie zapomnij też o edycji wyglądu tych elementów:
.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
display: none;
margin: 0;
}
.quantity input.qty {
appearance: textfield;
-webkit-appearance: none;
-moz-appearance: textfield;
}
button.plus, button.minus, button:hover.plus, button:hover.minus{
background-color: #009CCD;
font-family: "Raleway", Sans-serif;
font-weight: 600;
color: #fff;
border: 0px;
border-radius: 45px;
padding: 5px 15px;
font-size: 20px;
margin: 0px;
}
input[type=number],input[type=number]:active,input[type=number]:hover{
padding: 0 15px;
}
