Произвольные редактируемые поля на страницу заказа WooCommerce

Этим гайдом начинаю серию коротких постов с решением задач по кастомизации плагина WooCommerce. Этот плагин настолько популярный, что у него будет собственная рубрика в блоге.

Часто перед Вами может стоять задача, добавить кастомные (свои) поля для страницы чекаута. Например: выбор пола, дата рождения и т.д. По умолчанию, WooCommerce не имеет таких полей. И если добавить их несложно и для этого существуют несколько способ, например, через фильтр woocommerce_billing_fields. Но, добавление их через этот фильтр, не добавляет Ваши поля автоматически везде где выводятся поля по умолчанию.

Добавляем вывод с помощью хука woocommerce_admin_order_data_after_billing_address:

add_action( 'woocommerce_admin_order_data_after_billing_address', 'custom_editable_order_billing' );
function custom_editable_order_billing( $order ) {
	?> 
		<br class="clear" />
		<h4><?php _e( 'Additional Billing', 'kadence-child' ); ?> <a href="#" class="edit_address"><?php _e( 'Edit', 'kadence-child' ); ?></a></h4>
	<?php
	$gender = get_post_meta( $order->get_id(), '_billing_gender', true );
	$title = get_post_meta( $order->get_id(), '_billing_title', true );
	$addition = get_post_meta( $order->get_id(), '_billing_addition', true );
	?>

	<div class="address">
		<?php if ( $gender ) : ?>
			<p><strong><?php _e( 'Gender:', 'kadence-child' ); ?></strong> <?php echo $gender; ?></p>
		<?php endif; ?>

		<?php if ( $title ) : ?>
			<p><strong><?php _e( 'Title:', 'kadence-child' ); ?></strong> <?php echo $title; ?></p>
		<?php endif; ?>

		<?php if ( $addition ) : ?>
			<p><strong><?php _e( 'Addition:', 'kadence-child' ); ?></strong> <?php echo $addition; ?></p>
		<?php endif; ?>
	</div>

	<div class="edit_address">
	<?php
		woocommerce_wp_select( array(
			'id' => 'billing_gender',
			'label' => __( 'Gender:', 'kadence-child' ),
			'value' => $gender,
			'options' => array(
				'' => __( 'Select gender', 'kadence-child' ),
				'male' => __( 'Male', 'kadence-child' ),
				'female' => __( 'Female', 'kadence-child' )
			),
			'wrapper_class' => 'form-field-wide'
		) );

		woocommerce_wp_text_input( array(
			'id' => 'billing_title',
			'label' => __( 'Title', 'kadence-child' ),
			'value' => $title,
			'wrapper_class' => 'form-field-wide'
		) );

		woocommerce_wp_text_input( array(
			'id' => 'billing_addition',
			'label' => __( 'Addition', 'kadence-child' ),
			'value' => $addition,
			'wrapper_class' => 'form-field-wide'
		) );
	?></div>
	<?php
}

Не забываем, что я привожу примеры своего кода. Соответственно, gender, title и addition это ваши произвольные поля. Лишние можно убрать или добавить неограниченное количество по аналогии.

Осталось данные в базе данных обновить. Вешаемся на хук woocommerce_process_shop_order_meta:

add_action( 'woocommerce_process_shop_order_meta', 'custom_save_order_billing' );
function custom_save_order_billing( $order_id ) {
	if ( isset( $_POST['billing_gender'] ) ) {
		update_post_meta( $order_id, '_billing_gender', wc_clean( $_POST[ 'billing_gender' ] ) );
	}

	if ( isset( $_POST['billing_title'] ) ) {
		update_post_meta( $order_id, '_billing_title', wc_clean( $_POST[ 'billing_title' ] ) );
	}

	if ( isset( $_POST['billing_addition'] ) ) {
		update_post_meta( $order_id, '_billing_addition', wc_sanitize_textarea( $_POST[ 'billing_addition' ] ) );
	}
}

Как видите, ничего сложного в этом нет. В результате мы должны получить что-то такое: