Как изменить кнопку «Добавить в корзину», чтобы узнать больше WooCommerce

Опубликовано: 2021-02-23

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

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

Некоторые другие настройки вашего магазина WooCommerce могут потребовать, чтобы вы изменили кнопку «Добавить в корзину», чтобы узнать больше.

Настройте кнопку WooCommerce «Добавить в корзину»

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

Ниже приведены лишь несколько примеров руководств, которые я написал ранее о том, как настроить кнопку добавления в корзину WooCommerce:

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

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

WooCommerce Измените кнопку «Добавить в корзину», чтобы узнать больше

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

В этом руководстве у меня установлен WooCommerce, и я использую тему Storefront, которая является темой WooCommerce по умолчанию.

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

Кнопка «Добавить в корзину» для одного продукта: WooCommerce Изменить кнопку «Добавить в корзину», чтобы узнать больше

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

Шаг за шагом: кнопка WooCommerce «Подробнее» для замены «Добавить в корзину»

Чтобы изменить кнопку «Добавить в корзину», чтобы прочитать больше на странице отдельного продукта WooCommerce, вам необходимо выполнить следующие шаги:

Создайте резервную копию вашей темы и, самое главное, файл functions.php, куда вы поместите фрагмент кода, чтобы изменить кнопку WooCommerce добавить в корзину, чтобы узнать больше .
Желательно создать дочернюю тему вашей активной темы , если у вас еще нет дочерней темы. Если вы не знаете, как создать дочернюю тему, этот учебник о том, как создать дочернюю тему Storefront, может стать хорошим началом.
Откройте файл functions.php вашей дочерней темы и добавьте приведенный ниже код внизу файла functions.php:

 // Чтобы изменить кнопку добавления в корзину, чтобы прочитать больше на странице одного продукта
	
	add_filter('woocommerce_product_single_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_product_page');
	
	функция njengah_woocommerce_change_add_cart_read_more_product_page() {
	
		return __('Подробнее', 'woocommerce'); 
	}

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

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

Страница магазина Кнопка «Добавить в корзину»: WooCommerce Измените кнопку «Добавить в корзину», чтобы узнать больше

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

Шаг за шагом: добавьте кнопку «Подробнее» WooCommerce на страницу магазина

Чтобы изменить кнопку «Добавить в корзину», чтобы прочитать больше на странице магазина WooCommerce, вам необходимо выполнить следующие шаги, чтобы добавить код в свою дочернюю тему:

Создайте резервную копию своей темы и, самое главное, файл functions.php, в который вы поместите фрагмент кода, чтобы изменить кнопку добавления в корзину WooCommerce, чтобы узнать больше на странице магазина .
Желательно создать дочернюю тему вашей активной темы , если у вас еще нет дочерней темы. Если вы не знаете, как создать дочернюю тему, этот учебник о том, как создать дочернюю тему Storefront, может стать хорошим началом.
Откройте файл functions.php вашей дочерней темы и добавьте приведенный ниже код внизу файла functions.php:

 // Чтобы изменить текст добавления в корзину в архивах товаров и на странице магазина 

	add_filter('woocommerce_product_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_shop_page');  
	
	функция njengah_woocommerce_change_add_cart_read_more_shop_page() {
	
		return __('Подробнее, 'woocommerce');
		
	}

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

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

Страница магазина и страница отдельного продукта: WooCommerce Изменить кнопку «Добавить в корзину», чтобы узнать больше

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

Ниже приведен фрагмент кода объединения, который вы должны добавить в файл functions.php вашей дочерней темы, чтобы изменить текст кнопки добавления в корзину WooCommerce, чтобы прочитать больше:

 // Чтобы изменить кнопку добавления в корзину, чтобы прочитать больше на странице одного продукта
	
	add_filter('woocommerce_product_single_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_product_page');
	
	функция njengah_woocommerce_change_add_cart_read_more_product_page() {
	
		return __('Подробнее', 'woocommerce'); 
	}

    // Чтобы изменить текст добавления в корзину в архивах товаров и на странице магазина 

	add_filter('woocommerce_product_add_to_cart_text', 'njengah_woocommerce_change_add_cart_read_more_shop_page');  
	
	функция njengah_woocommerce_change_add_cart_read_more_shop_page() {
	
		return __('Подробнее, 'woocommerce');
		
	}

Вывод

В этом посте мы показали, как вы можете использовать фрагменты кода, чтобы изменить кнопку добавления в корзину WooCommerce, чтобы читать больше как на странице отдельного продукта, так и в архивах или на странице магазина.

В обоих случаях это фильтры, которые имеют разные хуки для таргетинга на страницу магазина или страницу архивов и страницы отдельных продуктов.

Наконец, вы можете объединить два кода и добавить их в functions.php, чтобы изменить кнопку «Добавить в корзину», чтобы прочитать больше как на странице магазина, так и на странице одного продукта.