Как более тонко организовать в магазине на woocommerce блок “Похожие по теме товары”?

Блок “Похожих по теме товаров” отображается сразу же после того, как продукция магазина поделена на категории. Вся эта штука организуется автоматически плагином WOOC.

 

В строках цикла этих статей узнаем, как подстроить блок Похожих по теме категории товаров – настроим более тонко, т.е под требования владельца магазина – наши с вами желания:

 

1 – перенесём в корень своей активной темы файл плагина wooc – related.php.

2 – заменим в имени блока тег h2 на div класс …всё это выполним легко и валидно))

Начнём концерт:

 

 

 

 

 

 

Прежде чем приступить к регулировке нашего магазина – а именно блока похожей продукции, необходимо подготовиться к этому делу!

 

 

Хотя для того, чтобы изменить блок Похожих товаров, требуется пара минут – если открыть папку плагина и немного подредактировать её код. Но это, как всеобще известно, неправильный подход к делу: редактировать код плагина неблагодарное и вредное занятие, в первую очередь для владельца магазина. Ну хотя бы потому, что при очередном обновлении плагина, наши с вами правки бесследно затрутся!

 

…и вот, чтобы не терять наработки, поступим несколько иначе, что более грамотно в смысле настройки своего сайта/магазина.

 

 

 

 

 

 

 

 

 

перенесём файл related.php в корень своего шаблона

 

 

 

 

 

Значит, нам нужен файл related.php именно в нём сформирован требуемый блок.

Идём по такой тропинке – путь в корень плагина woocommerce:

 

 

/wp-content/plugins/woocommerce/templates/single-product

 

 

Копируем файл related.php (не вырезаем, но копируем).

 

 

 

Следующим шагом… отправляемся сюда:

 

 

yourtsайт/wp-content/themes/моя_тема/woocommerce/single-product

 

 

 

 

 

 

 

В папку моя_тема/woocommerce/single-product помещаем файл related.php из ядра плагина.

 

 

Теперь, после наших правок структуры обработки плагином wooc нашего магазина, блок “похожих записей” будет формироваться в корне нашего шаблона: в перенесённом файле (это упрощённо).

 

 

 

 

как изменить в заголовке “Похожие по теме товары” тег h2 на какой-то div класс

 

 

 

 

 

Откроем в ядре нашего шаблона файл related.php:

 

 

 

Вот строка, которая обозначает имя блока Похожих по теме продуктов тегом h2:

 

 

<h2><?php esc_html_e( 'Related products', 'woocommerce' ); ?></h2>

 

 

 

h2 можно заменить, к примеру, на такую: где классом widgettitle заменим тег h2.

 

Меняйте на те классы, которые более подходяще стилистически сочитаются с вашей активной темой.

 

 

Вот примерно так:

 

 

<div class="widgettitle"><?php esc_html_e( 'Related products', 'woocommerce' ); ?></div>

 

 

 

В общем, в перенесённом теперь файле можно колдовать как душе угодно: никакие правки с обновлениями WC не затрутся.

 

 

Вот некоторые стили, если у кого-то трудности с css.

 

 

.widgettitle {
font-weight: 700;
color: #353535;
font-size: 17px;
border-bottom: 1px solid #a58d62;
margin: 0 0 10px 0;
padding: 11px 0;
font-family: intro;
}

 

 

 

Как видите, всё запросто регулируется – смотрите картинку ниже!…

 

 

 

 

 

 

…и кстати же, можете перейти непосредственно к нам в магазин и ознакомится, так сказать, в натуре…

 

 

 

 

На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 

 

В следующей статье, разберёмся с более тонкой настройкой блока: а именно – настроим число ссылок-миниатюр Похожих товаров; зададим число колонок блока и, коли требуется, скроем элемент похожих продуктов вообще… Решается эта задача легко и просто!

 

 

Я решил разбить статью на несколько частей, чтоб не путаться… в настройке блока Похожих товаров много нюансов.

 

 

Подписывайтесь, чтоб ухватить удачу за хвост… ))

 

 

Online консультация по настройкам и созданию сайтов на WordPress