Если вы хотите изменить стандартные названия кнопок в WooCommerce, вам надо добавить несколько строк кода в файл functions.php.
Вы можете добавить этот код в файл functions.php дочерней темы, или в текущую тему через специальный плагин, который добавит этот код в файл.
Не добавляйте снипеты напрямую в functions.php текущей темы, потому что при следующем обновлении темы этот файл будет заменен на оригинальный.
Если нужно, сделайте бэкап.
Замените Положить товар в Корзину на свой текст.
Как дать каждой кнопке «Добавить в Корзину» уникальное название
Если вы хотите дать одной или нескольким кнопкам «Добавить в Корзину» свое собственное название, используйте такой снипет:
Замените ID товаров в строках 4 и 6 на ID своих товаров.
Если вы хотите изменить текст только в одном товаре, удалите строки 6 и 7.
Если вы хотите изменить названия кнопок в 3-х и более товарах, скопируйте строки 6 и 7 столько раз, сколько нужно, и замените ID товаров на свои.
Если товаров слишком много, лучше сделать это через массив.
Больше настроек для кнопки В Корзину в статье Кастомизация кнопки Добавить в Корзину WooCommerce
Если вы хотите создать или изменить поведение кнопки Добавить в Корзину, например, создать собственную кнопку и поместить ее в любое место сайта, или чтобы она откладывала выбранный товар в Корзину и перенаправляла посетителя на страницу Оформления Заказа (функционал Купить Сейчас), то переходите сюда:
- Как изменить поведение кнопки Добавить в Корзину WooCommerce
- Как вывести цену товара WooCommerce в любом месте сайта
Как изменить Просмотр корзины, Обновить корзину, Оформить заказ WooCommerce
Строки 4—6 меняют название кнопки Просмотр корзины.
Строки 7—9 меняют название кнопки Обновить корзину.
Строки 10—12 меняют название кнопки Оформить заказ.
Если названия некоторых кнопок вам не нужно менять, удалите соответствующие строки.
Если вы хотите изменить текст кнопки Оформить заказ на странице Оформления заказа на всем сайте, или для определенных товаров по ID, в зависимости от категорий товаров или в зависимости от выбранного способа оплаты, то переходите в статью:
- Как изменить текст на кнопке Оформления заказа в WooCommerce
Как кастомизировать WooCommerce с помощью плагина
Некоторые из этих настроек вы можете сделать с помощью официального плагина:
Читайте также:
- Как отключить кнопку Добавить в корзину
- Как отключить уведомления WooCommerce
- 3 Способа отключить Корзину в WooCommerce
- Как изменить символ валюты на буквы в WooCommerce
- Прямая ссылка на вариативный товар WooCommerce
- Как изменить текст и ссылку на кнопке Вернуться в магазин на странице Корзина в WooCommerce
Надеюсь, статья была полезна. Оставляйте комментарии.
Домой / WordPress / Как изменить текст на кнопке «В корзину» и «Выбрать»
Как изменить текст на кнопке «В корзину» и «Выбрать»
Здравствуйте, друзья! Последнее время на сайте появляется все больше и больше одинаковых вопросов о том, как изменить текст кнопок в интернет магазине WooCommerce. В связи с этим я и решил сделать отдельный урок на эту тему.
Как переименовать кнопки в WooCommerce
Изменять текст кнопок мы будем с помощью плагина WooCommerce Customizer.
1. Скачайте и активируйте плагин WooCommerce Customizer.
2. После активации перейдите в WooCommerce -> Настройки -> Вкладка «Customizer».
3. В настройках Shop Loop (настройки отображения в каталоге магазина) укажите новые названия.
- Simple Product — простой товар (тот, у которого нет вариаций).
- Variable Product — вариативный товар.
Также можно изменить и другие названия:
- Grouped Product — надпись для групповых товаров.
- External Product — надпись кнопки для «внешних товаров».
- Out of Stock Product — текст надписи для товара, которого «нет в наличии».
В блоке настроек Layout можно изменить (указывая любое числовое значение, к примеру 5, 11, 20 и т.д.):
- Products displayed per page — количество товаров, отображаемых на одной странице магазина.
- Product columns displayed per page — количество колонок на странице магазина.
- Product thumbnail columns displayed — число колонок с миниатюрами.
Как изменить текст кнопки в карточке товара
Для того чтобы изменить название кнопки на странице (карточке) товара перейдите на вкладку настроек Product Page и укажите новое названия в поле All Product Types:
Также на этой вкладке настроек можно изменить Tab Titles (названия вкладок) и Tab Content Headings (текст заглавий на странице вкладок):
- Product Description — вкладка описания товаров.
- Additional Information — вкладка со свойствами (атрибутами) товаров.
В плагине есть еще и другие настройки на вкладках Checkout и Misc, но это уже совершенно другая история 😉
Напоминаю, что если у Вас возникают вопросы — смело задавайте их в комментариях.
Рейтинг урока
Рейтинг: 4.28 ( 8 голосов )
С метками:WooCommerce WordPress Плагины
Как изменить текст кнопки «Подтвердить заказ»
Возможно вы знаете, что такого можно написать на этой кнопке, что значительно повысит конверсию вашего интернет-магазина 🤔😁
Кстати, на сайте вы также можете найти мой видеокурс по WooCommerce, в котором мы создаём интернет-магазин на основе готового HTML и CSS.
Вот что получилось у меня и я покажу вам, как достичь этого тоже:
Мало того, что есть несколько способов переименовывания этой кнопки, так вы ещё можете задать произвольный текст в зависимости от выбранного метода оплаты.
1. woocommerce_order_button_text
Способ с использованием фильтр-хука woocommerce_order_button_text я считаю самым правильным, ведь по сути он предназначен именно для этого.
add_filter( 'woocommerce_order_button_text', 'truemisha_order_button_text' ); function truemisha_order_button_text( $button_text ) { return 'Заказать'; }
Код можете вставить в functions.php вашей текущей или дочерней темы…
2. woocommerce_order_button_html
Хук woocommerce_order_button_html явно нужен для чего-то большего, чем всего лишь для смены текста кнопки. Хм, возможно вы захотите поменять её атрибут ID или докинуть классов.
Ну а текст тут можно поменять при помощи PHP-функции str_replace() ну или полностью воссоздать HTML кнопки с нуля.
add_filter( 'woocommerce_order_button_html', 'truemisha_order_button_html' ); function truemisha_order_button_html( $button_html ) { return str_replace( 'Подтвердить заказ', 'Заказать', $button_html ); }
3. Текст кнопки для определённых методов оплаты
Большинство методов оплаты не изменяют текста кнопки, потому что они не прописывают этот свой параметр при регистрации:
class TruemishaGateway extends WC_Payment_Gateway { public function __construct() { $this->id = 'truemisha_gateway'; $this->order_button_text = 'Тут текст кнопки'; ...
И потом у радиокнопок методов оплаты появляется атрибут data-order_button_text, который и содержит текст кнопки, на который нужно поменять при смене платёжного шлюза. Можете попробовать там сделать что-то с JavaScript, но имейте ввиду, что выбор платёжных шлюзов подгружается не сразу при первой загрузке страницы, а асинхронно!
Но раз уж на скриншоте выше я показал, как поменять это для стандартного метода оплаты PayPal, то и покажу вам один альтернативный способ, не уверен в его максимальной правильности, но всё работает хорошо.
add_filter( 'gettext', 'truemisha_paypal_btn_text', 20, 3 ); function truemisha_paypal_btn_text( $translated_text, $text, $domain ) { if( 'Дальше на PayPal' == $translated_text && 'woocommerce' == $domain ) { // старый текст $translated_text = 'Оплата Палкой'; // новый текст } return $translated_text; }
Миша
Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.
Пишите, если нужна помощь с сайтом или разработка с нуля.
Задача. Необходимо в на сайте с Woocommerce заменить текст кнопки «В корзину» (Добавить в корзину, Просмотр корзины, Оформить заказ, Add to cart).
Решение. Для изменения текста или замены на иконку в кнопке заказа товара вставляем в functions.php Код №1 или Код №2, если необходимо изменить кнопки только в некоторых товарах.
Изменение текста кнопки заказа
|
// Custom text Add to cart add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘woo_custom_cart_button_txt’ ); // add_filter( ‘woocommerce_product_add_to_cart_text’, ‘woo_custom_cart_button_txt’ ); function woo_custom_cart_button_txt() { return __( ‘Новая подпись кнопки В корзину’, ‘woocommerce’ ); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Текст кнопки заказа товара по id товара function woo_unique_add_to_cart_text() { global $product; if( $product—>id == 11 ){ return __( ‘Купить сейчас’, ‘woocommerce’ ); // Для товара с id=11 } elseif($product—>id == 12){ return __( ‘Купить по лучшей цене’, ‘woocommerce’ ); // Для товара с id=12 } else{ return __( ‘В корзину’, ‘woocommerce’ ); // Для остальных } } add_filter( ‘woocommerce_product_single_add_to_cart_text’, ‘woo_unique_add_to_cart_text’, 10, 3 ); |
Также можно использовать плагин Customizer for WooCommerce — позволяет настраивать различные названия кнопок, вкладок и пр. в WC.
Замена текста кнопки заказа на иконку
Когда нужно было заменить текст кнопки заказа на иконку, то способы выше не подошли, т.к. они выводят иконку вида <i class="fa fa-shopping-cart"></i> как текст, а не как html-код.
Решение 1. Для замены текста кнопки добавления в корзину на иконку:
- В файле плагина
woocommerce/templates/loop/add-to-cart.php(этот файл нужно скопировать в папку с темой в такойже иерархии папок и потом его редактируем) - Заменить
esc_html( $product->add_to_cart_text() )наsprintf('<i class="fa fa-shopping-cart"></i>').
Updated on May 11, 2022
In this tutorial I am going to show you a couple ways how you can change checkout button text. But please note, that this text can be changed dynamically depending on a payment method selected. We will also cover that below.
Theoretically if you know about WooCommerce template structure, you can replace button text in this file: templates/checkout/payment.php
But please do not do it, because there is a hook for that. Even two. I will show you both of them.
Method 1. Change button text with woocommerce_order_button_text hook
The most simple way, just copy this code to your current theme functions.php file (but better – a child theme or a custom plugin, otherwise you will lose your changes every time after your theme received an update).
/**
* @snippet Change "Place Order" Button text @ WooCommerce Checkout
* @sourcecode https://rudrastyh.com/woocommerce/place-order-button-text.html#woocommerce_order_button_text
* @author Misha Rudrastyh
*/
add_filter( 'woocommerce_order_button_text', 'misha_custom_button_text' );
function misha_custom_button_text( $button_text ) {
return 'Submit'; // new text is here
}You can also change button text if a specific product is in the cart, or if products from specific categories are in the cart etc.
add_filter( 'woocommerce_order_button_text', 'misha_custom_button_text_for_product' );
function misha_custom_button_text_for_product( $button_text ) {
$product_id = 18; // a specific product ID you would like to check
if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product_id ) ) ) {
$button_text = 'Submit';
}
return $button_text;
}Method 2. Change button text with woocommerce_order_button_html hook
Using this method, our main goal is to replace it with str_replace() PHP function in woocommerce_order_button_html filter hook. Here is how to do it:
add_filter( 'woocommerce_order_button_html', 'misha_custom_button_html' );
function misha_custom_button_html( $button_html ) {
$button_html = str_replace( 'Place order', 'Submit', $button_html );
return $button_html;
}The hook woocommerce_order_button_html accepts only one parameter which is the button HTML. This hook also allows you to create the button HTML from scratch.
$order_button_text = 'Submit';
$button_html = '<button>' . $order_button_text . '</button>';Change Button Text for Payment Gateways
This one will be a little tricky 👽 First of all, your custom payment gateway may not have a hook for that and second – of course you can not make changes directly in payment gateway plugin files.
So, what to do? JavaScript? Of course, no! 😱
Even if a payment gateway doesn’t have a hook for that, it must support localization. So, gettext hook will help us in this case.
/**
* @snippet Change "Proceed to PayPal" Button text @ WooCommerce Checkout
* @sourcecode https://rudrastyh.com/woocommerce/place-order-button-text.html#payment_gateways_text
* @author Misha Rudrastyh
*/
add_filter( 'gettext', 'misha_custom_paypal_button_text', 20, 3 );
function misha_custom_paypal_button_text( $translated_text, $text, $domain ) {
if( 'Proceed to PayPal' == $translated_text ) {
$translated_text = 'Pay with PayPal'; // new button text is here
}
return $translated_text;
}You can apply this code for any payment gateway, just check how it renames the button in English and use that phrase in the above code on line 10.
And please be careful because the string you would like to override like “Proceed to PayPal” could be used somewhere else on your website. If so, just add a condition.
# WooCommerce, Checkout
Misha Rudrastyh
Hey guys and welcome to my website. For more than 10 years I’ve been doing my best to share with you some superb WordPress guides and tips for free.
Need some developer help? Contact me
Follow me on Twitter
В этом коротком материале я расскажу о том, как заменить стандартную надпись кнопки “В корзине” для расширения WooCommerce, а также поменять ее внешний вид.
Эта статья была написана по просьбе одного из подписчиков нашей группы в Вконтакте. Если вы хотите внести вклад в развитие нашего проекта и получить ответы на волнующие вас вопросы, обязательно задавайте их в комментариях или нашем сообществе! 🙂
Навигация по статье
Как заменить стандартную надпись “В корзине” в WooCommerce
Для этого переходим к файлам вашей активной темы и добавляем в functions.php следующий код:
// для страницы самого товара
add_filter( 'woocommerce_product_single_add_to_cart_text', 'sajt_pod_klyuch_single_product_btn_text' );
function sajt_pod_klyuch_single_product_btn_text( $text ) {
if( WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( get_the_ID() ) ) ) {
$text = 'Уже в корзине, добавить снова?';
}
return $text;
}
// для страниц каталога товаров, категорий товаров и т д
add_filter( 'woocommerce_product_add_to_cart_text', 'sajt_pod_klyuch_product_btn_text', 20, 2 );
function sajt_pod_klyuch_product_btn_text( $text, $product ) {
if(
$product->is_type( 'simple' )
&& $product->is_purchasable()
&& $product->is_in_stock()
&& WC()->cart->find_product_in_cart( WC()->cart->generate_cart_id( $product->get_id() ) )
) {
$text = 'Уже в корзине, добавить снова?';
}
return $text;
}
Код заменит стандартную надпись “В корзине” на странице рубрики и одиночном товаре. Просто замените надпись “Уже в корзине, добавить снова?” на любую, которая вам необходима.
Как изменить стиль кнопки “В корзине” в WooCommerce?
Для повышения юзабилити сайта многие вебмастеры хотят выделить кнопку “В корзине”, чтобы посетитель их сайта не терял из виду выбранный им товар в общем каталоге. Например, эту кнопку можно покрасить в другой цвет или изменить ее рамку.
Сначала посмотрите, как реализована кнопка “В корзину” на вашем сайте. Она может быть обернута в теги <a>…</a> или <button>…</button>.
Далее находим файл с JS-скриптами вашей активной темы и вставляем туда следующее:
setInterval(function(){
jQuery('button:contains("Уже в корзине, добавить снова?")').css('border', '1px solid red');
},1000);
Скрипт находит элемент <button>, который включает в себя содержимое “Уже в корзине, добавить снова?”, и добавляет инлайн-стили вашей кнопке.
Если на вашем сайте кнопки “В корзину” реализованы через тег <a>, то можете использовать такой скрипт:
setInterval(function(){
jQuery('a:contains("Уже в корзине, добавить снова?")').css('border', '1px solid red');
},1000);
Подведем итоги
В этом материале мы поговорили о том, как заменить стандартную надпись «В корзине» в Woocommerce. Если вы знаете, как это сделать любыми другими способами, можете рассказать о них в комментариях! 🙂
Если вам помог материал или остались какие-либо вопросы по разработке сайтов — задавайте их в комментариях. Я с радостью вам отвечу!
You can change the checkout button text in the WooCommerce checkout page from ‘Place Order’ to your custom text using without using a plugin. It is an easy WooCommerce customization task that requires you to add a filter to your theme functions with your custom text that replaces the PLACE ORDER text.
In this post, I am going to guide you step by step on how to change checkout button text highlighting the important things that you should pay attention to.
By default, the WooCommerce checkout button text is ‘PLACE ORDER’ most users want to change this to a custom text especially where you have a specific message for your customers.
The text button that we will change in this tutorial is as shown in the image below. This is the checkout button text we want to change using a filter.
Steps to Change WooCommerce Checkout Button Text
The following are the steps that you should undertake to change the place order button text.
- Log into your WooCommerce site and go to the theme editor- Main Dashboard menu > Appearance > Theme Editor
- Open the functions.php file via WordPress dashboard or you can open it through the web hosting Cpanel or the FTP client like Filezilla.
- Create the filter hook that will hook on woocommerce_order_button_text for example,
add_filter( 'woocommerce_order_button_text', 'njengah_change_checkout_button_text' ); - Add the callback function with a single parameter
$button_textand in the return, statement adds the string with the custom text that you want to use to replace the default checkout button text. - Save these changes and visit the checkout page to see if the checkout button text has been effectively changed. Let us now illustrate with an example and the full code snippet.
Change Place Order Text in WooCommerce Checkout Page
Suppose we want to change this text to ‘Pay Now’ we can use a filter hook that hooks on the woocommerce_order_button_text WooCoomerce hook.
The callback function should filter the button text and return the custom button text. The following is the code that you should add to the functions.php file to change the checkout button text to a custom text.
Do not forget to replace the custom text in the return statement with your respective custom text. For this tutorial I have added this text as ‘Pay Now’ and the following is the full code snippet that you should add to your theme:
/**
* Change checkout button text "Place Order" to custom text in checkout page
*
* @param $button_text
*
* @return $string
*/
add_filter( 'woocommerce_order_button_text', 'njengah_change_checkout_button_text' );
function njengah_change_checkout_button_text( $button_text ) {
return 'Pay Now'; // Replace this text in quotes with your respective custom button text
}
When you add this code to the functions.php and you update the theme file, you should see the checkout button text has changed to the custom text you added in the return statement as shown on the image below:
There are several other conditions you can apply when changing the checkout button text and you can also hook on the woocommerce_order_button_html but ultimately the snippet shared above is the simplest way to change the checkout button text.
Final Thoughts
In this post, we have outlined the simplest way to change the checkout button text in the checkout page with an example. You can add this code to your theme and edit the text.