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

Автор: | 20.04.2020

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

Добавить Google font

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

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

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

Добавить Google font

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

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

Добавить Google font

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

Добавить Google font в woocommerce

Переходим в 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;

}

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

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

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

меняем главную страницу woocommerce

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

– меняем главную страницу woocommerce

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

– меняем главную страницу woocommerce

Воспользуемся плагином 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');

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

 меняем главную страницу woocommerce

В следующей статье мы добавим на главную новый раздел из определенной категории.

Как изменить Woocommerce с помощью дочерей темы. Часть 12 — настройка страницы входа в систему
настройка страницы входа в систему

Стандартная страница входа на сайт wordPress выглядит не очень привлекательно. Read more

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

1 × два =