Предлагаю вашему вниманию простой сниппет для 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/