Как изменить поля на странице оформления заказа в WooCommerce

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

Для того, чтобы воздействовать на эти поля нам необходимо воспользоваться фильтром woocommerce_checkout_fields, что позволит перезаписать любое поля. В качестве примера давайте заменим текст плейсхолдера в поле order_comments (Комментарии к заказу). Сейчас оно выглядит так:

_x('Примечания к Вашему заказу, например особые пожелания к отделу доставки.', 'placeholder', 'woocommerce')

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

// Перехватываем
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Наша перехваченная функция - $fields проходит через фильтр!
function custom_override_checkout_fields( $fields ) {
     $fields['order']['order_comments']['placeholder'] = 'Мой новый текст в примечании к товару';
     return $fields;
}

Вот и все! Таким же образом можно перезаписать и другие части, как например названия полей:

// Перехватываем
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Наша перехваченная функция - $fields проходит через фильтр
function custom_override_checkout_fields( $fields ) {
     $fields['order']['order_comments']['placeholder'] = 'Мой новый текст в примечании к товару';
     $fields['order']['order_comments']['label'] = 'Мое новое название этого поля';
     return $fields;
}

Можно вовсе удалить эти поля:

// Перехватываем
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );

// Наша перехваченная функция - $fields проходит через фильтр
function custom_override_checkout_fields( $fields ) {
     unset($fields['order']['order_comments']);

     return $fields;
}

Ниже мы приводим полный список полей в массиве, которые можно изменить:

  • Оплата
    • billing_first_name
    • billing_last_name
    • billing_company
    • billing_address_1
    • billing_address_2
    • billing_city
    • billing_postcode
    • billing_country
    • billing_state
    • billing_email
    • billing_phone
  • Доставка
    • shipping_first_name
    • shipping_last_name
    • shipping_company
    • shipping_address_1
    • shipping_address_2
    • shipping_city
    • shipping_postcode
    • shipping_country
    • shipping_state
  • Аккаунт
    • account_username
    • account_password
    • account_password-2
  • Заказ
    • order_comments

Каждое поле содержит массив свойств:

  • type – тип поля (text, textarea, password, select)
  • label – название для поля ввода
  • placeholder – плейсхолдер (placeholder) для поля ввода
  • class – класс для поля ввода
  • required – true или false, в зависимости от того, является ли поле обязательным
  • clear – true или false, применяет clear fix к полю/его названию
  • label_class – класс для элемента названия поля (label)
  • options – для блоков выбора,массив опций (пары key => value)

В некоторых случаях вам нужно будет использовать фильтр woocommerce_default_address_fields. Этот фильтр применяется ко всем стандартным полям оплаты и доставки:

  • country
  • first_name
  • last_name
  • company
  • address_1
  • address_2
  • city
  • state
  • postcode

Например, для того, чтобы сделать поле address_1 не обязательным, нужно добавить следующий код:

// Перехватываем
add_filter( 'woocommerce_default_address_fields' , 'custom_override_default_address_fields' );

// Наша перехваченная функция - $fields проходит через фильтр
function custom_override_default_address_fields( $address_fields ) {
     $address_fields['address_1']['required'] = false;

     return $address_fields;
}

Определяем опции выбора из списка

Если вы добавляете поле с типом ‘select’, как указывалось выше, вам нужно будет определить пары ключ/значение (key/value). Например:

$fields['billing']['your_field']['options'] = array(
  'option_1' => 'Текст Опции 1',
  'option_2' => 'Текст Опции 1'
);

Мы надеемся, что эта статья помогла вам научиться работать с полями на странице оформления заказа в WooCommerce.

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

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

VN:F [1.9.22_1171]
Rating: 5.0/5 (4 votes cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b
  • Олег

    А добавить свои поля можно? я новичек, подскажите как это сделать. К примеру мне нужно вставить поле вида:

    Во сколько желаете получить заказ? (часовые интервалы 14:00-15:00 и т.д.)

  • антон

    Можно
    $fields[‘billing’][‘your_field’][‘options’] = array(
    ‘option_1′ => ’14:00-15:00′,
    ‘option_2′ => ’15:00-16:00′
    );

    В конце статьи, смотри внимательнее

    Можно добавить
    $fields[‘billing’][‘your_field’][‘placeholder’] = «текст»;
    и т.д.

  • Саша Рак

    Привет всем подскажите как сделать что бы label Имя был напротив input в одну строчку ???

  • Евгений Кулаков

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

  • Soul_Train

    А подскажите, как увеличить визуальный размер поля в форме заказа?

  • Юлия

    Подскажите, пожалуйста, как изменить отображение номера заказа? Сейчас он выглядит как «000808». Платежная система не воспринимает такой номер.

    • ADv

      Какой номер она воспримет? Да и по-умолчанию в номере заказа меньше цифр..

  • Влад

    Здравствуйте. Подскажите.
    Кнопки «Добавить в корзину» на пк , наезжают друг на друга. В смартфоне отображается нормально. В каком файле можно отредактировать данную кнопку?

    • Сергей К.

      это делается с помощью стилей CSS, можно даже в редакторе в админке.

  • Артем

    Добрый день.

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

    • ADv

      Либо хуками, либо правкой шаблонов темы в папке тема/woocommerce/emails

  • Александр

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

Scroll To Top