Как настроить шаблоны WooCommerce

Ищете способы редактировать свои шаблоны? В этом руководстве мы покажем вам два разных метода настройки шаблонов WooCommerce для вашего веб-сайта с плагинами и без них.

WooCommerce — отличная платформа для создания магазинов электронной коммерции. Он очень прост в использовании, имеет множество функций и множество вариантов настройки для добавления функций и изменения дизайна вашего веб-сайта. Помимо изменения страницы магазина или страницы продукта, вы также можете редактировать шаблоны, которые WooCommerce включает по умолчанию.

Зачем настраивать шаблоны WooCommerce?

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

Редактируя страницы по умолчанию на своем сайте, вы убедитесь, что они отличаются от конкурентов и имеют стиль, соответствующий внешнему виду вашего магазина. Но если вы хотите настроить их так, чтобы получить значительное конкурентное преимущество , неплохо было бы также отредактировать шаблоны по умолчанию.

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

О чем следует помнить перед редактированием шаблонов

Прежде чем вы начнете настраивать свои шаблоны, вот некоторые вещи, которые вы должны иметь в виду.

1. Темы WooCommerce

Вы будете изменять многие элементы своего веб-сайта, связанные с WooCommerce, с помощью шаблонов. Убедитесь, что используемая вами тема полностью совместима с WooCommerce. Если у вас ее еще нет или вы думаете о ее смене, ознакомьтесь с нашим списком лучших тем WooCommerce.

2. Правильно установите WooCommerce

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

3. Используйте дочернюю тему и создайте резервную копию своего сайта

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

Мы также рекомендуем сделать резервную копию вашего веб-сайта перед началом этого процесса. Если вам нужна помощь в этом, ознакомьтесь с нашим полным руководством по резервному копированию веб-сайта WordPress. Точно так же вы также можете найти дополнительную информацию о том, как создать дочернюю тему в WordPress и о плагинах для дочерних тем.

4. Знание программирования

Чтобы настроить шаблоны WooCommerce, мы будем использовать фрагменты кода. Независимо от того, делаете ли вы это программно или с помощью плагина, мы рекомендуем вам иметь некоторые базовые знания в области программирования. Для некоторых настроек мы будем использовать хуки. Если вы не знакомы с крючками, ознакомьтесь с этим руководством по крючкам WooCommerce.

Если у вас нет навыков кодирования и вы не чувствуете себя комфортно при редактировании основных файлов, мы рекомендуем вам обратиться за помощью к разработчику.

5. Файлы тем и шаблонов

Файлы темы и шаблона различаются в зависимости от темы, которую вы используете для своего магазина WooCommerce. Для этой демонстрации мы будем использовать тему Divi, поэтому некоторые файлы тем и шаблонов на вашем сайте могут отличаться, если вы используете другую тему. Тем не менее, вы сможете без проблем следовать инструкциям независимо от используемой темы.

Как редактировать шаблоны WooCommerce

Существует 2 основных способа настройки шаблонов WooCommerce:

1. Программно
2. Использование плагина

В следующем разделе мы рассмотрим каждый метод, чтобы вы могли использовать тот, который вам наиболее удобен.

1. Настройте шаблоны WooCommerce программно

Даже если WordPress прост в использовании без каких-либо знаний в области программирования, он также удобен для разработчиков. Фактически, вы можете редактировать практически все на своем веб-сайте как с помощью плагинов, так и с помощью фрагментов кода. В этом разделе мы покажем вам, как программно редактировать шаблоны в WooCommerce.

Существует два подхода к программной настройке шаблонов:

• Перезапись шаблонов
• с крючками

Оба эти подхода будут работать, поэтому выберите тот, который более удобен для вас. Давайте кратко рассмотрим различия между этими двумя методами, чтобы у вас было общее представление о том, что делает каждый из них и когда их использовать.

Хуки против перезаписи шаблонов

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

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

Прежде чем продолжить, убедитесь, что вы знаете, каковы ваши потребности, и выберите метод, который соответствует вашим потребностям. Если вы все еще не уверены в этом, мы рекомендуем вам обратиться за помощью к разработчику WordPress.

