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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php /** * The template for displaying product widget entries * * This template can be overridden by copying it to yourtheme/woocommerce/content-widget-product.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @author WooThemes * @package WooCommerce/Templates * @version 2.5.0 */ // Exit if accessed directly if ( ! defined( 'ABSPATH' ) ) { exit; } global $product; ?> <li> <a href="<?php echo esc_url( $product->get_permalink() ); ?>"> <?php echo $product->get_image(); ?> <span class="product-title"><?php echo $product->get_name(); ?></span> </a> <?php if ( ! empty( $show_rating ) ) : ?> <?php echo wc_get_rating_html( $product->get_average_rating() ); ?> <?php endif; ?> <?php echo $product->get_price_html(); ?> </li> |
В стандартном шаблоне используются следующие параметры:
- $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 вызвана неправильно.
Меняем вёрстку и расположение элементов, к тому же, используя дополнительных параметры, выводим нужные данные (краткое описание и не форматированную цену) в наш шаблон. Получается что-то типа такого:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php if (!defined('ABSPATH')) { exit; } global $product; ?> <li class="container-fluid "> <div class="row"> <div class="col-xs-4"> <a href="<?php echo esc_url($product->get_permalink()); ?>"> <figure> <?php echo $product->get_image(); ?> </figure> </a> </div> <div class="col-xs-8 b_widget_product-data"> <h5> <a href="<?php echo esc_url($product->get_permalink()); ?>"> <?php echo $product->get_title(); ?> </a> </h5> <div> <div> <?php echo $product->short_description; ?> </div> <div class="b_widget_product-attribute"> <div class="pull-left"> <span class="glyphicon glyphicon-lock"></span> <span><?php echo $product->stock_quantity ?></span> </div> <div class="pull-right"> <span> от <?php echo $product->price ?></span> <span class="glyphicon glyphicon-rub"></span> </div> </div> </div> <div class="clearfix"></div> <div class="text-center"> <a href="<?php echo esc_url($product->get_permalink()); ?>"> <div class="btn btn-default btn-sm">Заказать</div> </a> </div> </div> </div> </li> |
Осталось только добавить раскраску опциям и цене, чтобы они немного выделялись, также стоит убрать отступ между двумя блоками. CSS файл -
|
1 2 3 4 5 6 7 |
.b_widget_product-data { padding-left: 0; } .b_widget_product-attribute { color: #3ab67f; font-weight: bold; } |
(5 votes, average: 9,40 out of 10)
Загрузка...
