Купить товар Woocommerce в один клик кнопка Contact Form 7


Привет! Сегодня я покажу вам как добавить на страницу товара Woocommerce кнопку Купить в один клик. Покупатель жмёт на кнопку, появляется popup окно с формой. Он указывает своё имя, телефон, дополнительную информацию и жмёт отправить. Вам приходит письмо на email с контактами покупателя и информацией. Плюс, в письме вы сразу видите, какой товар хотят купить в один клик, его название и ссылка на страницу товара.

 

купить в один клик кнопка


форма заказа


письмо заказ email

 

Я хочу предложить вам альтернативу плагину Buy one click WooCommerce. У многих он глючит, люди пишут мне, жалуются. Я покажу вам как сделать очень простой, удобный и надёжный заказ товара. Всё очень просто! Смотрите далее!

 

 

Кнопка Купить в один клик товар Woocommerce

 

Вам понадобится плагин Contact Form 7.

 

Contact Form 7

 

И плагин Easy FancyBox. Установите их на свой сайт и активируйте.

 

Easy FancyBox

 

Далее, переходим: НастройкиМедиафайлы. В настройках Media, поставьте галочку напротив параметра Inline content. Сохраните изменения.

Обратите внимание! Уберите галочку напротив Images, если у вас уже стоит плагин для просмотра изображений в лайтбокс окне.

 

настройки FancyBox

 

Далее, перейдите на страницу создания/редактирования формы. Вы можете добавить в форму любые поля! Обязательно поставьте защиту reCaptcha от спама!

 

создание контактной формы Contact Form 7

 

Далее, вверху перейдите на вкладку Письмо. Обратите внимание на тело письма! Обязательно добавьте шорткоды полей, они выводят информацию, которую указывает покупатель в форме. Ещё добавьте:

  • [_post_title]выводит в письме название товара, на странице которого нажали на кнопку Купить в один клик;
  • [_post_url]выводит в письме ссылку на заказанный товар.
  • Сохраните изменения!

 

тело письма

 

Далее, перейдите на страницу: Внешний вид Редактор, справа откройте для редактирования файл functions.php. В самый низ файла вставьте специальный код функции, которая выводит кнопку на страницу товара. Сохраните изменения. Ниже вы можете скопировать данный код!

В коде замените шорткод контактной формы Contact Form 7 на свой!

 

функции php wordpress

 

Здесь вы можете скопировать код:

 

//Купить в один клик
add_action( 'woocommerce_single_product_summary', 'return_policy', 30 );
function return_policy() { 
global $product;

  if ( !$product->is_in_stock() or !$product->get_price_html()) {
  }
  else{ ?>
  <p class="buy-one-click"><a class="fancybox-inline single_add_to_cart_button button alt" href="#contact_form_pop_question">Купить в один клик</a></p>
  <div class="fancybox-hidden" style="display: none;">
  <?php echo '<div id="contact_form_pop_question">'.do_shortcode('[ваш шорткод contact form 7]').'</div>'; ?>
  </div>
  <? }
}

 

Всё готово! Вот так просто и быстро вы можете добавить на страницу товара кнопку Купить в один клик.

 

Как добавить в форму защиту от спама reCaptcha

Как изменить внешний вид формы Contact Form 7

 

Остались вопросы? Напиши комментарий! Удачи!

 




Купить товар Woocommerce в один клик кнопка Contact Form 7 обновлено: Январь 17, 2019 автором: Илья Журавлёв