1.1. Перезапись шаблонов для редактирования шаблонов WooCommerce

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

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

Чтобы получить доступ к файлам шаблонов, на панели инструментов перейдите в « Плагины» > «Редактор плагинов» , выберите «WooCommerce» в раскрывающемся списке, а затем перейдите к файлам шаблонов на вкладке «Шаблоны».

Здесь вы найдете все основные файлы, которые вы хотите отредактировать, такие как archive-product.php , content-product-cat.php , content-product.php и так далее. Точно так же вы также можете редактировать файлы шаблонов в корзине, оформлении заказа, электронной почте и многом другом.

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

Теперь давайте посмотрим на несколько примеров того, как вы можете настроить шаблоны WooCommerce .

1.1.1. Добавьте шорткод в шаблоны WooCommerce

Одним из наиболее распространенных способов настройки кода в WooCommerce является использование шорткодов. Существует множество официальных шорткодов, предоставляемых WooCommerce и WordPress, которые вы можете использовать для редактирования шаблонов.

Следующий скрипт отобразит панель управления моей учетной записи WooCommerce на всех страницах отдельных продуктов. Просто вставьте его в файл single-product.php и обновите его.

 <?php
если ( ! определено ('ABSPATH') ) {
   выход; // Выход при прямом доступе
}
get_header('магазин');
   в то время как ( have_posts() ): 
   the_post();
   wc_get_template_part('контент', 'один продукт');
   конец; // конец цикла.
do_action('woocommerce_sidebar');
   $t= '<div><h4>Моя учетная запись</h4>';
   $t.= do_shortcode(" [ woocommerce_my_account ] "); $t.="</div>"; эхо $t; get_footer('магазин');

После этого просмотрите страницы продукта, и вы сможете увидеть панель управления учетной записью.

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

1.1.2. Напомните клиенту, что он купил продукт раньше

Вы также можете настроить шаблоны WooCommerce, чтобы предоставить своим постоянным покупателям код скидки, если они уже приобретали продукт ранее. Еще раз вам нужно вставить следующий код в файл single-product.php и обновить его.

 get_header('магазин');
   в то время как ( have_posts() ): 
    the_post(); 
    wc_get_template_part('контент', 'один продукт');
   конец; // конец цикла.
$current_user = wp_get_current_user();
если ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo '<div class="user-bought">&hearts; Привет ' . $current_user->first_name . ', вы купили это раньше. Купите еще раз, используя этот купон: <b>PURCHASE_AGAIN_21</b></div>';
конец;
get_footer('магазин');

Теперь, как только ваши клиенты увидят товар, который они уже купили, появится следующее сообщение.

Это некоторые из способов, с помощью которых вы можете редактировать шаблоны WooCommerce, перезаписывая шаблоны. Если вам нужны дополнительные ссылки и примеры, ознакомьтесь с нашим подробным руководством по программной настройке шаблонов WooCommerce.

1.2. Использование хуков для редактирования шаблонов WooCommerce

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

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

Чтобы добавить хуки в свой интернет-магазин, все, что вам нужно сделать, это перейти в « Внешний вид»> «Редактор тем», открыть файл functions.php и добавить фрагменты кода с хуками действия или фильтра.

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

1.2.1. Добавить информацию над изображением в отдельном продукте

Если вы хотите включить какую-либо дополнительную информацию о продуктах над изображением продукта, просто добавьте следующий скрипт в файл functions.php .

 // Добавляем пользовательскую функцию
функция quadlayers_before_single_product() {
echo '<h2>На этой неделе скидка на все 25%!</h2>';
}

// Добавляем действие
add_action('woocommerce_before_single_product', 'quadlayers_before_single_product', 11);

Это отобразит сообщение над изображениями продукта на отдельных страницах продукта.

1.2.2. Добавьте описание магазина под названием магазина на странице магазина.

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

 // Добавляем пользовательскую функцию
