【WooCommerce】カスタマイズ事例７選

WooCommerceには多数のアクションフックが用意されています。

それぞれ使いこなせばプラグインに頼らず多くののカスタマイズが可能になりますので、今回はその中でも利用頻度の高いカスタマイズ事例をご紹介します。

WooCommerceのアクションフックは下記にまとめられています。

WooCommerceアクションフック

WooCommerce会員登録項目の追加

対応後イメージ

会員登録時の入力項目を追加します。今回は会社名という項目を追加しました。

会員登録項目については、実はWP-Membersの追加設定でやった方が早かったりします。

解説はこちら

利用するアクションフック

会員登録の項目追加では3本のアクションフックを利用します。

アクションフック	概要
woocommerce_register_form_start	会員登録フィールドへのアクション追加
woocommerce_register_post	postによる情報登録時のアクション追加
woocommerce_created_customer	会員登録時の登録処理に対するアクション追加

woocommerce_register_form_start

アクションフックにより会員登録の最初の部分にコードを追記しています。最後に追加したい場合は

woocommerce_register_form_end

というアクションフックを使います。

function wooc_extra_register_fields() {
?<
    <p class="form-row form-row-wide">
        <label for="reg_company"><?php _e( '会社名', 'woocommerce' ); ?></label>
        <input type="text" class="input-text" name="company" id="reg_company" value="<?php esc_attr_e( $_POST['company'] ); ?>" />
    </p>
    <?php
}
add_action( 'woocommerce_register_form_start', 'wooc_extra_register_fields' );

コードの内容としては、companyという項目名でテキストフィールドを作成しています。

ポイントは name="company" の部分です。これでmeta keyを指定していますので、これ以降のコードでmeta keyを指定する場合はcompanyと記述する必要があります。

woocommerce_register_post

function wooc_validate_extra_register_fields( $username, $email, $validation_errors ) {
    if ( isset( $_POST['company'] ) && empty( $_POST['company'] ) ) {
        $validation_errors->add( 'company', __( '<strong>Error</strong>: 会社名は必須登録です', 'woocommerce' ) );
    }
    return $validation_errors;
}
add_action( 'woocommerce_register_post', 'wooc_validate_extra_register_fields', 10, 3 );

postされた情報を登録する際のバリデーションチェックです。とりあえず必須チェックのみ行っていますが、細かくチェックを行う場合はこちらに記述していきます。

woocommerce_created_customer

function wooc_save_extra_register_fields( $customer_id ) {
    if ( isset( $_POST['company'] ) ) {
        update_user_meta( $customer_id, 'company', sanitize_text_field( $_POST['company'] ) );
    }
}
add_action( 'woocommerce_created_customer', 'wooc_save_extra_register_fields' );

テキストフィールドを追加しただけでは実際に登録されませんので、登録処理に対するアクションを追加する必要があります。

WooCommerce管理画面での商品一覧への項目追加

商品登録する際には属性情報が設定できます。この属性情報を管理画面の商品一覧にも表示します。

WooCommerceのアクションフックではなく、Wordpress本体のアクションフックを利用しています。

事前準備

商品属性設定

まずは商品属性の準備をします。今回は「ブランド」という属性を新規作成しました。

スラッグはbrandとしています。スラッグは項目名として利用するためしっかり覚えておきましょう。

ブランドには「ぐっち」「ぶるがり」の２つのタームを設定しています。

商品登録

次に商品登録です。いま登録した属性を設定して商品登録を完了します。

利用するアクションフック

アクションフック	概要
manage_edit-product_columns	edit-productページのカラム名に対するアクション追加
manage_posts_custom_column	postsのテーブル表示部分に対するアクション追加

manage_edit-product_columns

add_filter( 'manage_edit-product_columns', 'custom_brand_column', 20 );
function custom_brand_column( $columns_array ) {
    $new_columns = array();
    foreach ( $columns_array as $column_name => $column_info ) {
        $new_columns[ $column_name ] = $column_info;
        if($column_name === "product_tag"){
            $new_columns[ 'brand' ] = 'ブランド';
        }
    }
    return $new_columns;
}

こちらは一覧表示のカラム名表示部分です。

カラムの配列を取得し、ループをまわします。今回は「タグ」の後ろに項目を追加したいので「product_tag」があればそのあとに追加したい項目を格納します。

