web-dev-qa-db-ja.com

Woocommerce：カスタムフィールドとメールのショートコード、ec_custom_field

Woocommerce製品にカスタムフィールドを追加して、そのフィールドを購入から生成された電子メールに表示するにはどうすればよいですか。

これに関する文書は非常に少なく、その半分はコード構造が異なる数年前のもののようです。

custom-fieldwoocommerce
1
user92979

いろんなことをした後、私たちはそれを考え出しました。これが私たちが書いた文書です。 Woocommerceがこのために独自のドキュメントを書くのを煩わすことができないことは非常に残念です（代わりに、高価なプラグインへのリンクのみ）。

私は製品注文のためにテンプレートをカスタマイズすることについて話す部分を追加しませんでした、私はその部分をしませんでした。

背景：PHPは、ページを生成するために大量のコードを実行します。データを「処理」して物事を設定するために以前に実行された多くのフィルタがあります、そして最後に1つのアクションが基本的に結果ページのHTMLをプリントアウトするために実行されます。

ページがレンダリングを開始する前に「フィルタ」が実行されます。ページを書き込むために、すなわち生成されたＨＴＭＬを書き出してウェブブラウザクライアントに送信するために、「アクション」が実行される。

あなたはWoocommerceが提供する特定の時点であなた自身のフィルタとアクションを追加することができます（例えば、チェックアウトボタンの前にボタンをプリントアウトするために）。ワードプレス/ウーコマースがあなたのカスタム機能を実行する場所に「フック」するための特定のポイントがあります。

独自のものを追加するには、ファイルpublic_html/wp-content/themes/Divi-child/functions.phpを編集し、add_filter（）またはadd_action（）を呼び出します。* woocommerceフックのキー名*そのフックポイントの間に実行したい関数のテキスト名。あなたの関数はWoocommerceが実行中の特定の時点で実行されるリストに追加されます。

それで、カスタムフィールドのためのステップ。例は "eye color"、表示タイトルは "Eye Color"、キーは "eye_colour"です。

ステップ1：チェックアウトページに「アクション」を追加して、この新しいフィールドをレンダリングします。

////////////////////
//            (run this after 'order notes')   (call it 

custom_WHATEVERKEY_checkout_field - same as function name)
//                         |                             |
//                         |                             |
//                         v                             v
add_action( 'woocommerce_after_order_notes', 'custom_eye_colour_checkout_field' );

//       function name must match text above in add_action
function custom_eye_colour_checkout_field( $checkout ) {

    // div id can be anything, you use this id to match CSS styling
    // 'echo' will 'print' out HTML to the resulting page... this is the point of 'actions'
    echo '<div id="custom_eye_colour_checkout_field"><h2>' . __('Eye Colour') . '</h2>';

    // 'eye_colour' is the key... 'class' will be the CSS styling class
    // Label is displayed in the order page,
    // Placeholder is what is written in the little text box before user starts typing.
    //
    woocommerce_form_field( 'eye_colour', array(
        'type'          => 'text', // could be a number or something else, page will help validate
        'class'         => array('my-field-class form-row-wide'), // CSS style class
        'label'         => __('Eye Colour (whatever you like in the title)'),
        'placeholder'   => __('Enter the eye colour you would like, display in the entry text box'),
        ), $checkout->get_value( 'eye_colour' ));
    // note the eye_colour key at the bottom line here

    // and finish the little HTML enclosing div.
    echo '</div>';
}

ステップ2：ユーザーから「目の色」で入力したものを吸い込み、それを注文の詳細とともに保存します。

ユーザーは通常のHTMLフォームである "Place Order"を打つでしょう、そしてそれはウェブの世界でいつものようにHTTP POSTフィールドを通して詳細にタイプされたすべてを提出するでしょう。

だから私たちはそのフィールドを持ってきて、キーでそれを注文に「添付」する必要があります。これは「アクション」を介して行われますが、メカニズムやその実行時には正確にはわかりません。

以下のテキストキー**に注意してください。

update_post_meta( $order_id, ' ** eye_colour ** ', sanitize_text_field( $_POST['eye_colour'] ) );

POSTキーと同じである必要はありません。そのキーは注文に添付されています。しかし、今後も同じようにしましょう。通常、キーにはthis_kind_of_namingを単なる慣例として使用します。

add_action( 'woocommerce_checkout_update_order_meta', 'custom_eye_colour_checkout_field_update_order_meta' );

function custom_eye_colour_checkout_field_update_order_meta( $order_id ) {
    if ( ! empty( $_POST['eye_colour'] ) ) {
        update_post_meta( $order_id, 'eye_colour', sanitize_text_field( $_POST['eye_colour'] ) );
    }
}

ステップ3 - Wordpressのバックエンドにあると思う '注文編集'ページにこのフィールドを表示します。

add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_eye_colour_checkout_field_display_admin_order_meta', 10, 1 );

function custom_eye_colour_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Eye Colour').':</strong> ' . get_post_meta( $order->id, 'eye_colour', true ) . '</p>';
}

ステップ4 - 電子メールでこれを見せて下さい！

マジックレインダンスのショートコードは

[ec_custom_field key="eye_colour"]

それをWoocommerceの "Email Customizer"の "Main Text"に入れると、そのチャンクはユーザーが注文フォームに入力したテキストに置き換えられます。

ステップ5 - 注文編集ページにこれを表示

（あなたが人々が出したすべての注文を見るバックエンドに表示する）

繰り返しますが、functions.phpにフックを追加します。フック名は "woocommerce_admin_order_data_after_billing_address"と呼ばれるので、この情報は[請求先住所]セクションの後に表示されます。他にもたくさんのフックがあるので、この情報をページの別の場所に表示できます。

add_action( 'woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1 );

function my_custom_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('Eye Colour').':</strong> ' . get_post_meta( $order->id, 'eye_colour', true ) . '</p>';
}

ステップ6 - ボーナスレベル - ec_custom_fieldにはどのようなフィールドがありますか？

[ec_custom_field key = "???"]の部分にどのコードが必要かは明確ではありません。それでは、Wordpressのバックエンドの製品注文ページにこれらのフィールドのリストを表示させましょう（つまり、ユーザーが行ったすべての製品注文を見ることができる管理セクション）。

繰り返しますが、functions.phpにフックを追加します。今回は、注文に添付されたすべてのフィールドのリストを出力します（HTTP投稿に添付されているようです）。

add_action( 'woocommerce_admin_order_data_after_billing_address', 'debug_checkout_field_display_admin_order_meta', 10, 1 );

function debug_checkout_field_display_admin_order_meta($order){
    echo '<p><strong>'.__('(debug) List fields').':</strong>';
    $vals = get_post_meta( $order->id );
    // Assume each value is a 1 element array, seems to be the situation.
    foreach($vals as $key => $val) {
        echo '<br/>* <strong>' . $key . ':</strong> ' . $val[0];
    }
    /* To print out all the elements in the value-keys...
    foreach($vals as $key => $val) {
        echo '<br/>* <strong>' . $key . ':</strong> ' . $val;
        foreach($val as $key2 => $val2) {
            echo '<br/>** <strong>' . $key2 . ':</strong> ' . $val2;
        }
    }
     */
    echo '<br/>Thats it.<br/>';
    echo '</p>';
}

これですべてのキーとその値の一覧が表示されるので、どのキーを使用する必要があるかを推測する必要はありません。

1
user92979