WooCommerceのカスタマイズまとめ

2023.09.052026.10.01

以下は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を使った方が綺麗に余白を調整できます。

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

.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 .flex-control-thumbs li {
    width: calc((100% - 1.2em) / 5);
    gap: 1em;
    float: none;
}
/* 選択表示状態を逆に */
.woocommerce .flex-control-thumbs li .flex-active, .woocommerce .flex-control-thumbs li img:hover {
    opacity: .5;
}
.woocommerce .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でカートボタンを好きな場所に配置する

カートに入れた数を掲載したカートボタンはヘッダーやスマホのフォロワーの中に表示したりするので、ショートコード化してあげると便利です。

ウィジェットに配置なりフックで好きな表示することが容易になります。

// カートボタンのみを表示する共通関数
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例との同期と実店舗環境の表示は未検証です。