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

WooCommerce

Привет! Сегодня я покажу вам как добавить на страницу товара 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

 

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

 

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

 

  1. Сергей

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  2. Леонид

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

    The requested content cannot be loaded.
    Unexpected response.

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  3. Юрий

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

    Ответить
  4. Юрий

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

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  5. Юрий

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

    Ответить
  6. Юрий

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

    Ответить
  7. Юрий

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

    Ответить
  8. Дима

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  9. дмитрий

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  10. Артём

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

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  11. Василий

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  12. Мария

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

    Ответить
  13. Ed

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
      1. Ed

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

        Ответить
        1. Илья Журавлёв автор

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

          Ответить
  14. Никита

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

    Ответить
    1. Илья Журавлёв автор

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

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

      Ответить
  15. Антон

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
      1. Антон

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

        Ответить
        1. Илья Журавлёв автор

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

          Ответить
  16. Антон

    Спасибо!

    Ответить
  17. Дмитрий

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  18. Дмитрий

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
  19. Дмитрий

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

    Ответить
    1. Илья Журавлёв автор

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

      Ответить
      1. Дмитрий

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

        Ответить
        1. Илья Журавлёв автор

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

          Ответить
  20. Дмитрий

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

    Ответить