WordPressのWooCommerceを2024年に触ったらいろいろめんどくさかったのでメモ【ブロックじゃなくてショートコードで作る】

2024年最新バージョンのWooCommerceはブロックベースでテーマを作るのが主流みたいですが、ショートコード方式との違いで少し混乱したのでここにメモしますw

今回使った方法はショートコードを使う方です。

WooCommerceって何

WooCommerceはWordPressを瞬時にECサイトに変えてくれるプラグイン。世界でもShopifyの次にシェアがあって個人的にはShopifyの献上金払いたくないならWooCommerceおすすめ。

Qiitaにあったテンプレまとめ記事が便利

Qiita

外部リンク

WooCommerceページデザインをカスタマイズする際のphp構成 - Qiita

https://qiita.com/woonotch/items/80f735f5627111b7f404

作業環境wordpress設定ページ設定woocommerce設定カスタマイズの準備各ページに読み込むphpファイルショップページ商品詳細ページカテゴリーページお買い物カゴページ…

これ参考にして旧式の方法でサイト作ってみました。書いてくれた人ありがとうw

ブロックエディタで作るほうが楽（なのか？）とりあえずリソース多い方のこっちで作成したので参考に。

1. WooCommerceプラグインインストール
2. 上記プラグインディレクトリの中のtemplateってディレクトリを丸っとテーマ内ルートにコピー
3. tempalteをwooCommerceにリネーム
4. 初期設定だとブロックエディタ基準でページが作られるので消す
5. それぞれショートコードでページを作り直す

で変更したいテーマを変更してく感じです。

子テーマ(Storefront)でも上記の方法でそのままできたので問題なさそう。

ちょっとしたフックまとめ

チェックアウトの会社名入力フィールド消し

下記フックでチェックアウトのフィールド消しできます。

add_filter('woocommerce_checkout_fields', 'custom_remove_checkout_fields');
function custom_remove_checkout_fields($fields)
{
    unset($fields['billing']['billing_company']);
    return $fields;
}

注文メモ欄も消す

チェックアウトのテキストエリアも消せます。

add_filter('woocommerce_checkout_fields', 'remove_order_notes_field');

function remove_order_notes_field($fields)
{
    unset($fields['order']['order_comments']);
    return $fields;
}

メールを開発環境によってわける

クライアント側の本番サイトで毎度テストメール送ってたらめんどくさいのでここで環境によって変わるように指定（ただ下記コードだと毎度メールをdbに保存してるので修正は必要かも、まぁローカルだけこれ置いときゃ良いかなとw）このファイルをignoreか何かしてローカルだけで作動する機能へ変更。(mu-pluginsとか使っても良いかも)

function update_woocommerce_email_settings()
{
    $email_option_keys = [
        'woocommerce_new_order_settings', // 新規注文
        'woocommerce_cancelled_order_settings', // キャンセル注文
        'woocommerce_failed_order_settings', // 失敗注文
    ];

    // 指定したいメール
    $custom_recipient = "sample@gmail.com";

    foreach ($email_option_keys as $option_key) {
        $email_settings = get_option($option_key);
        if ($email_settings === false) {
            $email_settings = [
                'enabled'    => 'yes',
                'recipient'  => $custom_recipient,
                'subject'    => '',
                'heading'    => '',
                'email_type' => 'html',
            ];
        } else {
            $email_settings['recipient'] = $custom_recipient;
        }
        update_option($option_key, $email_settings);
    }
}
add_action('init', 'update_woocommerce_email_settings');

WooCommerce使ってコードベースでカスタマイズしたい人はショートコードの方が良いのでは？ということでまとめてみました。ただテンプレがWooの更新で変わってしまうので差分チェックめんどくさいって感じはしたのでfunctions.phpでhooks使ってまとめたほうが良い気はしたけどそれはそれで限界あるよなーって感じでした。

それではSee Yaaaaaaaa!!!

sgw

フロントエンド

XFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。