Добавить JQuery как фрагмент кода

Вопрос или проблема

 add_action( 'woocommerce');
function woocommerce() {
$product_id = 18; // конкретный ID продукта, который вы хотите проверить
if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( 
$product_id ) ) ) {

  <!-- JQuery Код -->
  <script type="text/javascript">
  var jq = jQuery.noConflict();
  jq(window).load(function(){
  jq('#email').on('input', function() {
  jq( "div.tip" ).show();
  jq( "#h2" ).show();
  });
  jq('div.tip').hide();
  jq( "#h2" ).hide();
  });
  </script>
  <!-- JQuery Код -->

   }
}

Ответ или решение

Чтобы добавить код jQuery на страницу оформления заказа WooCommerce, мы можем воспользоваться механизмом подключения пользовательских скриптов в WordPress. В данном ответе я подробно опишу, как адаптировать ваш код для работы в среде WordPress, а именно для страницы оформления заказа в WooCommerce.

Шаг 1: Создание JavaScript файла

Сначала создайте JavaScript файл в вашей дочерней теме. Предположим, что вы назвали его custom-checkout.js. Поместите его в папку js в вашей дочерней теме (например, wp-content/themes/ваша-дочерняя-тема/js/custom-checkout.js).

Содержимое файла custom-checkout.js должно выглядеть следующим образом:

jQuery(document).ready(function($) {
    // Скрываем элементы при загрузке страницы
    $("div.tip").hide();
    $("#h2").hide();

    // Обработчик события для поля ввода email
    $('#billing_email').on('input', function() {
        $("div.tip").show();
        $("#h2").show();
    });
});

Обратите внимание, что я изменил селектор на #billing_email, так как в WooCommerce обычно используется именно этот идентификатор для поля ввода email.

Шаг 2: Подключение JavaScript файла в functions.php

Теперь вам нужно подключить этот файл в вашем functions.php, чтобы он загружался только на странице оформления заказа. Для этого добавьте следующий код:

function enqueue_custom_checkout_script() {
    // Проверка, находимся ли мы на странице оформления заказа
    if (is_checkout()) {
        // Регистрация и подключение скрипта
        wp_enqueue_script('custom-checkout-script', get_stylesheet_directory_uri() . '/js/custom-checkout.js', array('jquery'), null, true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_custom_checkout_script');

Описание кода

• is_checkout(): Эта функция проверяет, находитесь ли вы на странице оформления заказа. Это необходимо для того, чтобы не загружать скрипт на других страницах вашего сайта.
• wp_enqueue_script(): Этот метод уведомляет WordPress о необходимости загрузить указанный JavaScript файл. Мы указываем зависимости (в данном случае – array('jquery')), что гарантирует загрузку jQuery перед вашим скриптом.
• get_stylesheet_directory_uri(): Эта функция возвращает URL-адрес папки вашей дочерней темы.

Заключение

Теперь ваш jQuery код будет применяться только на странице оформления заказа WooCommerce, что поможет избежать ненужных загрузок на других страницах сайта. Подходя к вопросу с технической точки зрения и адаптируя код к WordPress, вы обеспечиваете хорошую производительность сайта и улучшаете пользовательский опыт.

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