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 табличный вывод товаров

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

  1. Подскажите пожалуйста, а можно как нибудь настроить стиль например для размера изображений, чтоб он подкачивал их не с основного файла Темы например: «themes/storefront/style.css» а «themes/storefront/woocommerce/style.css»
    Очень хотелось бы для этой таблички отдельную тему сделать!
    Спасибо вам большое полезная статья! 🙂

    1. Здесь есть несколько путей. Если вы с кодом на «Вы», то можно установить плагина который позволяет писать стили css прям в админке сайта.
      Если вы с кодом на «Ты», тогда можно создать отдельный файл стилей и подключать его на отдельной странице через add_action.

  2. Еще хотелось бы понять как вывести вес товара например после имени! В заранее больше спасибо!!!

    1. Всё зависит от того в каком поле у вас хранится вес. Но любые кастомные поля в WP в принципе можно выводить через функцию WP «get_post_meta()»

  3. Утро доброе. Подскажите пожалуйста, а как сделать чтобы в категориях товара были такие же иконки. А то у меня на странице магазина (где выводятся все товары) есть иконки, а на отдельный страницах товара (которые вывел через шорткод, категорию отдельную) их нет.

  4. Вообще прикольная задумка, например на главной выходят не все товары, а только с одной категории, предположим распродажа! Djo подскажите пожалуйста как можно реализовать, я так понимаю надо В файле «/Ваш_Шаблон/woocommerce/archive-product.php что-то поменять ?

    1. В этом случае создаёте файл шаблона для главной странице(по всем требованиям WordPress). Затем в админке сайта создаёте страницу с этим шаблоном и делайете в настройках её главной. Далее переходите в код данного шаблона и делаете в нём запрос на получение товаров с нужной категории. Подобным образом реализована главная этого сайта http://teplodiskont.ru/

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

    Еще раз благодарю!

  6. Сделал всё по вашей инструкции, но чудо не произошло…
    Пихтограммы не отобразились, попробовал установить значения $VIEW_TEMPLATE = ‘table’ или $VIEW_TEMPLATE = ‘list’ результат нулевой

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

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