Как изменить стиль кнопки “В корзине” в 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. Если вы знаете, как это сделать любыми другими способами, можете рассказать о них в комментариях! 🙂

Если вам помог материал или остались какие-либо вопросы по разработке сайтов — задавайте их в комментариях. Я с радостью вам отвечу!