Как изменить Woocommerce с помощью дочерей темы. Часть 5

Теперь, когда мы знаем, как использовать хуки при работе с дочерней темой, можно внести некоторые изменения на главную страницу.

Добавить Google font

Очень часто на сайт нужно добавить новый шрифт. Сделать это очень просто.

Заходим на сайт https://fonts.google.com.

Находим нужный нам шрифт, например lora.

Выбираем нужный нам стиль, размер и так далее.

Переходим на вкладку Embed. Там появилась ссылка на шрифт и его название для css.

Теперь добавим шрифт на сайт.

Переходим в functions.php и пишем следующий код.

/* добавим новый шрифт */

function carolinaspa_scripts(){

  wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap');

}

add_action('wp_enqueue_scripts', 'carolinaspa_scripts');

Подробнее о том, как правильно подключать стили и скрипы в WordPress читайте в этой статье.

Перейдем в файл style.css (дочерней темы) и поменяем шрифт для заголовков h2

h2.section-title{

    font-family: 'Lora', serif;

}

Убрать слово «главная» и вывести баннер

Допустим, вам нужно убрать слово «главная» на вашей главной странице и вывести сверху баннер, например, купон на скидку или какую-либо картинку.

Справа от заголовка нажмем кнопку «редактировать этот блок» или заходим на главную через админпанель.

Удалим весь текст, который там есть (кроме заголовка) и установим изображение страницы.

Обновим и перейдем на страницу. Как видим, появился купон. Осталось убрать слово «Главная».

Воспользуемся плагином Simply Show Hooks (если не знаете как, прочитайте в этой статье).

Как видим, action: homepage, отвечает за отображение контента на главной странице.

Нас интересует storefront_homepage_content с приоритетом 10.

Для того, чтобы убрать название «главная» мы удалим эту функцию в functions.php, а затем добавим свою функцию, которую назовем function carolinaspa_content().

function carolinaspa_content(){

 echo "<div class='main-content'>";

 the_post_thumbnail();  //выведем миниатюру

 echo "</div>";

}

function carolinaspa_coupon(){

remove_action('homepage', 'storefront_homepage_content',10);//удалили action

add_action('homepage', 'carolinaspa_content', 4);//добавили свой с приоритетом 4

add_action('init', 'carolinaspa_coupon');

Смотрим результат