Форма: Узнать оптовую цену

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

Создаем и выводим кнопку

Данный код выводит кнопку Узнать оптовую цену в карточке товара справа от цены:

add_action( 'woocommerce_single_product_summary', 'form_opt_price', 12 );
function form_opt_price() {
	echo '<div class="call-item hidden">Узнать оптовую цену</div>';
 }

Стили:

.call-item {
    position: absolute;
    width: 120px;
    background: #ff8233;
    color: #fff;
    padding: 5px 10px;
    right: 30px;
    top: 30px;
    border-radius: 5px;
    text-align: center;
	cursor: pointer;
}

.call-item:before {
    content: '';
    position: absolute;
    left: -10px;
    top: 15px;
    border: 10px solid transparent;
    border-right-color: #fe8133;
    border-left: 0;
}

@media screen and (max-device-width: 1280px) { .call-item {width: 90px; padding: 5px; right: 15px;} }

@media screen and (max-device-width: 480px) { 
	.call-item {position: relative; width: 80%; right: 0; top: 0; margin: 15px auto 0 auto;} 
	.call-item:before {display: none;}
}

@media screen and (max-device-width: 330px) { .call-item {width: 100%;} }

Стиль hidden у кнопки нужен только для эффекта плавного появления:

setTimeout(function(){ jQuery(".call-item").addClass('animated fadeInDown visible'); }, 500);

Настраиваем форму CF7

Обычно я делаю это всплывающим окном с формой обратной связи Contact Form . Заводим поля: имя, телефон (или e-mail), наименование (к этому полю нужно добавить класс product-form-name) и количество. Количество я сделал текстовым полем а не числовым, т.к. в разных ситуациях могут быть либо шт, либо кв.м, лучше пусть будет возможность это прописать.

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

var productNameforForm = $(".product_title").text();	
$(".product-form-name").val(productNameforForm);

Поделиться в соц. сетях: