Анализ сайта
Твиты
Афоризмы
Цитаты
Новости
Анализировать

WP+Woocommerce – редактируем виджет рекомендуемых товаров

Несмотря на то, что стандартный вывод виджета Woocommerce с рекомендуемыми товарами не плохо стилизован (хотя и почти идентичен виджету корзины), обычно требуется настроить свой вариант отображения.

 

 

Сделаем блок рекомендуемого товара меньше по высоте и добавим данных - блок с остатком/наличием товара (цифровое значение) и начальную стоимость продукта без опций, в стиле "от N рублей".  Весь блок будет отвёрстан на bootstrap, с парочкой иконок оттуда же. CSS со стилям содержит два класса с раскраской атрибутов и ограничением отступов у блока. Ниже картинка из серии было-стало:

 

 

Виджет Woocomerce товаров активируется в меню "Внешний вид", на странице "Виджеты" блок  "Woocommerce products" необходимо перенести в Боковую колонку(сайдбар). В блоке настроек, после переноса, можно выбрать группу отображаемых товаров (рекомендуемые, товары со скидкой, все товары), количество товаров и сортировку.

Если у вас нет справа Боковой колонки или сайдбара или вовсе отсутствует пункт "Виджеты" в меню "Внешний вид", значит у вашей темы нет поддержки виджетов, как активировать эту функцию можно почитать в статье - Добавление поддержки виджетов в тему Woordpress.

 

 

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

 

Для вывода внутренностей виджета товара, используется файл - wp-content/plugins/woocommerce/templates/content-widget-product.php. Его мы копируем в папку с нашим шаблоном предварительно создав там папку "woocommerce". Путь к файлу в вашей WordPress теме должен выглядеть таким образом:

wp-content/themes/ваша-тема/woocommerce/content-widget-product.php 

 

Стандартное содержимое файла "content-widget-product.php " в Woocommerce 3.0.3:

 

В стандартном шаблоне используются следующие параметры:

  • $product->get_name() - Название товара
  • $product->get_permalink(- ссылка на товар, обратите внимание, ссылка обёрнута функцией проверки url
  • $product->get_image() - переменная содержит изображения товара в тэге <img>.
  • $product->get_average_rating() - код для вывода html блока рейтинга
  • $product->get_price_html() - код для вывода html блока с ценой

Параметры которые могут пригодиться в нашем виджете:

  • $product->get_price() - цена товара;
  • $product->get_short_description() - краткое описание продукта;
  • $product->get_description() - полное описание продукта;
  • $product->get_date_created() - дата создания товара;
  • $product->get_stock_quantity()  - количество товара, оставшееся на складе.

В ранних версиях Woocommerce запрашивать свойства товара можно было не указывая перед свойством "get_" например "$product->price", сейчас класс продукта всё ещё возвращает необходимое значение, но при этом генерирует ошибку уровня Notice:

Notice:  Функция price вызвана неправильно.

 

Меняем вёрстку и расположение элементов, к тому же, используя дополнительных параметры, выводим нужные данные (краткое описание и не форматированную цену) в наш шаблон. Получается что-то типа такого:

 

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

 

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars6 Stars7 Stars8 Stars9 Stars10 Stars (1 votes, average: 9,00 out of 10)
Загрузка...

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