Форма обратной связи на карточке товара в WooCommerce

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

Один из вариантов – это добавить функцию “Купить в 1 клик”, но мы рассмотрим, как организовать форму обратной связи для заказа прямо на странице товара с теми полями для заполнения, которые нам нужны. Сообщение с карточки будет отправляться по электронной почте.

Оценить результат вы можете по ссылке во вкладке “Сделать заказ”.

Плагин Gravity Forms

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

Внешний вид формы в редакторе.

Теперь пройдемся по настройкам каждого из полей:

• Имя – текстовое поле из блока “Стандартные поля”, обязательное для заполнения.
• E-mail – отметка из блока “Расширенные поля”.
• Телефон – сноска из блока “Расширенные поля”, обязательное для заполнения.
• Файл – поле “Загрузка файла” из блока “Расширенные поля”.
• Сообщение – текстовое поле “Параграф” из блока “Стандартные поля”.
• Ссылка на товар – все, как и в случае с “именем”, только во вкладке “Отображение” для “Заполнителя” указываем метку “Связанный товар”.

Размер всех полей – большой, кроме области “Сообщение”, где значение указано среднее.

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

Форма для заказа на карточке товара

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

Создание вкладки

Создание вкладки осуществляется одновременно для группы товаров одной категории. Соответственно, выборка будет происходить по названию категории (например, “Смартфоны”).

Вставляем следующий код:

function woo_new_product_tab( $tabs ) {
  if ( is_product() AND has_term( 'smartfony', 'product_cat', $post->ID ) ) {
    $tabs['form'] = array(
      'title' => __( 'Заказать смартфон', 'woocommerce' ),
      'priority' => 26,
      'callback' => 'woo_new_product_tab_content',
    );
  }
  return $tabs;
}
add_filter( 'woocommerce_product_tabs', 'woo_new_product_tab' );

Вкладка создана.

Подключение формы

Содержимое вкладки, а именно созданную форму в плагине Gravity Forms, мы подключим с помощью шорткода.

Добавляем код:

function woo_new_product_tab_content() {
  echo '<p>Чтобы оформить заказ смартфона, заполните форму. Наши менеджеры с Вами свяжутся для подтверждения заказа.</p>';
  echo do_shortcode('[gravityform id=1 title=false description=false ajax=true]');
}

Относительно небольшое количество потраченного времени позволит преобразить ваш интернет-магазин и сделать процесс оформления заказа немного проще.

 3,673 total views,  7 views today