WooCommerceのカートページの数量のボックスに+-ボタンを追加する方法です。フックが見つからなかったため、ちょっと強引な方法ですが、参考までに。

カートページにのみ追加

JavaScript、CSS は別ファイルに。functions.php に記述するコードは以下のような感じです。

/*-------------------------------------------*/
/* カートページにのみ追加
/*-------------------------------------------*/
function etbs_cart_scripts() {
	if( is_page('cart') ) {
		wp_enqueue_script( 'cartjs', get_stylesheet_directory_uri() . '/js/cart.js', array( 'jquery' ), '1.0.0', true );
		wp_enqueue_style( 'cartcss', get_stylesheet_directory_uri() . '/css/cart.css', array(), '1.0.0' );
	}
}
add_action( 'wp_enqueue_scripts', 'etbs_cart_scripts' );

追加するJSファイルの中身

JSファイルの中身は以下のような感じです。

window.onload = function(){
	jQuery('.woocommerce table.shop_table div.quantity input.qty').after('<span class="tm-qty-minus"></span><span class="tm-qty-plus"></span>');
}

function initQty() {

    var body =  jQuery('body');
    body.on("click", ".tm-qty-plus", function () {
        changeQuantity( jQuery(this).parent(), 'add');
    });
    body.on("click", ".tm-qty-minus", function () {
        changeQuantity( jQuery(this).parent(), 'remove');
    });

    function changeQuantity(quantity, state) {
        var input = quantity.find('input[type="number"]'),
            max = input.attr('max'),
            min = input.attr('min'),
            inputVal = parseFloat(input.val());

        switch (state) {
            case 'add':
                if (inputVal < max || '' === max) {
                    inputVal = inputVal + 1;
                }
                break;
            case 'remove':
                if (inputVal > min) {
                    inputVal = inputVal - 1;
                }
                break;
            default:
                break
        }

        input.val(inputVal);
        input.trigger("change");
    }
}

initQty();

追加するCSSファイルの中身

CSSファイルの中身は以下のような感じです。

div.woocommerce table.shop_table td { min-width: 132px; }
div.quantity { 
	position: relative;
	width:130px;
	margin-left: calc(100% - 130px);
}
div.quantity .tm-qty-minus { left: 1px; }
div.quantity .tm-qty-plus { right: 1px; }
div.quantity .tm-qty-minus, div.quantity .tm-qty-plus {
	position: absolute;
	top: 1px;
	height: calc(100% - 2px);
	cursor: pointer;
	text-align: center;
	width: 45px;
	line-height: 46px;
}
div.quantity .tm-qty-minus:before { content: "\2212"; }
div.quantity .tm-qty-plus:before { content: "\2b"; }
div.quantity input.qty {
	width: 130px!important;
	padding: 9px 10px 10px;
	text-align: center;
	border: 1px solid rgb(235,235,235);
	border-radius: 2px;
	line-height: 28px;
}
.qty::-webkit-inner-spin-button,
.qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
	-moz-appearance:textfield;
}

上手く実装できない場合はオンラインでのサポートもお受けしていますので気軽にご相談ください。

自己紹介

松田 大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「 こどもICTかつしか教室 」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