40 комментариев

  • Сергей 13.05.2018

    Спасибо Вам за сайт и собранную информацию, очень помогает!
    Вопрос по кнопке покупки в один клик: а как ее разместить справа от кнопки “в корзину”, а не под ней?

  • Илья Журавлёв 13.05.2018 Автор

    Пожалуйста! Есть два варианта: 1 – создать php функцию., 2 – Добавить CSS стили. Может помочь плагин – SiteOrigin CSS, параметр Margin.

  • Леонид 29.05.2018

    Если закрыть лайтбокс и затем снова открыть, то вместо формы вылезает ошибка:

    The requested content cannot be loaded.
    Unexpected response.

    В чем может быть причина и как исправить?

  • Илья Журавлёв 29.05.2018 Автор

    Вы точно всё сделали правильно, по инструкции?

  • Юрий 04.09.2018

    Здравствуйте.
    Устанавливать не пробовал но сразу вопрос.
    Товар в корзину добавляется для оплаты?
    Спасибо за статью.

  • Юрий 04.09.2018

    Здравствуйте.
    Устанавливать не пробовал но сразу появился вопрос.
    Товар в козину добавляется для оплаты ?

    Спасибо за статью, полезно.

  • Илья Журавлёв 04.09.2018 Автор

    Здравствуйте. Нет конечно. Это заказ в один клик, с помощью одной формы. Клиент оставляет свои реквизиты, вы ему перезваниваете и оформляете заказ по телефону. Добавление в корзину есть в Woocommerce по умолчанию.

  • Юрий 04.09.2018

    Задача в следующем.
    Нужно от клиента получить данные при оформлении заказа, нашел плагин где можно редактировать поля в Woocommerce но нет возможности отправить фото. 
    Получается клиент оформляет заявку на размещение объявлений, я получаю данные, оплачивает товар в корзине,  я запускаю данные в работу.
    Пример формы есть /obyavka.by/rassyilka-obyavleniy-uslugi-gruzoperevozki-na-20-dosok/
    Нужно завязать с формой оформления заказа, что бы не писать сложную инструкцию. Типа заполните там, перейдите сюда и заполните еще раз.

  • Юрий 05.09.2018

    Спасибо. Буду пробовать.

  • Юрий 05.09.2018

    Кнопки рассказать друзьям не нашел, кликнул по рекламе!

  • Дима 20.09.2018

    Как изменить размер окна, когда нажимаешь кнопку? (Где поля имя, телефон… а то широкое получается)

  • Илья Журавлёв 21.09.2018 Автор

    Разве поле не адаптивное у вас? Есть плагин SiteOrigin CSS. Можно вручную изменить CSS стили. Только все стили переносите на WordPress – Внешний вид – Настроить – Дополнительные стили, прямо туда копируйте. В поле плагина не оставляйте. Так они быстрее грузятся и без глюков.

  • дмитрий 22.09.2018

    Здравствуйте, а как добавить в список товаров такую кнопку и что работало как следует?

  • Илья Журавлёв 22.09.2018 Автор

    Добрый день. Вам лучше обратится к разработчику. Чтобы работало как следует, это как?

  • Артём 17.01.2019

    Уважаемый админ вы сами та пробовали этот скрипт ???

    Там фатальная ошибка, зачем нерабочие варианты скидывать людям ?!

  • Илья Журавлёв 17.01.2019 Автор

    Здравствуйте. Да, конечно пробовал. Неужели по скриншотам не видно? Вот сайт где стоит такой же скрипт и всё работает – prezentgold.ru, сам лично устанавливал. Значит где-то вы ошибку допустили, либо ваш сайт несовместим с данным скриптом. На WordPress это обычное дело. Если у кого-то работает, не факт что у всех будет работать.

  • Василий 26.01.2019

    Спасибо за статью! А что делать если у меня несколько товаров на странице?

  • Илья Журавлёв 26.01.2019 Автор

    Здравствуйте. Вы хотите, чтобы кнопка отображалась в каталоге товаров?

  • Мария 08.02.2019

    Да, мне тоже интересно, как сделать, чтобы кнопка отображалась в каталоге товаров )

  • Ed 15.02.2019

    Супер спасибо! Подскажите как вывести такую же кнопку в товар которые без цен? Сейчас она отображается только где есть цена! Очень нужно

  • Илья Журавлёв 15.02.2019 Автор

    Товары в наличии, у которых цен нет? В настройках должно быть отмечено что они в наличии.

  • Ed 15.02.2019

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

  • Илья Журавлёв 16.02.2019 Автор

    Значит этот код не подходит для товаров без цен. Нужно доработку делать.

  • Никита 13.03.2019

    Здравствуйте! У меня немного сложная задача — имеются разные категории товаров, в которых цена товаров по запросу, и нужно, чтобы для товаров из разных категорий при нажатии на ссылку «цена по запросу» всплывала своя контактная форма в зависимости от категории товара (отправка запроса на разные адреса), проще говоря, своя контактная форма на товар из конкретной категории. Если можно, пришлите код на почту. Спасибо!

  • Илья Журавлёв 13.03.2019 Автор

    Добрый вечер. Могу вам только плагины порекомендовать, которые могут вам помочь:

    – Art WooCommerce Order One Click
    – Back In Stock Notifier for WooCommerce
    – WooCommerce Quote or Enquiry Contact Form 7
    – YITH WooCommerce Request A Quote

  • Антон 17.03.2019

    Здравствуйте! Спасибо большое за статью.
    Я использую Elementor Pro. При помощи его можно создавать шаблоны для страниц. Т.е. кнопку я смогу поставит в любом месте в карточке товара и к ней подвязать форму.
    Подскажите, пожалуйста, смогу я реализовать Вашу схему?
    Очень нужно как раз простой заказ, а не корзина.

  • Илья Журавлёв 17.03.2019 Автор

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

  • Антон 17.03.2019

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

  • Илья Журавлёв 17.03.2019 Автор

    Вот этот плагин вам поможет – Art WooCommerce Order One Click

  • Антон 17.03.2019

    Спасибо!

  • Дмитрий 21.04.2019

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

  • Илья Журавлёв 21.04.2019 Автор

    Добрый день. Посмотрите вот этот плагин Woocommerce кнопка купить в один клик. Он может помочь вам.

  • Дмитрий 21.04.2019

    Спасибо! пробывал этот плагин, но в нем существенный минус нет текстового поля чтобы заказчик вписал туда дополнительные пожелания к заказу, а это очень необходимо.

  • Илья Журавлёв 21.04.2019 Автор

    Такое поле можно очень легко добавить в редакторе формы Contact Form 7. Да, форма будет висеть, потому что у плагина нет функции авто-закрывания окна.

  • Дмитрий 21.04.2019

    Ладно это пол беды, Еще один вопрос а почему форма 7 не работает в окне быстрого просмотра или можно как-то ее оттуда убрать??

  • Дмитрий 21.04.2019

    Если кому будет интересно то решение вопроса с авто-закрытием окна есть в плагине Popup Maker

  • Илья Журавлёв 22.04.2019 Автор

    Почему форма 7 должна работать в окне быстрого просмотра и где вы её там нашли? Про окно быстрого просмотра я вообще ничего не говорил в данной записи.

  • Дмитрий 22.04.2019

    В окне быстрого просмотра отображается кнопка купить в один клик, но она не кликабельна!

  • Илья Журавлёв 22.04.2019 Автор

    Можно скрыть её с помощью CSS.

Добавить комментарий

Ваш e-mail не будет опубликован.

 

Внимание! Вы соглашаетесь с Политикой конфиденциальности сайта info-effect.ru


Обратная связь

Политика конфиденциальности - Пользовательское соглашение