Кнопка "Добавить в корзину" в WooCommerce играет ключевую роль в процессе покупок, и иногда требуется её изменить или кастомизировать. В зависимости от ваших целей, вы можете изменить её текст, внешний вид, поведение или добавить к ней дополнительные функции. 1. Изменение текста кнопки "Добавить в корзину" WooCommerce позволяет легко изменить текст кнопки "Добавить в корзину" как на страницах товаров, так и на страницах каталога. Пример кода для изменения текста кнопки: Откройте файл functions.php вашей темы. Добавьте следующий код для изменения текста на странице товара и в каталоге: // Изменение текста кнопки "В корзину" на странице архива (каталог) add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text_archive' ); // Изменение текста кнопки на странице товара add_filter( 'woocommerce_product_single_add_to_cart_text', 'custom_add_to_cart_text_single' ); function custom_add_to_cart_text_archive() { return __( 'Купить сейчас', 'woocommerce' ); // Измените текст на нужный } function custom_add_to_cart_text_single() { return __( 'Добавить в корзину', 'woocommerce' ); // Измените текст на нужный } Этот код меняет текст кнопки на странице архива (категорий) и на странице самого товара. Вы можете заменить 'Купить сейчас' и 'Добавить в корзину' на любые другие значения. 2. Изменение внешнего вида кнопки "Добавить в корзину" Для изменения стиля кнопки "Добавить в корзину" вы можете воспользоваться CSS. Это позволит изменить её цвет, размер, форму и другие параметры. Пример кода CSS для стилизации кнопки: Перейдите в Внешний вид > Настроить > Дополнительные стили CSS. Добавьте следующий CSS для стилизации кнопки: /* Стилизация кнопки "Добавить в корзину" на странице архива */ .woocommerce ul.products li.product a.button { background-color: #28a745; /* Цвет фона */ color: #ffffff; /* Цвет текста */ padding: 10px 20px; /* Размер кнопки */ border-radius: 5px; /* Скругление углов */ font-size: 16px; } .woocommerce ul.products li.product a.button:hover { background-color: #218838; /* Цвет при наведении */ } /* Стилизация кнопки на странице товара */ .single_add_to_cart_button { background-color: #0073aa; color: #ffffff; padding: 12px 24px; font-size: 18px; border-radius: 5px; } .single_add_to_cart_button:hover { background-color: #005f8c; } Этот CSS-код меняет внешний вид кнопки на страницах каталога и на странице самого товара. Вы можете настроить цвета, размер шрифта и другие параметры в зависимости от стиля вашего сайта. 3. Изменение поведения кнопки "Добавить в корзину" Вы можете изменить стандартное поведение кнопки "Добавить в корзину", например, чтобы после добавления товара в корзину покупателя сразу перенаправляло на страницу оформления заказа. Пример кода для изменения поведения кнопки: Добавьте следующий код в файл functions.php: // Перенаправление на страницу оформления заказа после добавления товара в корзину add_filter( 'woocommerce_add_to_cart_redirect', 'redirect_to_checkout' ); function redirect_to_checkout() { return wc_get_checkout_url(); // Перенаправляем на страницу оформления заказа } Этот код перенаправляет покупателя сразу на страницу оформления заказа после того, как товар был добавлен в корзину, минуя страницу корзины. 4. Добавление иконки к кнопке "Добавить в корзину" Если вы хотите сделать кнопку более привлекательной, вы можете добавить к ней иконку. Пример кода для добавления иконки с помощью CSS: Перейдите в Внешний вид > Настроить > Дополнительные стили CSS. Добавьте следующий код: /* Добавляем иконку к кнопке "Добавить в корзину" на странице каталога */ .woocommerce ul.products li.product a.button:before { content: '\f07a'; /* Иконка корзины из FontAwesome */ font-family: FontAwesome; margin-right: 5px; } /* Добавляем иконку к кнопке на странице товара */ .single_add_to_cart_button:before { content: '\f07a'; /* Иконка корзины из FontAwesome */ font-family: FontAwesome; margin-right: 5px; } Этот код добавляет иконку корзины перед текстом кнопки. Если на вашем сайте уже подключена библиотека FontAwesome, иконка будет корректно отображаться. 5. Кастомизация кнопки "Добавить в корзину" для определённых товаров или категорий Если вам нужно изменить текст или внешний вид кнопки только для определённых товаров или категорий, вы можете использовать условные теги. Пример кода для изменения кнопки в зависимости от категории: Добавьте следующий код в файл functions.php: // Изменение текста кнопки "Добавить в корзину" для товаров из категории "odezhda" add_filter( 'woocommerce_product_add_to_cart_text', 'custom_add_to_cart_text_category' ); function custom_add_to_cart_text_category() { global $product; if ( has_term( 'odezhda', 'product_cat', $product->get_id() ) ) { return __( 'Добавить одежду в корзину', 'woocommerce' ); } return __( 'В корзину', 'woocommerce' ); } В этом примере текст кнопки меняется только для товаров из категории с ярлыком odezhda. Для всех остальных товаров текст остаётся стандартным. 6. Полное удаление кнопки "Добавить в корзину" Если вы хотите убрать кнопку "Добавить в корзину" (например, если магазин работает в режиме каталога), вы можете сделать это с помощью следующего кода. Пример кода для удаления кнопки: Добавьте следующий код в файл functions.php: // Убираем кнопку "Добавить в корзину" на страницах каталога и товаров remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); Этот код полностью удаляет кнопку "Добавить в корзину" с любых страниц, включая страницы категорий и отдельные страницы товаров. Ваш магазин будет работать как каталог без возможности добавления товаров в корзину. Кнопка "Добавить в корзину" в WooCommerce является важным элементом взаимодействия с пользователем, и её кастомизация может значительно улучшить пользовательский опыт. С помощью кода и CSS вы можете изменить текст, внешний вид и поведение кнопки, а также настроить её под конкретные категории или товары.