Дополнительные поля в WooCommerce: создание, настройка и стилизация

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

1. Добавление дополнительных полей на страницу оформления заказа

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

Пример: Добавление поля для комментариев или дополнительных инструкций

Дополнительная информация

Укажите дополнительные инструкции для доставки

Откройте файл functions.php вашей темы.
Добавьте следующий код для добавления нового поля на страницу оформления заказа:

add_action( 'woocommerce_after_order_notes', 'custom_checkout_field' );

function custom_checkout_field( $checkout ) {
  echo '<div id="custom_checkout_field"><h3>' . __( 'Дополнительная информация' ) . '</h3>';
  woocommerce_form_field( 'custom_instructions', array(
    'type' => 'textarea',
    'class' => array( 'custom-instructions-field form-row-wide' ),
    'label' => __( 'Укажите дополнительные инструкции для доставки' ),
    'placeholder' => __( 'Например, указать код домофона' ),
  ), $checkout->get_value( 'custom_instructions' ) );
  echo '</div>';
}

add_action( 'woocommerce_checkout_update_order_meta', 'save_custom_checkout_field' );

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

add_action( 'woocommerce_admin_order_data_after_billing_address', 'display_custom_checkout_field_in_admin' );

function display_custom_checkout_field_in_admin( $order ) {
  $custom_instructions = get_post_meta( $order->get_id(), 'custom_instructions', true );
  if ( ! empty( $custom_instructions ) ) {
    echo '<p><strong>' . __( 'Дополнительные инструкции:' ) . '</strong> ' . esc_html( $custom_instructions ) . '</p>';
  }
}

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

2. Добавление пользовательских полей для товаров

Иногда вам нужно добавить поля, относящиеся к конкретному товару, например, выбор дополнительной опции (гравировка, персонализация), или дополнительные параметры товара.

Пример: Добавление текстового поля для персонализации товара

Введите текст для гравировки:

Откройте файл functions.php вашей темы.
Добавьте следующий код для отображения поля на странице товара:

add_action( 'woocommerce_before_add_to_cart_button', 'custom_text_field' );

function custom_text_field() {
  echo '<div class="custom-text-field"><label for="custom_text">Введите текст для гравировки:</label>';
  echo '<input type="text" id="custom_text" name="custom_text" placeholder="Введите текст для гравировки" /></div>';
}

add_filter( 'woocommerce_add_cart_item_data', 'save_custom_text_field', 10, 2 );

function save_custom_text_field( $cart_item_data, $product_id ) {
  if ( isset( $_POST['custom_text'] ) ) {
    $cart_item_data['custom_text'] = sanitize_text_field( $_POST['custom_text'] );
  }
  return $cart_item_data;
}

add_filter( 'woocommerce_get_item_data', 'display_custom_text_field_cart', 10, 2 );

function display_custom_text_field_cart( $item_data, $cart_item ) {
  if ( isset( $cart_item['custom_text'] ) ) {
    $item_data[] = array(
      'name' => 'Гравировка',
      'value' => sanitize_text_field( $cart_item['custom_text'] )
    );
  }
  return $item_data;
}

add_action( 'woocommerce_checkout_create_order_line_item', 'save_custom_text_field_to_order_items', 10, 4 );

function save_custom_text_field_to_order_items( $item, $cart_item_key, $values, $order ) {
  if ( isset( $values['custom_text'] ) ) {
    $item->add_meta_data( 'Гравировка', $values['custom_text'], true );
  }
}

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

3. Использование плагинов для добавления дополнительных полей

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

3.1 WooCommerce Custom Product Addons (бесплатный и платный)

? Добавление текстовых полей, полей с ценами, переключателей и многого другого.
? Лёгкая настройка дополнительных опций через интерфейс.
? Возможность персонализации товаров для каждого заказа.

3.2 YITH WooCommerce Product Add-Ons (бесплатный и платный)

? Создание различных типов пользовательских полей (текстовые поля, выпадающие списки, радиокнопки).
? Поддержка вариативных товаров.
? Возможность добавления стоимости для каждого поля.

3.3 Checkout Field Editor for WooCommerce (бесплатный и платный)

? Легкое управление полями через интерфейс WordPress.
? Добавление текстовых полей, выпадающих списков, чекбоксов и других элементов.
? Настройка обязательных и необязательных полей.

4. Удаление ненужных полей

Если вам нужно удалить некоторые поля на странице оформления заказа (например, поле "Компания" или "Телефон"), вы можете сделать это с помощью кастомного кода.

Пример: Удаление полей на странице оформления заказа

Откройте файл functions.php.
Добавьте следующий код:

add_filter( 'woocommerce_checkout_fields', 'remove_unnecessary_checkout_fields' );

function remove_unnecessary_checkout_fields( $fields ) {
  // Убираем поле "Компания"
  unset( $fields['billing']['billing_company'] );
  // Убираем поле "Телефон"
  unset( $fields['billing']['billing_phone'] );
  return $fields;
}

Этот код удаляет поля "Компания" и "Телефон" из формы оформления заказа.

5. Настройка стилей для дополнительных полей

После добавления дополнительных полей вы можете настроить их внешний вид с помощью CSS.

Пример CSS:

.custom-text-field {
  margin-top: 15px;
}

.custom-text-field label {
  font-weight: bold;
  color: #333;
}

.custom-text-field input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  margin-top: 5px;
}

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

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

Дополнительные поля в WooCommerce