先ほど属性に追加したbrandを配列のキーにします。

manage_posts_custom_column

function custom_populate_brands( $column_name ) {
    if( $column_name  == 'brand' ) {
        $terms = get_the_terms( get_the_ID(), 'pa_brand'); // taxonomy名　「pa_brand」であることに注意
        echo "<p>";
        foreach($terms as $key => $value){
            echo $value->name;
            if ($key != array_key_last($terms)) {
                // 最後でなければカンマ区切り
                echo ",";
            }
        }
        echo "</p>";
    }

}
add_action( 'manage_posts_custom_column', 'custom_populate_brands' , 20 );

こちらはテーブルの中身部分です。

カラムの名称がbrandであった場合に、取得する値を定義します。

ポイントは3行目のタクソノミー名を指定する部分です。属性登録の際にはbrandと登録しましたが、タクソノミー名はpa_brandと自動でpa_が付与されます。

これはWooCommerceの仕様によるものです。

アカウント詳細への追加項目表示

いわゆるMyAccountページに追加した情報を表示します。

対応後イメージ

実は

WP-Membersで会員登録時に追加した項目もこの方法で表示できます。

利用するアクションフック

アクションフック	概要
woocommerce_edit_account_form	アカウント詳細の編集画面に対するアクション追加
woocommerce_save_account_details	アカウント情報編集時の登録処理に対するアクション追加

woocommerce_edit_account_form

function edit_my_account_page_woocommerce() {
    $user = wp_get_current_user();
    woocommerce_form_field( 'company', array( //key
        'type'        => 'text',
        'class'        => 'company',
        'label'       => '会社名',
        'placeholder' => '株式会社〇〇',
        'required'    => false,
    ), get_user_meta($user->id,'company',true) );
}
add_action( 'woocommerce_edit_account_form', 'edit_my_account_page_woocommerce', 15 );

アカウント詳細の最後に会社名というテキストフィールドを追加しています。

woocommerce_form_fieldの使い方はこの通りです。

woocommerce_form_field( $key, $args, $value = null )

woocommerce_form_fieldの第三引数にuser metaから取得した値を入れることにより、登録済みの情報が表示されるようになります。

woocommerce_save_account_details

function save_my_account_details( $user_id ) {
    if( isset( $_POST['company'] ) ){
        update_user_meta( $user_id, 'company', sanitize_text_field( $_POST['company'] ) );
    }
}
add_action( 'woocommerce_save_account_details', 'save_my_account_details', 10, 1 );

アカウント情報編集時にpostで渡ってきた項目を登録します。

購入画面への項目追加

こちらの内容は公式サイトにも記述があります。

Customizing checkout fields using actions and filters

対応後イメージ

購入の都度、追加で情報を登録してもらいたい場合の項目追加

利用するアクションフック

アクションフック	概要
woocommerce_checkout_fields	購入画面のフィールドへのアクション追加
woocommerce_checkout_process	購入画面バリデーションチェックのアクション追加
woocommerce_checkout_update_order_meta	会員登録時の登録処理に対するアクション追加

woocommerce_checkout_fields

function custom_override_checkout_fields( $fields ) {
    $new_fields = array();
    foreach($fields as $name=>$value){
        $new_fields[$name] = $value;
    }

//company項目追加
    $new_fields['billing']['company']['type'] = 'text';
    $new_fields['billing']['company']['class'] = 'company';
    $new_fields['billing']['company']['placeholder'] = '会社名';
    $new_fields['billing']['company']['label'] = '会社名';
    $new_fields['billing']['company']['required'] = true;


//コメントフィールド非表示
    unset($new_fields['order']['order_comments']);
    return $new_fields;
}

add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

companyという項目を追加し、コメントフィールドを非表示にしています。

請求先部分に項目を追加しているので「billing」を指定していますが、配送先に追加したい場合は「shipping」と指定します。

配列の3項目目にはフィールドの要素を指定します。利用できるのは下記の通りです。

• type
• label
• placeholder
• class
• required
• clear
• label_class
• options

これ以外にも、HTMLのformフィールドとして利用できるものは指定しても問題ないようです。valueを指定しても問題なく初期表示されました。

woocommerce_checkout_process

