Как отключить кнопку «Добавить в корзину» в WooCommerce с помощью jQuery и CSS

Привет! Итак, вы хотите отключить кнопку «Добавить в корзину» в WooCommerce с помощью jQuery и CSS, да? Что ж, вы пришли в нужное место. В этой статье я расскажу вам о нескольких методах достижения этой цели. Давайте погрузимся!

Метод 1: использование CSS, чтобы скрыть кнопку

Один простой способ отключить кнопку «Добавить в корзину» — скрыть ее с помощью CSS. Вы можете сделать это, добавив следующий код в CSS-файл вашей темы или настройщик:

.add_to_cart_button {
    display: none !important;
}

Этот код предназначен для класса .add_to_cart_buttonи устанавливает для его свойства display значение «none», эффективно скрывая кнопку от просмотра. Однако имейте в виду, что этот метод лишь визуально скрывает кнопку и не мешает пользователям добавлять товары в корзину другими способами.

Метод 2: отключение события нажатия кнопки с помощью jQuery

Чтобы полностью отключить кнопку и предотвратить любое взаимодействие с ней, вы можете использовать jQuery, чтобы удалить ее обработчик событий нажатия. Вот пример:

jQuery(document).ready(function($) {
    $('.add_to_cart_button').off('click');
});

Этот код использует метод .off()для удаления обработчика события клика из кнопки с классом .add_to_cart_button. В результате нажатие кнопки больше не будет вызывать стандартное поведение WooCommerce по добавлению продукта в корзину.

Метод 3: отключение кнопки на определенных страницах товаров

Если вы хотите отключить кнопку «Добавить в корзину» только на определенных страницах продукта, вы можете использовать комбинацию CSS и JavaScript/jQuery. Сначала добавьте собственный класс CSS на страницы товаров, на которых вы хотите отключить кнопку:

<body class="single-product-disable-add-to-cart">

Затем используйте следующий код jQuery, чтобы отключить кнопку на этих страницах:

jQuery(document).ready(function($) {
    if ($('body').hasClass('single-product-disable-add-to-cart')) {
        $('.add_to_cart_button').off('click');
    }
});

Этот код проверяет, имеет ли элемент bodyкласс single-product-disable-add-to-cart. Если да, то обработчик события клика удаляется из кнопки «Добавить в корзину».

Метод 4: отключение кнопки на основе ролей пользователя

Другой подход — отключить кнопку «Добавить в корзину» в зависимости от роли пользователя. Например, вы можете запретить определенным ролям пользователей, например подписчикам или клиентам с истекшим сроком членства, добавлять товары в корзину.

Вот как этого можно добиться, используя комбинацию PHP и jQuery:

  1. В файл functions.phpвашей темы добавьте следующий код:
function disable_add_to_cart_for_user_roles() {
    if (current_user_can('subscriber') || current_user_can('expired_membership')) {
        wp_enqueue_script('disable-add-to-cart', get_template_directory_uri() . '/js/disable-add-to-cart.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'disable_add_to_cart_for_user_roles');
  1. Создайте новый файл JavaScript с именем disable-add-to-cart.jsв каталоге jsвашей темы. Добавьте к нему следующий код:
jQuery(document).ready(function($) {
    $('.add_to_cart_button').off('click');
});

Этот код ставит файл JavaScript в очередь только для пользователей с ролями «подписчик» или «истёк_членство». Когда эти пользователи посещают сайт, скрипт удаляет обработчик события клика из кнопки «Добавить в корзину», фактически отключая его.

Вот и все! Теперь у вас есть несколько способов отключить кнопку «Добавить в корзину» в WooCommerce с помощью jQuery и CSS. Выберите метод, который соответствует вашим конкретным требованиям, и реализуйте его соответствующим образом.