Как скрыть и удалить кнопку «Добавить в корзину» в WooCommerce

Опубликовано: 2020-12-10

Вы хотите скрыть кнопку «Добавить в корзину» в своем магазине? В этом руководстве вы узнаете , как удалить кнопку «Добавить в корзину» в WooCommerce программно (без плагинов).

Зачем удалять кнопку «Добавить в корзину» в WooCommerce?

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

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

  • Поскольку вы используете WooCommerce в качестве каталога
  • Когда у вас закончились запасы или товар больше не доступен
  • Чтобы удалить кнопку на основе логических условий (например, для определенных ролей пользователей или продуктов, незарегистрированных пользователей и т. д.)
  • Поскольку продукт еще недоступен для покупки
  • Если вы хотите, чтобы пользователи использовали эту кнопку для отправки сообщения или назначения интервью вместо стандартного процесса покупки WooCommerce.

Это лишь некоторые ситуации, в которых вам может понадобиться удалить или скрыть кнопку «Добавить в корзину» в вашем магазине, но есть и много других. Теперь давайте продолжим и посмотрим, как удалить кнопку добавления в корзину WooCommerce из вашего магазина.

Как убрать кнопку «Добавить в корзину» в WooCommerce

В этом разделе вы узнаете, как скрыть кнопку «Добавить в корзину ». Чтобы предоставить вам различные альтернативы, мы покажем вам, как:

  1. Удалить или скрыть кнопку «Добавить в корзину» на сайте
  2. Скрыть кнопку «Добавить в корзину» для незарегистрированных пользователей
  3. Удалить кнопку «Добавить в корзину» в зависимости от ролей пользователей
  4. Скрыть кнопку «Добавить в корзину» для определенных товаров
  5. Временно удалить кнопку и автоматически отображать ее после даты

Давайте посмотрим на каждый из них.

Прежде чем ты начнешь

Поскольку мы будем редактировать основные файлы WordPress, мы рекомендуем вам создать полную резервную копию вашего сайта на случай, если что-то пойдет не так. Кроме того, вы можете использовать дочернюю тему. Если у вас его нет, вы можете либо создать его, следуя этому руководству, либо использовать плагин дочерней темы.

1) Удалить или скрыть кнопку «Добавить в корзину» по всему сайту

Есть несколько способов полностью скрыть кнопку «Добавить в корзину» в вашем магазине . Один из самых простых — использовать следующий скрипт в файле functions.php вашей дочерней темы:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );

С помощью первого remove_action() мы отключаем кнопку «Добавить в корзину» на странице продукта, а со вторым — то же самое на странице магазина. Однако более чистое и надежное решение — отключить возможность покупать продукты. Таким образом, вы сделаете товары недоступными для покупки и запретите пользователям добавлять их в корзину.

Вы можете сделать это и сделать ваши продукты недоступными для покупки во всем магазине с помощью следующего скрипта:

add_filter( 'woocommerce_is_purchasable', '__return_false');

Обратите внимание, что это отключит «Добавить в корзину» в WooCommerce, но не удалит кнопку. Он просто заменит ее кнопкой « Подробнее », перенаправляя пользователей на страницу продукта, где кнопки нет вообще. Убрать кнопку добавления в корзину woocommerce Если помимо удаления кнопки «Добавить в корзину» вы также хотите скрыть кнопку « Подробнее », вам следует применить правило CSS. Однако, поскольку клиенты не смогут добавлять товары в корзину, они не смогут ничего купить, даже если они знают, как использовать инструмент разработчика браузера, чтобы отобразить это. Когда это возможно, вы всегда должны пытаться использовать хук add_filter вместо remove_action() .

Для получения дополнительной информации о том, как использовать хуки WooCommerce, ознакомьтесь с этим полным руководством.

2. Скройте кнопку «Добавить в корзину» для незарегистрированных пользователей.

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

 /* REMOVE ADD TO CART BUTTON FOR NON-LOGGED-IN USERS */
 if (!is_user_logged_in()) {
 // in product page
 add_filter('woocommerce_is_purchasable', '__return_false'); }

Используя родную функцию WordPress is_user_logged_in() , мы отключим кнопку «Добавить в корзину» только для незарегистрированных пользователей.

3. Удалите кнопку «Добавить в корзину» в зависимости от ролей пользователей.

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

 /* REMOVE ADD TO CART BUTTON FOR ADMIN USERS */ add_action('wp_loaded','get_user_role'); function get_user_role(){ $current_user = wp_get_current_user(); if(count($current_user->roles)!==0){ if($current_user->roles[0]=='administrator'){ add_filter('woocommerce_is_purchasable', '__return_false'); }
 }
 }