function my_custom_checkout_field_process() {
    // Check if set, if its not set add an error.
    if ( ! $_POST['company'] )
        wc_add_notice( '会社名は必須です', 'error' );
}
add_action('woocommerce_checkout_process', 'my_custom_checkout_field_process');

入力項目を追加したら忘れずにバリデーション処理も追加します。ここでは必須チェックのみ行っています。

woocommerce_checkout_update_order_meta

function my_custom_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['company'] ) ) {
        update_post_meta( $order_id, 'company', sanitize_text_field( $_POST['company'] ) );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta' );

最後に登録処理になります。

WooCommerceでは注文に対する属性情報はpost meraに格納しているので、追加した項目の同じようにupdate_post_metaメソッドを使って登録します。

これで購入画面への項目追加は完了です。

管理画面の注文詳細への表示

注文詳細に表示するためにもカスタマイズが必要になります。

function my_custom_checkout_field_display_admin_order_meta($order){

    echo '<p><strong>'.__('会社名').':</strong> ' . get_post_meta( $order->id, 'company', true ) . '</p>';
}
add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

購入画面の項目編集

今度は購入画面のフィールド名称などを修正します。

対応後イメージ

こちらの例では配送情報の中の項目名を下記の通り変更しています。

「姓」　⇒　「配送先　姓」

「名」　⇒　「配送先　名」

利用するアクションフック

項目を追加した際のアクションフックと同じです。

アクションフック	概要
woocommerce_checkout_fields	購入画面のフィールドへのアクション追加

woocommerce_checkout_fields

function custom_override_checkout_fields( $fields ) {
    $fields['shipping']['shipping_last_name']['label'] = '配送先　姓';
    $fields['shipping']['shipping_first_name']['label'] = '配送先　名';
    return $fields;
}
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

配送先情報の中の姓・名部分を上書きしています。

fields配列の中で利用できる項目は下記の通りになります。

Billing

• billing_first_name
• billing_last_name
• billing_company
• billing_address_1
• billing_address_2
• billing_city
• billing_postcode
• billing_country
• billing_state
• billing_email
• billing_phone

Shipping

• shipping_first_name
• shipping_last_name
• shipping_company
• shipping_address_1
• shipping_address_2
• shipping_city
• shipping_postcode
• shipping_country
• shipping_state

Account

• account_username
• account_password
• account_password-2

Order

• order_comments

ダッシュボードメニューへの文言追加

ダッシュボードという割に大した表示もされていないあの部分です。あまりに寂しいので内容を充実させます。

対応後イメージ

リンクだけ追加しました。

これだけではまだ寂しいですが、出荷予定の注文情報を載せたり、再注文のレコメンドをしたり色々と使いようはあるページかと思います。

利用するアクションフック

アクションフック	概要
woocommerce_account_dashboard	ダッシュボード画面へのアクション追加

woocommerce_account_dashboard

function my_account_dashboard(){
    echo '<p>--------------------------------------</p>';
    echo '<strong><a href ="#">会員規約を参照</a></strong>';
}
add_action( 'woocommerce_account_dashboard', 'my_account_dashboard', 10, 1 );

ダッシュボード画面に文字列を出力します。

HTMLタグを出力できますので、細かくコーディングすれば色々と実現できると思います。

My accountメニューの追加

ログイン状態で表示されるMy accountのメニューですが、メニュー自体を追加することもできます。

対応後イメージ

利用するアクションフック

アクションフック	概要
woocommerce_account_menu_items	My accountへのアクション追加

woocommerce_account_menu_items

function custom_account_menu( $items ) {
    $items['item_url'] = __( '法人情報', 'woocommerce' );
    return $items;
}
add_filter('woocommerce_account_menu_items','custom_account_menu');

itemsに追加するメニュー名を格納します。

ポイントは配列のkeyがURLになります。

サンプルコードでは、メニューの遷移先RLは「/item_url」となりますのでご注意ください。

WooCommerceカスタマイズまとめ

WooCOmmerceは全世界で利用されているWordpress用ECプラグインということもあり、本当に多くのプラグインが開発されています。

もちろんプラグインを利用した方が便利なこともありますが、あまり多くのプラグインを利用するとレスポンスにも影響してきます。

プラグインを使わずともカスタマイズできる部分もありますので、双方見極めながら開発していきましょう。