WooCommerce：商品の購入数にプラス・マイナスのボタンをつける方法
WooCommerceの商品を購入する入力欄にプラスとマイナスのボタンを追加する方法です。
WooCommerceの商品購入数が使いづらいため、下記の図のようにプラスとマイナスのボタンを追加して操作しやすくします。
購入数にプラス・マイナスのボタンをつける
functions.phpとCSSを編集していきます。
まずは、functions.phpに下記のコードを記述します。
functions.php
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>';}add_action( 'wp_footer', 'add_cart_quantity_plus_minus' );function add_cart_quantity_plus_minus() {if ( ! is_product() ) return;?><script type="text/javascript">jQuery(document).ready(function($){ $('form.cart').on( 'click', 'button.plus, button.minus', function() {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' ));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} ?>次に、数字が記入されているインプット欄のスピンボタンを、CSSで非表示にします。
CSS
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none;}
input[type="number"]
{
-moz-appearance: textfield;
}
以上で完了です。
あとはフォントサイズや枠など自由に装飾してください。
