Способы добавления кнопки «Купить в один клик» в Woocommerce

Чтобы ускорить процесс оплаты в интернет-магазине под управлением Woocommerce можно добавить кнопку «Купить в один клик». У покупателя будет выбор: сделать массовую покупку товаров отложив их перед покупкой в корзину, либо оплатить или заказать один товар сразу, в обход страницы с корзиной.

Реализовать у себя на сайте кнопку «Купить в один клик» можно несколькими способами.

Плагин Buy one click WooCommerce

На мой взгляд, это самый оптимальный способ ускорить процесс покупки в обход страницы с корзиной. Плагин «Buy one click WooCommerce» создает кнопку «Купить в один клик», при нажатии которой появляется всплывающая форма заказа, поля которой можно настроить в самом плагине.

Т.е. у вас уже нет необходимости создавать дополнительные формы и привязывать их к таблице Woocommerce. Все заказы оформляются только в Woocommerce. После оформления заказа покупатель получает детали счета на свой E-mail, как и при обычном заказе. Единственное, нет возможности выбрать вариативный товар. Но можно попросить клиента указать параметры в самом заказе.

В настройках плагина можно отметить, как будет совершаться переход к оформлению товара: использовать всплывающее окно или редирект на страницу checkout. Также предлагается выбрать позицию, где будет размещена кнопка «Купить в один клик». Есть настройка SMS-уведомления для клиента через сервис «SMSC».

Меняем стили и название ярлыка «Распродажа», кнопки «Добавить в корзину» и полей страницы корзины

«Купить в один клик» с помощью плагинов Contact Form 7, Easy FancyBox

С помощью бесплатных плагинов «Contact Form 7», «Easy FancyBox» и небольшого кода также можно создать кнопку «Купить в один клик».

В настройках плагина «Contact Form 7» создается контактная форма с нужными полями. Такие как: номер телефона, имя, электронный адрес и любые другие дополнительные поля. На второй вкладке контактной формы «Письмо» в тело письма вставьте шоткоды [_post_title] и [_post_url]. Так, вы будете знать с какой именно страницы покупатель отправил вам заказ.

В настройках плагина «Easy FancyBox» включите параметр Inline content, остальные пункты можно отключить, если они вам не нужны. Этот параметр позволяет контактной форме всплывать на экране в виде модального окна, после нажатия на кнопку, которую мы разместим возле стандартной кнопки «Добавить в корзину».

Теперь скопируйте этот код в любой текстовый редактор или редактируйте прямо здесь, кликнув дважды на код.

//Button Buy in one click
function buy_one_click() {
    echo '<div class="buy-one-click"><a class="fancybox-inline single_add_to_cart_button button" href="#contact_form_pop_question">Купить в один клик</a></div><div class="fancybox-hidden"><div id="contact_form_pop_question">'.do_shortcode('[contact-form-7 id="5" title="Contact form 1"]').'</div></div>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'buy_one_click' );

Скопируйте шорткод контактной формы, которую вы создали для кнопки «Купить в один клик» и замените им шорткод [contact-form-7 id="5" title="Contact form 1"] на свой. Классы fancybox-inline и fancybox-hidden необходимы для того, чтобы скрипт «Easy FancyBox» сработал. Класс single_add_to_cart_button button alt — это класс стандартной кнопки на странице одиночного продукта, вы можете заменить его на свой и добавить стили на свой вкус.

Вставьте отредактированный код в файл темы functions.php или воспользуйтесь плагином «Code Snippets» и сохраните. На странице одиночного продукта появится вторая кнопка при нажатии на которую откроется контактная форма, задайте свои стили и для неё.

«Купить в один клик» с помощью онлайн сервиса «Обратный звонок»

На страницу товара можно интегрировать дополнительную кнопку рядом с кнопкой «Добавить в корзину», которая откроет очень удобную форму обратного звонка. Если покупатель нажмёт эту кнопку, то появится всплывающее окно, где клиенту будет предложено оставить свой номер телефона, а продавец получит заявку и различную информацию о посетителе. Этот способ подходит для ускорения процесса взаимодействия с клиентом, кроме того, сервис предоставляет и другие услуги, в том числе и CRM-систему.

Предположим, что вы зарегистрировались на Envybox и подключили в футер своего сайта скрипт обратного звонка. Не забудьте в настройках Envybox включить параметр «Звонить только с форм, у которых есть класс callbackwidget-call-form». Теперь скопируйте код ниже, в котором указан class для срабатывания виджета обратного звонка callbackwidget-call-form (согласно инструкции онлайн-сервиса на момент написания статьи). Также можно изменить класс single_add_to_cart_button button на свой и добавить произвольные стили.

Это будет выглядеть так:

//Button Buy in one click
function buy_one_click() {
    echo '<div class="buy-one-click"><button type="submit" name="buy-one-click" class="callbackwidget-call-form single_add_to_cart_button button">Купить в один клик</button></div>';
}
add_action( 'woocommerce_after_add_to_cart_button', 'buy_one_click' );

Данный код размещаем в файле темы functions.php или с помощью плагина «Code Snippets». После этого обновляем страницу товара и видим, что на странице появилась вторая кнопка.

⚠️ Так как WordPress и его плагины могут изменяться, тестируйте любой кастомный код на промежуточном веб-сайте перед переходом в рабочую среду.