Скрипт извлекает пользовательский объект WordPress и применяет к нему два условия. Первый — узнать, есть ли у пользователя роль, а второй — сделать продукты недоступными для покупки только в том случае, если роль пользователя совпадает с той, которую мы указываем (в данном случае администратор). Вы можете адаптировать этот код и изменить роль, которую вы не хотите видеть на кнопке «Добавить в корзину», отредактировав роль в if($current_user->roles[0]=='your_role'){.

4. Скрыть кнопку «Добавить в корзину» для определенных товаров.

Теперь предположим, что у вас закончились запасы определенных товаров, поэтому вы хотите временно скрыть кнопку «Добавить в корзину» для этих товаров .

Чтобы убрать кнопку для конкретных товаров, скопируйте и вставьте этот скрипт в файл functions.php дочерней темы:

 /* REMOVE ADD TO CART BUTTON ON SPECIFIC PRODUCT IDs*/ add_filter('woocommerce_is_purchasable', 'filter_is_purchasable', 10, 2); function filter_is_purchasable($is_purchasable, $product ) { global $product; if( in_array( $product->get_id(), not_purchasable_ids() )) { return false; } return $is_purchasable; } function not_purchasable_ids() { return array( 624,625 ); }

В этом примере сценария мы отключаем кнопку «Добавить в корзину» для продуктов с идентификаторами 624 и 625. Чтобы адаптировать ее к вашему магазину WooCommerce, просто замените эти идентификаторы идентификаторами ваших продуктов. Как видите, вы можете добавить несколько продуктов, просто разделив идентификаторы запятой.

Чтобы узнать идентификатор продукта, перейдите на панель управления WordPress > WooCommerce > Товары и наведите указатель мыши на продукт в списке. В качестве альтернативы, если вы нажмете на продукт, вы увидите его идентификатор в URL-адресе вашего браузера.

5. Отключите кнопку «Добавить в корзину» для определенных категорий.

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

 add_action('wp', 'QL_remove_add_to_cart_from_category');
 функция QL_remove_add_to_cart_from_category(){
 if( is_product_category('ноутбуки') ) {
 remove_action('woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart');
 }
 }

Просто возьмите этот код и не забудьте заменить «ноутбуки» в строке 3 на название категории, в которой вы хотите скрыть кнопку «Добавить в корзину».

6. Временно удалите кнопку «Добавить в корзину» и автоматически отобразите ее после определенной даты.

Теперь давайте сделаем еще один шаг и объединим некоторые вещи, которые мы узнали. Представьте, что вы собираетесь запустить продукт, поэтому вы создаете страницу продукта со всеми его функциями. Если вы хотите использовать эту страницу для создания ажиотажа и продвижения продукта перед запуском, вы можете скрыть кнопку «Добавить в корзину» до даты запуска, а затем автоматически отобразить ее в день запуска .

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

 add_filter( 'woocommerce_is_purchasable', 'hide_add_to_cart_button_until_date', 10, 2 ); function hide_add_to_cart_button_until_date( $is_purchasable = true, $product ) { $current_date = date('Ym-d'); $release_date = date( 'Ym-d', strtotime('2020-12-15') ); if( strtotime($current_date) < strtotime($release_date) && $product->get_id() == 624 ) { $is_purchasable = false; } return $is_purchasable; }

Это заменит кнопку «Добавить в корзину» на кнопку « Подробнее », которая перенаправляет пользователей на страницу продукта до даты запуска. Теперь давайте лучше разберемся, как работает скрипт. Код сравнивает текущую дату с датой запуска и, если текущая дата более ранняя, делает продукт недоступным для покупки.

Когда текущая дата равна или позже даты запуска, продукт будет доступен для покупки, и кнопка «Добавить в корзину» будет отображаться автоматически. Не забудьте указать не только дату, но и идентификатор продукта (624 в нашем примере).

Бонус: настройте кнопку «Добавить в корзину».

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

Допустим, вместо «Добавить в корзину» вы хотите отобразить в кнопке текст « Купить этот товар ». Просто скопируйте и вставьте следующий скрипт в файл functions.php :

 ('woocommerce_product_single_add_to_cart_text', 'QL_customize_add_to_cart_button_woocommerce');
функция QL_customize_add_to_cart_button_woocommerce(){
return __('Купить этот товар', 'woocommerce');
}

Кроме того, чтобы изменить цвет кнопки на отдельных продуктах, используйте этот скрипт и выберите нужные цвета.

 .single-product .product .single_add_to_cart_button.button {
цвет фона: #FF0000;
цвет: #C0C0C0;
}

Это всего лишь два основных примера, но вы можете сделать гораздо больше и настроить кнопку многими другими способами. Дополнительные примеры и информацию см. в нашем пошаговом руководстве по редактированию кнопки «Добавить в корзину».

Вывод

В заключение, скрытие кнопки «Добавить в корзину» может быть полезно во многих различных ситуациях:

  • Когда вы используете WooCommerce в качестве каталога
  • Когда у вас закончились запасы или товар больше не доступен
  • Для запуска кампаний для определенных типов пользователей или ролей пользователей
  • Когда вы собираетесь запустить новый продукт
  • Когда вы используете кнопку для выполнения определенного действия, которое не соответствует стандартному процессу покупки WooCommerce.

В этом руководстве вы узнали о различных способах удаления кнопки «Добавить в корзину». Мы видели, как скрыть его от всего магазина, для определенных продуктов, пользователей и ролей пользователей, и даже как скрыть его, а затем автоматически отобразить снова после определенной даты. Это даст вам немного гибкости для настройки вашего магазина в различных ситуациях. Просто используйте эти сценарии в качестве основы и отредактируйте их, чтобы максимально использовать их в своем магазине.

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

Для получения дополнительной информации о том, как максимально эффективно использовать кнопку «Добавить в корзину», ознакомьтесь со следующими руководствами:

  • Как настроить кнопку «Добавить в корзину» в WooCommerce
  • Функция добавления в корзину WooCommerce программно

Были ли у вас проблемы со скриптами? Знаете ли вы какие-либо другие способы убрать кнопку «Добавить в корзину»? Дайте нам знать в комментариях ниже!