функция quadlayers_custom_archive_description() {
$new_description = '<p>Это наш магазин. Наслаждайтесь покупками!</p>';
вернуть $ новое_описание;
}

// Добавляем действие
add_action('woocommerce_archive_description', 'quadlayers_custom_archive_description');

После сохранения изменений вы сможете увидеть описание магазина на странице магазина WooCommerce.

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

2. Настройте шаблоны WooCommerce с помощью плагина

Если у вас нет навыков кодирования, для вас есть другое решение. Вы можете редактировать шаблоны WooCommerce с помощью плагинов.

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

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

Давайте лучше объясним это на нескольких примерах.

2.1. Установите и активируйте плагин

Чтобы начать использовать плагин, его необходимо сначала установить и активировать. На панели инструментов WordPress перейдите в раздел « Плагины» > «Добавить новый» и найдите « Редактировать шаблоны WooCommerce» . Нажмите «Установить сейчас» , а затем активируйте его.

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

2.2. Редактировать шаблоны

После того, как вы активировали плагин, вы можете приступить к настройке шаблонов WooCommerce. На панели инструментов перейдите в WooCommerce > Шаблоны тем, и вы сможете увидеть все шаблоны, которые вы можете изменить в текущей теме. Для каждого шаблона вы увидите заголовок, путь и статус того, был ли он изменен в текущей теме.

Чтобы отредактировать любые файлы шаблонов, все, что вам нужно сделать, это нажать « Редактировать » на нужном шаблоне. Если вы не видите шаблон, который хотите отредактировать, вы также можете найти его с помощью строки поиска.

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

Как только вы добавите фрагмент кода в редактор, нажмите « Сохранить шаблон в тему» .

Если позже вы передумаете и захотите сбросить все изменения, внесенные в шаблон, просто нажмите « Сброс », чтобы отменить изменения.

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

Вот и все! Таким образом, вы можете настроить любой шаблон WooCommerce и выделиться среди конкурентов.

Бонус: как редактировать шаблоны электронной почты WooCommerce

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

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

Хорошей новостью является то, что редактировать шаблоны электронной почты WooCommerce довольно просто, и вы можете вносить большинство изменений с панели инструментов WordPress без каких-либо плагинов или фрагментов кода. Просто перейдите в WooCommerce > Настройки и откройте вкладку Электронная почта. Там вы сможете увидеть все настраиваемые параметры отправителя электронной почты и шаблоны электронной почты.

В параметрах отправителя электронной почты вы можете изменить имя и адрес «От». Это изменит способ отображения имени и адреса отправителя в электронных письмах, которые вы отправляете своим клиентам.

Точно так же вы также можете изменить изображение заголовка, текст нижнего колонтитула и основной текст, а также цвет текста и фона шаблонов электронной почты.

После внесения всех необходимых изменений вы можете предварительно просмотреть шаблон электронной почты, нажав ссылку « Нажмите здесь, чтобы просмотреть шаблон электронной почты ».

Если вас устраивает предварительный просмотр, просто сохраните изменения и все. Это отличный и быстрый способ персонализировать свой магазин и произвести впечатление на покупателей.

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

Вывод

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

В этом руководстве мы рассмотрели два основных способа настройки шаблонов WooCommerce:

• Программно
• Использование плагина

Если вы знаете, как кодировать, первый метод для вас. Вы можете редактировать шаблоны либо с помощью хуков, либо перезаписывая шаблоны. Использование хуков рекомендуется, когда вы хотите применить простые и небольшие изменения, тогда как если вы хотите более сложную настройку, вам нужно будет перезаписать шаблоны.

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

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

Мы надеемся, что теперь вы сможете без проблем вносить любые изменения в шаблоны WooCommerce. Какой метод вы использовали? Дайте нам знать в комментариях ниже!

Если вы нашли это руководство полезным, вот еще несколько статей, которые могут вас заинтересовать:

• Как протестировать шаблоны электронной почты WooCommerce: 3 простых способа!
• Лучшие плагины WooCommerce для настройки страницы «Моя учетная запись»
• Как настроить регистрационную форму WooCommerce