Помогите понять, почему не работает модальное окно magnific popup на странице товара WooCommerce. Посмотреть можно по ссылке
Вот код подключения jquery и скриптов в functions.php
:
wp_enqueue_style('magnific-popup', get_template_directory_uri() . '/assets/css/magnific-popup.css');
wp_deregister_script('jquery');
wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/js/jquery-3.6.3.min.js');
wp_enqueue_script('jquery', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.js');
Cамо окно с кнопкой.
<a href="#test-popup" class="single-product-btn open-popup-link">Купить в один клик</a>
<div id="test-popup" class="white-popup mfp-hide">
<form action="#" id="popupOrder" class="order-form">
<div class="order-form__half">
<p class="order-form__head">Купить в один клик</p>
<p class="order-form__text">Оставьте свои контакнтые данные и мы свяжемся с вами в ближайшее время для уточнения заказа
</p>
<div class="order-form__group">
<label>Имя</label>
<input type="text" name="name" class="order-form__input">
</div>
<div class="order-form__group">
<label>Телефон</label>
<input type="tel" name="tel" class="order-form__input">
</div>
<div class="order-form__btn">
<input id="ordered" type="submit" data-submit value="Отправить" class="single-product-btn" />
</div>
</div>
<div class="order-info__half">
<p class="order-info__info">Информация о заказе</p>
<div class="order-info__result">
<div class="order-info__block">
<a href="<?php the_permalink(); ?>" class="order-info__image">
<?php echo get_the_post_thumbnail(get_the_ID(), 'thumbnail'); ?>
</a>
<div class="order-info__desc">
<a href="<?php the_permalink(); ?>" class="order-info__title">
<?php echo get_the_title(); ?>
</a>
<div class="order-info__price">
<?php echo $product->get_price_html(); ?>
</div>
<a href="<?php echo wc_get_cart_url() ?>?add-to-cart=<?php echo get_the_ID(); ?>" class="single-product-btn">
Перейти в корзину
</a>
</div>
</div>
</div>
</div>
</form>
</div>
и скрипт на Jquery
$('.open-popup-link').magnificPopup({
type: 'inline',
mainClass: 'my-mfp-zoom-in',
showCloseBtn: true,
closeBtnInside: true
});
получаю ошибку в консоле:
TypeError: $('.open-popup-link').magnificPopup is not a function. (In '$('.open-popup-link').magnificPopup({ type: 'inline', mainClass: 'my-mfp-zoom-in', showCloseBtn: true, closeBtnInside: true })', '$('.open-popup-link').magnificPopup' is undefined)
Помогите найти причину!