Как изменить текст кнопки «Подтвердить заказ»

Возможно вы знаете, что такого можно написать на этой кнопке, что значительно повысит конверсию вашего интернет-магазина 🤔😁

Кстати, на сайте вы также можете найти мой видеокурс по 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. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.

Комментарии — 4

Оставить комментарий

Если вы хотите добавить код, не забудьте обернуть его в <pre lang="php"></pre>, если же код – меньше одной строчки, то можно и в <code></code>.