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

    upd: 11.2018

    Важно, если ваш шаблон сайта содержит в корне файл «woocommerce.php» тогда любые изменения файла «/Ваш_Шаблон/woocommerce/archive-product.php» игнорируются и этот способ вам не поможет пока вы не модифицируете свой шаблон что бы он работал без файла «woocommerce.php»

О наличие этот файла в вашем шаблоне вам сообщит Woocommerce из админки сайта. Пример на скриншоте ниже:

20 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’ результат нулевой

      1. Возможно вам не нужны вызовы некоторых функций, что бы всё заработало как надо.
        Например <td class="product-table-quantity"><?php custom_quantity_field_archive($product); ?></td>

  7. Добрый день,
    как сделать обновления через ajax и в табличной форме не переходит на след страница

  8. Добрый день,
    а есть описание настройки шаблона страницы с категориями как на этом сайте http://teplodiskont.ru/ ?
    нужно вывести так же Категории, с под категориями. Буду очень благодарен если покажите.

  9. Здравствуйте. Спасибо большое за труды — действительно помогает сделать безопасный вывод товаров таблицей.
    Но мне нужна еще более «глубокая переделка». Мне нужен такой же вывод категорий: чтобы в две колонки выводились: изображение категории (слева), заголовок категории (справа). И еще подкатегории должны быть не прямыми ссылками, а средством навигации по общей таблице товаров. А названия подкатегорий должны быть заголовками в таблице товаров.

    Заголовок подкатегории 1
    (Изображение 1) Товар 1 —————— Перейти
    (Изображение 2) Товар 2 —————— Перейти
    (Изображение 3) Товар 3 —————— Перейти
    Заголовок подкатегории 2
    (Изображение 4) Товар 4 —————— Перейти
    (Изображение 5) Товар 5 —————— Перейти
    (Изображение 6) Товар 6 —————— Перейти

    И при нажатии на подкатегории (в сайдбаре слева) пользователя должно перенести в нужную часть общей таблицы товаров…
    и так далее.
    Скажите пожалуйста, можно ли внеся правки в Ваш код реализовать что-то подобное?

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

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