ウーコマースのチェックアウトページにお届け先の電話番号を

ウーコマースのチェックアウトページにお届け先の電話番号を記入するフィールドがデフォルトではない。

とても困ります。

かと言って外国のプラグインを使うと、都道府県のフィールドがjp13とかになってちゃんと対応できない感じです。

そこで、小テーマのfunction.phpにスニペットを貼り付けて対応する。

拾ってきたスニペットは、

/**
* @snippet Shipping Phone & Email – WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_filter( ‘woocommerce_checkout_fields’, ‘bbloomer_shipping_phone_checkout’ );

function bbloomer_shipping_phone_checkout( $fields ) {
$fields[‘shipping’][‘shipping_phone’] = array(
‘label’ => ‘Phone’,
‘type’ => ‘tel’,
‘required’ => false,
‘class’ => array( ‘form-row-wide’ ),
‘validate’ => array( ‘phone’ ),
‘autocomplete’ => ‘tel’,
‘priority’ => 25,
);
return $fields;
}

add_action( ‘woocommerce_admin_order_data_after_shipping_address’, ‘bbloomer_shipping_phone_checkout_display’ );

function bbloomer_shipping_phone_checkout_display( $order ){
echo ‘<p><b>Shipping Phone:</b> ‘ . get_post_meta( $order->get_id(), ‘_shipping_phone’, true ) . ‘</p>’;
}

参照元はこちら

そして、このスニペットを少し書き換えて、

/**
* @snippet Shipping Phone & Email – WooCommerce
* @how-to Get CustomizeWoo.com FREE
* @author Rodolfo Melogli
* @compatible WooCommerce 6
* @donate $9 https://businessbloomer.com/bloomer-armada/
*/

add_filter( ‘woocommerce_checkout_fields’, ‘bbloomer_shipping_phone_checkout’ );

function bbloomer_shipping_phone_checkout( $fields ) {
$fields[‘shipping’][‘shipping_phone’] = array(
‘label’ => ‘Tel’, 　←　phoneだとわかりにくいのでtelに日本語の表示のさせかたはわかりません。
‘type’ => ‘tel’,
‘required’ => true,←必須項目にする
‘class’ => array( ‘form-row-wide’ ),
‘validate’ => array( ‘phone’ ),
‘autocomplete’ => ‘tel’,
‘priority’ => 25,
);
return $fields;
}

add_action( ‘woocommerce_admin_order_data_after_shipping_address’, ‘bbloomer_shipping_phone_checkout_display’ );

function bbloomer_shipping_phone_checkout_display( $order ){
echo ‘<p><b>Shipping Phone:</b> ‘ . get_post_meta( $order->get_id(), ‘_shipping_phone’, true ) . ‘</p>’;
}

設置場所は子テーマのfunction.phpの一番下