WooCommerceのカスタマイズまとめ

2023.09.052026.10.21

以下はWooCommerceの従来型PHPテンプレートとギャラリー向けの例です。商品コレクションなどのブロックでは同じフックが動くとは限りません。PHPは子テーマのfunctions.phpまたは管理できるスニペットに、CSSは追加CSSへ配置します。元のコードを保存し、検証環境で1項目ずつ確認してください。戻す場合は追加したPHPとCSSを除去します。

WooCommerceのプラグインを使ったECサイト制作で、いくつかカスタマイズをしたので、その備忘録です。

WooCommerceで商品ギャラリーの列数を5列に設定

WooCommerceで商品ギャラリーの列数を変える場合のカスタマイズです。

function custom_woocommerce_gallery_columns() {
    return 5; // ギャラリーの列数を5列に設定
}
add_filter('woocommerce_product_thumbnails_columns', 'custom_woocommerce_gallery_columns');

CSS。

従来型ギャラリーのサムネイル一覧をflexで5列にします。標準CSSの4列指定より詳細度を高くし、4つの列間余白を引いた幅を各項目に指定します。商品画像が6枚以上の場合も、折り返した行とスマホ幅で確認してください。

あとは選択中のものだけ薄く表示にした方が見やすいです。

.woocommerce div.product .woocommerce-product-gallery .flex-control-nav.flex-control-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .3em;
    margin: .3em 0 0 0 !important;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li {
    width: calc((100% - 1.2em) / 5);
    margin: 0;
    float: none;
}
/* 選択表示状態を逆に */
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li .flex-active, .woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img:hover {
    opacity: .5;
}
.woocommerce div.product div.images.woocommerce-product-gallery .flex-control-thumbs li img {
    opacity: 1;
}

WooCommerceでショップページに在庫状況を表示する

従来型の商品ループに在庫状態を表示します。予約注文を在庫ありと断定しないよう、在庫切れ・お取り寄せを分けます。可変商品では親商品の状態なので、各バリエーションの在庫表示を保証するものではありません。

function display_stock_status_in_shop_loop() {
    global $product;
    if ( ! $product instanceof WC_Product ) {
        return;
    }
    $status = $product->get_stock_status();
    $labels = array(
        'instock' => '在庫あり',
        'outofstock' => '在庫切れ',
        'onbackorder' => 'お取り寄せ',
    );
    if ( ! isset( $labels[ $status ] ) ) {
        return;
    }
    printf( '<p class="waza-stock %s">%s</p>', esc_attr( $status ), esc_html( $labels[ $status ] ) );
}
add_action( 'woocommerce_after_shop_loop_item', 'display_stock_status_in_shop_loop', 15 );

見た目はお好みで。

.waza-stock.outofstock {
    color: var(--wc-red);
    margin: 8px 4px 4px 0;
    border-radius: 2px;
    letter-spacing: 0.05em;
}

WooCommerceでカートボタンを好きな場所に配置する

カート内の商品数量を表示するリンクをショートコードにします。ヘッダーやスマホの固定メニューなど、ショートコードを処理できる場所で利用します。商品種類数ではなく、同じ商品の複数個も含む数量です。

ショートコードブロックなどへ配置します。PHPのフックから出力する場合は、処理結果をechoする必要があります。例のark-block-buttonクラスはArkhe Blocksの装飾を前提とするため、それ以外の環境では自分のテーマに合わせてCSSを用意してください。

// カートボタンのみを表示する共通関数
function display_cart_button() {
    // WooCommerceが有効で、カートが存在するか確認
    if ( function_exists( 'WC' ) && WC()->cart ) {
        // カート内のアイテム数を取得
        $cart_count = WC()->cart->get_cart_contents_count(); 
        // カートのURLを取得
        $cart_url = wc_get_cart_url(); 
    } else {
        // WooCommerceがロードされていない場合、またはカートがない場合
        return ''; // カート未初期化時はリンクを出さない
    }

    // カートボタンのHTML出力
    ob_start(); // 出力をバッファリング
    ?>
    <div class="ark-block-button is-btn-fill" data-hover="bright" style="--arkb-btn-radius:8px">
        <a class="ark-block-button__link" href="<?php echo esc_url( $cart_url ); ?>" data-has-icon="1">
            <svg class="ark-block-button__icon -left" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" data-icon="LsCart" viewBox="0 0 48 48">
                <circle cx="37.5" cy="42.5" r="4"></circle>
                <circle cx="13.5" cy="42.5" r="4"></circle>
                <path d="M43.5 8.5H10.2l-.7-5.3c-.1-1-1-1.7-2-1.7h-5c-1.1 0-2 .9-2 2s.9 2 2 2h3.2l3.8 29.3c.1 1 1.7 2 2.7 2h29c1.1 0 2-.9 2-2s-.9-2-2-2H13.3l-.4-4h28.6c1 0 1.9-.8 2-1.8l2-16c.1-1.1-.8-2.2-2-2.2z"></path>
            </svg>
            <span class="ark-block-button__text">カート (<?php echo esc_html( $cart_count ); ?>)</span>
        </a>
    </div>
    <?php
    return ob_get_clean(); // バッファリングを終了し、バッファの内容を出力
}

// カートボタンをショートコード化
add_shortcode('cart_button', 'display_cart_button');

ショートコードは[cart_button]で表示できます。

この記事で紹介しているコードは、GitHubのMOTOKI-LLC/WAZA-codeにもまとめています。

カート件数はPHPでページを生成した時点の値です。Ajax追加後の自動更新は実装しておらず、ページキャッシュで他の利用者の件数を表示しない構成も必要です。動的な件数が必要ならWooCommerceのミニカートなどを検討してください。旧GitHub例との同期と実店舗環境の表示は未検証です。