Woocommerce товары таблицей или как изменить шаблон категории товаров

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

В первую очередь, что бы править шаблоны вывода, не забудьте из папки плагина Woocommerce/templates скопировать необходимые для редактирования файлы в папку «ваша тема»/woocommerce/. Если папки «woocommerce» в папке с вашей темой нет, тогда создайте её. Все файлы переносить не нужно, берите только те что вы будете править, если не знаете какой файл за что отвечает, перенесите все — потом методом «нучного тыка» определите ваш, а остальные — удалите.

Итак как же изменить вывод товаров в категории от привычного что есть в шаблонах Woo.

Например —  на «Тостере» советуют:

Начальные тэг таблиц:

был помещен в другой файл в этом шаблоне — loop/loop-start.php.
Ну и соответственно конечный тэг таблицы был помещен в loop/loop-end.php.

А сам код вывода данных таблицы помещают в «content-product.php»

А ресурс «ИглуЧит» советует в файле шаблона function.php прописать следующий код:

и в файле content-product.php после строки

вставить

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

Итак, еще одно решение от Zixn.ru(т.е от нас)

Подготовка

  1. Скопируйте файл из «/wp-content/plugins/woocommerce/templates/content-product.php» в  «/Ваш_Шаблон/woocommerce/content-product.php»
  2. Создайте файл «/Ваш_Шаблон/woocommerce/content-tables.php» и скопируйте в него следующий код:
    3. Создайте файл(но только если у вас его еще там нет) «/Ваш_Шаблон/woocommerce/archive-product.php». Это стандартный файл шаблона Woocommerce, если вы уже его кастомизировали, то рекомендую найти разницу в коде и взять то что вам нужно. Код для этого файла следующий:
    Всё, почва для шаблона готова и теперь маленький штрих для того что бы можно было выбрать между стандартным шаблоном и вашим.

    Заходим в файл «»/Ваш_Шаблон/functions.php» и дописывам хук + функцию

    Немного поясню: В файле «/Ваш_Шаблон/woocommerce/archive-product.php» при помощи глобальной переменной «VIEW_TEMPLATE» и условия «IF»  проиcходит определение того, какой файл шаблона подключить(табличный или стандартный). Так же данный файл дополнен блоком

    Для отображения двух «пиктограм» выбора шаблона.

    Код который мы добавили в файл function.php следит за наличием GET переменных и устанавливает соответсвующее значение в глобальную переменную «VIEW_TEMPLATE», при этом значение записывается в куки — что бы выбранный шаблон отображался у пользователя всегда пока есть куки сайта.

Так же вам может понадобиться подключить дополнительные стили:

  1. Для отображения «пиктограм» здесь используется библиотека «font awesome» — если вам не нужны эти значки, вы можете прописать свой стиль или оставить просто текст.
  2. В любом случаем вам потребуется «допилить» стиль отображения под себя, не забывайте подключить дополнительный файл стилей для «комфортной» правки. Например свой файл стилей можно подключить через хук в файле function.php
     

    Если вы всё сделали верно для создания шаблона табличного вывода товаров в Woocommerce, то результат определённо вас порадует, ну а вот что получилось у нас:

    Woocommerce табличный вывод товаров

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

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