Предлагаю вашему вниманию простой сниппет для WooCommerce, который выводит оповещение о том, что товар добавлен в корзину при клике на кнопку покупки.
Снппет можно добавить в любой имеющийся у вас в дочерней теме скрипт:
jQuery( function( $ ) {
// Цепляемся за событие adding_to_cart
$( document.body ).on( 'adding_to_cart', function( event, button ) {
// Выцепляем инициатора события (ссылка/кнопка)
var $btn = $( button[0] );
// Пытаемся найти в вёрстке название товара
var product_title = $btn.parents( 'li.product' ).find( '.woocommerce-loop-product__title' ).text();
if ( product_title ) {
// Формируем шаблон попапа
var tpl = '';
tpl += '<p>Товар "' + product_title + '" добавлен в корзину</p>';
tpl += '<div>';
tpl += '<a class="button" onclick="jQuery.unblockUI();">Продолжить</a>';
tpl += '<a href="/shop/cart/" class="button alt">Оформить</a>';
tpl += '</div>';
// Выводим шаблон в модальное окно.
// Используем blockUI из WooCommerce
$.blockUI({
message: tpl,
timeout: 4000,
css: {
width: '300px',
border: 0,
padding: 30
}
} );
}
} );
} );
Также этот сниппет можно вставить на страницу при помощи хука wp_footer внутри файла functions.php вашей активной темы:
add_action(
'wp_footer',
function() {
?>
<script>тут сниппет из примера выше</script>
<?php
}
);
Стили модального окна можно настроить по вашему вкусу, например в кастомайзере самого WordPress.
Источник: https://www.kobzarev.com/wordpress/woocommerce-added-to-cart-modal/