Как кастомизировать страницы товаров в WooCommerce?

Как кастомизировать страницы товаров в WooCommerce?

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

И вот, магазин создан. Следующий вызов — беспорядок на страницах товаров. На странице WooCommerce Single Product есть множество элементов, которые не напрямую могут помочь с кастомизацией дизайна и настройкой магазина. Два главных виновника беспорядка — категории товаров и звезды рейтинга. Не каждому магазину нужны эти элементы на странице Single Product. Так же и другие элементы необходимо передвинуть, чтобы они вписывались в кастомный дизайн магазина.

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

Кастомизируйте страницы товаров в WooCommerce

Первое, что вы должны хотеть — это сменить шаблон отображения товаров. Для этого необходимо загрузить файл single-product.php, который контролирует файлы шаблонов, которые, в свою очередь, отображают информацию о товарах на frontend’е.

Самый распространенный совет при настройке шаблонных страниц родительских тем и плагинов — делайте копии шаблонов темы. Все изменения делайте с копией. Такой подход гарантирует вам сохранность ваших изменений в случае обновления тем и плагинов.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

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

С помощью single-product.php я буду вызывать файлы шаблона, которые отвечают за информацию о товаре и формат ее отображения на странице. Файл content-single-product.php — шаблон товара. Именно этот файл необходимо редактировать, чтобы изменить информацию и стили страницы товаров.

А теперь откройте single_template и вставьте следующий код, чтобы изменить шаблон страницы Single Product:

Создайте кастомные товары/категории в WooCommerce

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

Настройте файлы шаблонов в WooCommerce

При работе с файлом content-single-product.php необходимо помнить следующее: любые добавленные товары и категории должны вставляться в конец файла. Еще одна хорошая практика — назовите файл так, чтобы он выделялся и был легко узнаваем. Например, если у вас есть категория «Books», назовите файл content-single-product-books.php. Такая небольшая правка гарантирует, что вы моментально определите файл для определенной категории. Этот файл отвечает за все изменения, которые необходимы, чтобы страницы товаров и категорий выглядели ровно так, как вы хотели (добавление или удаление сайдбара, изменение в цикле и т.д.).

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

Я добавлю условие if, которое будет проверять принадлежность товара к определенной категории, после чего загружать связанный single-product.php в кастомный шаблон. Этот файл можно не переименовывать. Перед вставкой кода найдите в этом файле следующую строку:

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Ее необходимо заменить на следующий код:

В этом коде найдите YOURCATEGORY и замените на свое сокращение категории. Также вы можете переименовать файл content-single-product.php. На примере с категорией выше «Books» файл single-product.php был переименован в content-single-product-books.php. Сейчас код такой:

К данному этапу все файлы успешно отредактированы и/или переименованы. Следующий шаг — загрузить их в WooCommerce-магазин. Чтобы все прошло гладко, создайте в директории темы папку /woocommerce/. Не забывайте, что оба файла (content-single-product.php и single-product.php) необходимо поместить в одну папку. Хорошая практика — изменять элементы кода в этой папке темы, чтобы предотвратить сложные для дебага ошибки при перезаписи оригинальных файлов WooCommerce.

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

Заключение

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

Автор: Muhammad Owais Alam

Источник: https://www.sitepoint.com/

Редакция: Команда webformyself.

WooCommerce: Быстрый старт, первые результаты

Создайте ваш интернет-магазин на WooCommerce с полного нуля уже сегодня!

Узнать подробнее

Интернет-магазин на WooCommerce

Создание магазина с уникальным шаблоном на CMS WooCommerce

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Александр

    Нифига не получается , woocommerce работает в принципе , но у меня такое чувство что я его не до конца установил

  2. Владимир

    Добрый день. Помогите разобраться.
    Хочу изменить блок сортировки http://prntscr.com/kgiigf
    Поменять местами кнопки, некоторые удалить.

    Где это сделать. Какой файл нужно редактировать. Не могу найти нигде ответ.

  3. Вадим

    Вадим Шарыгин
    Немогу понять как столбик с товарами в сгруппированном товаре перенести под изображение да ещё и в 2 ряда

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree