Как изменить Woocommerce с помощью дочерей темы. Часть 5,1 – добавим новый раздел на главную страницу

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

Вот как это должно выглядеть в итоге

Как добавить категорию на страницу Woocommerce

Прежде всего перейдем в админпанель>> товары>>категории.

Создадим категорию, добавим описание и миниатюру.

Затем нужно добавить в эту категорию несколько товаров.

Теперь перейдем в functions.php и напишем небольшую функцию.

Мы хотим поместить нашу категорию между категориями товаров и недавними продуктами.

Воспользуемся плагином Simply Show Hooks. Как видно, наш блок должен находиться между storefront_product_categories с 20 приоритетом и storefront_recent_products у которого приоритет 30.

Напишем небольшую функцию

function carolinaspa_homekit(){

$homekit = get_term(16,'product_cat', ARRAY_A);

Var_dump($homekit);

}

add_action('homepage', 'carolinaspa_homekit', 25);

get_term () — получает данные об элементе таксономии по его ID.

16 – это ID нашей категории (у вас будет свое значение).

‘product_cat’ – это название таксономии .

ARRAY_A – мы хотим вывести ассоциативный массив.

var_dump($homekit) – вывод массива на экран.

Чтобы узнать ID и таксономию нужно перейти админпанель>> товары>> категории. Выбрать нужную категорию и в адресной строке найти ID и taxonomy, как на скриншоте ниже.

Итак, перейдем на главную страницу магазина и увидим наш массив.

Как видно, он содержит такие данные как Slug, Name, description и так далее, поэтому теперь мы можем вывести нужную нам информацию на странице

Функция для вывода определенной категории

/* полотенца категории главная */

function carolinaspa_homekit(){ ?>
<div class="homepage-homekit">
    <div class="content">
    <div class="colums-3">
 <?php $homekit = get_term(16,'product_cat', ARRAY_A) ?> 
 <h2 class="section-title"><?php echo $homekit['name']; ?></h2>
<p><?php echo $homekit['description']; ?></p>
<a href="<?php echo get_category_link($homekit['term_id']); ?>">
All products &raquo;
</a>
</div>
</div>
</div>
<?php } 
add_action('homepage', 'carolinaspa_homekit', 25);

<?php echo $homekit[‘name’]; ?> — выводим имя категории

<?php echo $homekit[‘description’]; ?> — выводим описание категории

<?php echo get_category_link($homekit[‘term_id’]); ?>» – выводим ссылку на продукты категории.

Теперь добавим вторую часть – элементы категории. Для этого воспользуемся шорткодами woocommerce.

Добавим следующий шорткод в том месте, где хотим вывести товары

<?php  echo do_shortcode('[product_category category="polotenza" per_page="3" orderby="prise"]'); ?>

Вот так выглядит код полностью

/* полотенца категории главная */

function carolinaspa_homekit(){ ?>

<div class="homepage-homekit">
    <div class="content">
    <div class="colums-3">
 <?php $homekit = get_term(16,'product_cat', ARRAY_A) ?>
 
 <h2 class="section-title"><?php echo $homekit['name']; ?></h2>
<p><?php echo $homekit['description']; ?></p>
<a href="<?php echo get_category_link($homekit['term_id']); ?>">
All products &raquo;
</a>

</div>
<?php  echo do_shortcode('[product_category category="polotenza" per_page="3" orderby="prise"]'); ?>
</div>
</div>
<?php } 
add_action('homepage', 'carolinaspa_homekit', 25);

Осталось только добавить изменения в style.css, но главную задачу мы выполнили.

В следующей статье добавим новые элементы на главную страницу нашего магазина с помощью плагина Advanced Custom Fields.

Как изменить Woocommerce с помощью дочерей темы. Часть 13 – настройка bootstrap меню и регистрация пользователей