Плагин woocommerce — интернет-магазин для WP — и так показывает огромное число полей на форме оформления заказа (т.н. checkout), и обычно требуется убрать/спрятать лишние поля. Но в данной статье я расскажу об обратной задаче: как добавить и обрабатывать свои произвольные поля в этой форме.
У нас будет несколько логических этапов:
- Добавление элементов на форму;
- Валидация, проверка данных;
- Сохранение данных;
- Показ элементов в заказе и письмах.
Добавление элементов на форму заказа (checkout)
Можно добавить поле слева сразу после адреса заказчика или справа — под примечаниями к заказу:
Я добавил поле — пожелания по дате/времени доставки — в зависимости от того куда нужно его вставить придется использовать соответствующую зацепку.
Вот пример кода для хука в правую часть формы:
1 2 3 4 5 6 7 8 9 10 11 12 |
add_action('woocommerce_after_order_notes', 'my_order_fields', 99); function my_order_fields($checkout) { echo '<div id="custom_checkout_field">'; woocommerce_form_field( 'wished_delivery_datetime', array( 'type' => 'textarea', 'class' => array('form-row-wide'), 'label' => 'Пожелания по дате/времени доставки', ), $checkout->get_value( 'wished_delivery_datetime' )); echo '</div>'; } |
Функция woocommerce_form_field берет на себя рутину по созданию HTML кода поля, но вы можете и сами проделать эту работу.
Валидация, проверка полей
Специальный хук woocommerce_checkout_process позволяет добавить необходимые проверки после отправки данных формы.
В нашем примере кастомное поле — необязательный сопроводительный текст, потому код, имеющий какой либо практический смысл, придумать сложно.
1 2 3 4 5 6 7 |
add_action('woocommerce_checkout_process', my_checkout_field_process'); function my_checkout_field_process() { // какая логика if ( ... $_POST['wished_delivery_datetime'] ... ) wc_add_notice('Текст сообщения об ошибке.', 'error' ); } |
Сохранение данных
Отправленные пользователем данные нужно где то сохранить. Для этого хорошо подходят мета поля сущности заказа. А зацепка реализуется через хук — woocommerce_checkout_update_order_meta.
1 2 3 4 5 6 7 |
add_action( 'woocommerce_checkout_update_order_meta', 'my_checkout_update_order_meta', 10, 2 ); function my_checkout_update_order_meta( $order_id, $posted ){ if( isset( $posted['wished_delivery_datetime'] ) ) { update_post_meta( $order_id, '_wished_delivery_datetime', sanitize_text_field( $posted['wished_delivery_datetime'] ) ); } } |
Тут просто сохраняем переданные пользователем данные в meta информацию заказа.
Пару слов о технических особенностях. Если вы будете использовать название мета поля, начинающееся с нижнего подчеркивания (как в примере), то такая мета информация не будет показана в редакторе заказа в админке. Это общее правило для работы с мета полями публикаций в WP.
Вывод поля в сводке заказа и отправляемых письмах
Еще несколько зацепок позволят нам вывести поле в сводке по заказу и отправляемых письмах.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// зацепка в шаблон страницы - спасибо за ваш заказ add_action( 'woocommerce_thankyou', 'my_display_order_data', 20 ); // зацепка в шаблон - просмотр данных заказа add_action( 'woocommerce_view_order', 'my_display_order_data', 20 ); function my_display_order_data( $order_id ){ ?> <h2>Дополнительная информация</h2> <table class="shop_table shop_table_responsive additional_info"> <tbody> <tr> <th>Пожелания по дате/времени доставки:</th> <td><?php echo get_post_meta( $order_id, '_wished_delivery_datetime', true ); ?></td> </tr> </tbody> </table> <?php } |
Мы запрашиваем сохраненные данные из мета-полей заказа и выводим их, имитируя шаблон WC.
Остаётся добавить вывод данных поля в отправляемые email:
1 2 3 4 5 6 7 8 9 |
add_filter('woocommerce_email_order_meta_fields', 'my_email_order_meta_fields', 10, 3 ); function my_email_order_meta_fields( $fields, $sent_to_admin, $order ) { $fields['wished_delivery_datetime'] = array( 'label' => 'Пожелания по дате/времени доставки', 'value' => get_post_meta( $order->id, '_wished_delivery_datetime', true ), ); return $fields; } |