Ние създаваме уебсайтове за теб и твоят бизнес. За информация и запитвания:  +359 876 700 417

Как да създадем форма за бърза поръчка в нашия WooCommerce онлайн магазин

12.06.2017

Как да създадем форма за бърза поръчка в нашия WooCommerce онлайн магазин

Ако се чудите как бихте могли да подобрите продажбите във вашия WooCommerce базиран онлайн магазин, както и как да улесните максимално вашите клиенти при направата на онлайн поръчка, то тогава сте попаднали на правилното място.

Като цяло, WordPress и в частност WooCommerce, предлагат почти безгранични възможности за разширение на техните функционалности. В официалния сайт на WooCommerce, както и в сайтове като WordPress.org, а също и CodeCanyon.net, има не малко разработени и готови за използване безплатни или платени плъгини, които биха разширили функционалностите на вашия магазин. В този случай обаче, това, което ще ви предтавим в тази кратка, но полезна статия, го няма като някакво готово решение.

Всъщност, за да създадете форма за бърза поръчка, като тази на снимката по-долу, се нуждаете от няколко неща.

Първо, необходимо е да инсталирате ContactForm7, тъй като този WordPress плъгин, ще осигури функционалността на нашата форма.

След това е необходимо да създадете контактната форма през панела за настройки на ContactForm7, таб Form. Просто добавете този код:

<div class="quick-order">
  <p><strong>БЪРЗА ПОРЪЧКА</strong></p><br>
  <p class="fast_order_form use-floating-validation-tip">
   [tel* client-phone-number placeholder "Телефон (задължително)"] [submit "Поръчай"]
  </p>
  <p>
   <em><small><strong>Важно:</strong> Наш служител ще се свърже с Вас, за уточняване на повече детайли.</small></em>
  </p>
  <p>[text your-subject class:product_name readonly]</p>
</div>

После, трябва да добавите функцията по-долу във functions.php файла на вашата тема или child тема.

ВАЖНО: винаги използвай child тема в WordPress!

// Woocommerce Quick Order Form
function product_quick_order_form() {
  global $product;
  if ( $product->is_in_stock() ) {
    // Ако искате да имате и ID номера на продукта
    // $product_id = $product->id;
    $subject = $product->post->post_title;

    // Тук, добавете генерирания shortcode на ContactForm7
    echo do_shortcode('[contact-form-7-shortcode]'); ?>

    <script>
      (function($){
        $(".product_name").val("<?php echo $subject; ?>");
      })(jQuery);
    </script><?php   
  }
}
add_filter( 'woocommerce_after_add_to_cart_form', 'product_quick_order_form' );

ВАЖНО: не забравяйте да добавите ID номера, който се генерира от ContactForm7, след запазване на формата.

Сега остава да стилизираме чисто визуално нашата форма за бърза поръчка. Как? Просто добавете CSS кода по-долу, във вашия style.css файл на WordPress темата или child темата.

div.quick-order {
  background-color: #f3f3f3;
  border: 1px solid #e4e4e4;
  padding: 10px;
  margin-bottom: 10px;
  text-align: center;
  color: #685a4d;
}

span.wpcf7-not-valid-tip {
  color: #f00;
  font-size: 1em;
  font-weight: normal;
  display: inline-block;
}

.use-floating-validation-tip span.wpcf7-not-valid-tip {
  position: absolute;
  top: 20%;
  left: 7%;
  z-index: 100;
  border: 1px solid red;
  background: #fff;
  padding: .2em .8em;
  width: 85%;
  text-align: left;
}

.wpcf7 input[type="text"].product_name {
  display: none;
}

.wpcf7 p {
  clear: both;
  height: auto;
  overflow: hidden;
  margin: 0 10px;
}

.wpcf7 input.wpcf7-submit[type="submit"] {
  transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  border: 0;
  border-radius: 0;
}

И готово! Вече имате форма за бърза поръчка, която ще се визуализира на продуктовата страница на всеки един продукт в магазина ви, точно под краткото описание.

Ако искате формата да се появява например не под, ами над краткото описание, точно под цената на продукта, то тогава трябва да замените WooCommerce филтъра с:

add_filter( 'woocommerce_before_add_to_cart_form', 'product_quick_order_form' );

Пълната документация на всички WooCommerce кукички и филтри, може да откриете тук, като цъкнете на този линк.

Нещо много важно, което е редно да споменем, e че в случая би било хубаво вашите поръчки, направени от съществуващата вече форма за бързи поръчки, да бъдат съхранени в базата данни на сайта, ако евентуално се появи някакъв неочакван проблем с електронната ви поща и не получите на имейл, поръчката направена от клиента.

За тази цел, ще е необходимо просто да инсталираме още един плъгин, наречен Flamingo и разработен от автора на ContactForm7. Така, бързите поръчки направени от вашите клиенти, ще се съхраняват в бзата данни на сайта, както и ще бъдат достъпни за преглед, през администрацията на WordPress.

Ако имате нужда от допълнителна помощ, оставете коментар под статията или се свържете с нас.

WordPress, Трикове и съвети ,
За Martin Nestorov
I dedicated 5 years of my life to history. I’ve never known that soon after university graduation I would find my one and only true passion – web development and programming.