Можно в шаблон оформления внедрить модули расчета доставки от транспортных компаний. Минусом является то, что эти расчеты только для получения примерной информации о стоимости доставки, далее в расчетах не участвуют.
Выглядит это так:
При нажатии всплывает окно с калькулятором ТК:
Выведем в оформлении панель с логотипами транспортных компаний:
// Вывод всплывающих окон в доставку
add_filter('woocommerce_after_order_notes', 'popup_windows_delivery');
function popup_windows_delivery() {
echo '
<h3>Рассчет стоимости доставки</h3>
<div class="tk-logos">
<img id="dline" src="/wp-content/uploads/2018/07/delovie-linii-200.png">
<img id="pek" src="/wp-content/uploads/2018/07/20161606225846-200.png">
<img id="kit" src="/wp-content/uploads/2018/07/kit-tk200.png">
<img src="/wp-content/uploads/2018/07/bsd.png">
</div>
';
}
Стили панели с логотипами ТК
.tk-logos {display: flex; align-items: center; justify-content: space-between;}
.tk-logos img {max-width: 115px; max-height: 50px;}
Далее прописываем вывод всплывающих окон.
Выводим в подвале сами окна (пока скрытые):
function feedback() {
echo '
<div class="popup dline"><p class="popup-title">dline</p><div id="feedback">
<iframe src="https://widgets.dellin.ru/calculator/?derival_to_door=off&arrival_to_door=on&disabled_calculation=off&insurance=0&package=1"
width="332" height="390" scrolling="no" frameborder="0"></iframe>
</div></div>
<div class="popup pek"><p class="popup-title">pek</p><div id="feedback">
<iframe id="pecom-kabinet-iframe" allowtransparency="true" frameborder="0" width="800" height="1800" scrolling="auto" style="border: 0;" src="https://pecom.ru/ru/calc/?iframe=Y"><p>Пожалуйста, воспользуйтесь браузером, который поддерживает IFrame.</p> </iframe>
</div></div>
<div class="popup kit"><p class="popup-title">kit</p><div id="feedback">
<p>В ближайшее время калькулятор будет обновлен.</p>
<p>Приносим извинения за доставленные неудобства.</p>
</div></div>
<div class="popup bsd"><p class="popup-title">bsd</p><div id="feedback">
<iframe src="https://www.calc.tkbsd.ru/short" width="345" height="250" scrolling="no" frameborder="0"></iframe>
</div></div>
';
}
add_action( 'popup-windows', 'feedback', 5 );
Это все выводится в подвале пользовательским хуком popup-windows.
И теперь прописываем скрипт всплывающих окон:
$(document).ready(function() {
$('#dline').click(function() {
$('.popup.dline').show();
$('.popup').removeClass('animated fadeOutDown');
$('.popup').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');
});
$('#pek').click(function() {
$('.popup.pek').show();
$('.popup').removeClass('animated fadeOutDown');
$('.popup').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');
});
$('#kit').click(function() {
$('.popup.kit').show();
$('.popup').removeClass('animated fadeOutDown');
$('.popup').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');
});
$('#bsd').click(function() {
$('.popup.bsd').show();
$('.popup').removeClass('animated fadeOutDown');
$('.popup').addClass('animated fadeInDown');
$('#backfon').show();
$('#backfon').removeClass('fadeOut');
$('#backfon').addClass('animated fadeIn');
});
});
[site-socialshare]