Настройка домашней страницы темы WooCommerce Storefront [Полное руководство]

Опубликовано: 2020-09-22

Руководство по настройке домашней страницы магазина WooCommercer Настройка домашней страницы темы витрины является ключевой для любого интернет-магазина, созданного с использованием темы витрины магазина WooCommerce. Настройка необходима, поскольку хороший дизайн привлекает посетителей в ваш магазин, укрепляет доверие клиентов к вашему бренду и превращает их в постоянных клиентов.

В этом уроке я собираюсь показать некоторые простые настройки домашней страницы, которые вы можете реализовать на домашней странице темы витрины, чтобы сделать ее более привлекательной и улучшить общее взаимодействие с пользователем, что в равной степени полезно для улучшения вашей поисковой оптимизации.

Прежде чем создавать какие-либо настройки темы Storefront, рекомендуется сначала создать дочернюю тему Storefront, чтобы не потерять изменения при обновлении родительской темы. Если вы также хотите внести дополнительные изменения в тему Storefront, вы можете ознакомиться с этим руководством по настройке Storefront, которым я поделился в предыдущем посте.

Настройка домашней страницы Storefront Theme

домашняя страница

Тема WooCommerce Storefront имеет более 200 000 активных установок в сообществе WordPress. На главной странице темы есть 6 разделов:

Содержание страницы
Раздел «Категории товаров»
Раздел рекомендуемых товаров
Раздел последних продуктов
Раздел продуктов с самым высоким рейтингом
Раздел со скидкой
Раздел самых продаваемых товаров

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

Тема Storefront автоматически создает два дополнительных шаблона страниц в дополнение к стандартным страницам WooCommerce. Это Домашняя страница и Полная ширина. Здесь мы просто обсудим, как вы можете настроить шаблон домашней страницы.

Шаблон домашней страницы

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

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

Настроить его очень просто, так как вам просто нужно:

Войдите в админ-панель вашего сайта как администратор .
Создайте новую страницу и добавьте некоторый контент для отображения.
Затем вам нужно будет выбрать « Домашняя страница » из раскрывающегося списка шаблонов в мета-поле « Атрибуты страницы », как показано ниже:
После публикации этой страницы вы можете установить ее в качестве домашней страницы, перейдя в « Настройки », а затем «Чтение» .
Затем вы отметите « Статическая страница », а затем выберите созданную домашнюю страницу из раскрывающегося списка « Домашняя страница ».
После того, как вы сохраните изменения, они автоматически отразятся во внешнем интерфейсе .

После завершения настройки ваша домашняя страница должна иметь несколько разделов, как показано ниже:

домашняя страница

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

После того, как домашняя страница настроена, мы можем перейти к настройке:

1. Удалите изображения категорий товаров с главной страницы.

WooCommerce позволяет отображать продукты, а также категории продуктов с их изображениями на главной странице. Однако, если вы предпочитаете, чтобы категории отображались только в виде текста, вам необходимо добавить эту строку в файл functions.php вашей дочерней темы. Просто добавьте его в конец файла function.php.

remove_action( 'woocommerce_before_subcategory_title', 'woocommerce_subcategory_thumbnail', 10 );

Вот результат: Удалить изображения категорий товаров с главной страницы

2. Измените URL-ссылку в логотипе.

Как правило, темы WordPress ссылаются на домашнюю страницу сайта в логотипе. Это стандартная функция для большинства веб-сайтов, и пользователи ожидают, что они смогут вернуться на домашнюю страницу каждый раз, когда нажимают на логотип.

Однако что, если домашняя страница находится в другом месте? Это означает, что вам нужно настроить URL-адрес, если нам нужна пользовательская ссылка. Чтобы изменить это, нам нужно добавить следующий код в файл functions.php дочерней темы:

 add_action('storefront_header', 'custom_storefront_header', 1);

функция custom_storefront_header () {

    remove_action('storefront_header', 'storefront_site_branding', 20);

    add_action('storefront_header', 'custom_site_branding', 20);

    функция custom_site_branding() {

        // ЗДЕСЬ установите ссылку вашего логотипа или название сайта

        $link = home_url('/my-custom-link/');

        ?>

        <div class="сайт-брендинг">

            <?php

                если ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {

                    $custom_logo_id = get_theme_mod('custom_logo');

                    если ($custom_logo_id) {

                        $custom_logo_attr = array('class' => 'custom-logo', 'itemrop' => 'logo' );

                        $image_alt = get_post_meta($custom_logo_id, '_wp_attachment_image_alt', true);

                        если (пусто($image_alt)) {

                            $custom_logo_attr['alt'] = get_bloginfo('name', 'display');

                        }

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',

                            esc_url($ссылка),

                            wp_get_attachment_image($custom_logo_id, 'полный', false, $custom_logo_attr)

                        );

                    }

                    иначе если ( is_customize_preview() ) {

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" style="display:none;"><img class="custom-logo"/></a>' , esc_url($ссылка));

                    }

                    $html = is_front_page() ? '<h1 class="логотип">' . $ логотип . '</h1>' : $логотип;

                } elseif ( function_exists( 'jetpack_has_site_logo' ) && jetpack_has_site_logo() ) {

                    $logo = site_logo()->логотип;

                    $logo_id = get_theme_mod('пользовательский_логотип');

                    $logo_id = $logo_id ? $logo_id : $logo['id'];

                    $size = site_logo()->theme_size();

                    $html = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',

                        esc_url($ссылка),

                        wp_get_attachment_image($logo_id, $size, ложь, массив(

                            'class' => 'приложение-логотип сайта-' . $размер,

                            'размер данных' => $размер,

                            'itemrop' => 'логотип'

                        ))

                    );

                    $html = apply_filters('jetpack_the_site_logo', $html, $logo, $size);

                } еще {

                    $тег = is_front_page() ? 'h1' : 'дел';




                    $html = '<' . esc_attr($тег). ' class="beta site-title"><a href="' .esc_url($link) . '" rel="home">' . esc_html(get_bloginfo('имя')). '</a></' . esc_attr($tag).'>';




                    если ( '' !== get_bloginfo( 'описание' )) {

                        $html .= '<p class="site-description">' . esc_html(get_bloginfo('описание', 'отображение')). '</p>';

                    }

                }

                эхо $html;

            ?>

        </div>

        <?php

    }

}

Пользовательская ссылка идет в строке 7 '( '/my-custom-link/');' , где вы добавите свою пользовательскую ссылку, заменив ее на « my-custom-link ».

3. Полностью удалите категории с главной страницы магазина.

Возможно, вы захотите полностью удалить категории на главной странице. Эта функция просто удаляет категории. Все, что вам нужно сделать, это добавить следующие строки в файл functions.php:

 функция storefront_child_reorder_homepage_contant() {

remove_action('домашняя страница', 'storefront_product_categories', 20 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Вот результат: Полностью удалить категории с главной страницы магазина

4. Удалите недавние продукты с домашней страницы вашего магазина.

Сразу же после добавления нового продукта он добавляется в раздел «Новинки » на главной странице. Это настройка по умолчанию в теме Storefront. Однако, если вы постоянно добавляете товары в свой список, они могут загромождать страницу магазина. Кроме того, вы также можете отобразить дополнительную информацию в этом разделе.

Чтобы удалить этот раздел, просто добавьте следующий код в файл function.php дочерней темы.

 функция storefront_child_reorder_homepage_contant() {

remove_action('домашняя страница', 'storefront_recent_products', 30 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Вот результат: Удалить последние продукты с домашней страницы вашего магазина

5. Удалите самые продаваемые товары с главной страницы магазина.

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

 функция storefront_child_reorder_homepage_contant() {

remove_action('домашняя страница', 'storefront_best_selling_products', 70 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Вот результат: Удалить самые продаваемые товары с главной страницы магазина

6. Удалите рекомендуемые продукты

Точно так же владельцы магазинов могут захотеть отключить раздел рекомендуемых товаров. Это можно сделать, добавив следующий фрагмент кода в файл functions.php дочерней темы:

 функция storefront_child_reorder_homepage_contant() {

remove_action('домашняя страница', 'storefront_featured_products', 40 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Вот результат: Удалить рекомендуемые продукты

7. Как изменить цвет горизонтальных линий на главной странице витрины

Просто добавьте следующий код в файл custom.css вашей дочерней темы:

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

цвет границы: красный;

}

8. Добавление фонового изображения на витрину определенного раздела домашней страницы

Тема Storefront по умолчанию имеет шесть разделов, а именно: категории продуктов, последние продукты, рекомендуемые продукты, популярные продукты, товары со скидкой и самые продаваемые продукты. Просто добавьте следующий код в файл style.css :

 .storefront-представленные-продукты{

background-image: url (добавьте сюда свой URL);

фоновая позиция: по центру по центру;

фоновый повтор: без повтора;

размер фона: обложка;

-o-background-size: обложка;

}

Вот результат:

9. Добавление цвета фона в разделы главной страницы витрины

Возможно, вы захотите добавить цвет фона в раздел домашней страницы. Для этого вам нужно сначала определить раздел, в который вы хотите добавить цвет. Это легко сделать, добавив следующий код в файл style.css :

 .storefront-представленные-продукты{

цвет фона:#FFEB3B;

}

Вот результат: Добавление цвета фона в разделы главной страницы магазина

10. Как удалить или скрыть заголовок раздела на главной странице

Для этого вам нужно сначала определить раздел, который вы хотите удалить или скрыть. Это можно сделать, добавив следующий код в файл style.css :

 .storefront-recent-products .section-title {display:none;}

.storefront-product-categories .section-title {display:none;}

.storefront-featured-products .section-title {display:none;}

.storefront-popular-products .section-title {display:none;}

.storefront-on-sale-products .section-title {display:none;}

.storefront-bestselling-products .section-title {display:none;}

Вот результат: Как удалить или скрыть заголовок раздела на главной странице

11. Как изменить заголовок раздела главной страницы

Для этого вам нужно сначала определить раздел, в котором вы хотите удалить заголовок. Этот список поможет вам определить фильтры раздела главной страницы магазина:

storefront_product_categories_args
storefront_recent_products_args
storefront_featured_products_args
storefront_popular_products_args
storefront_on_sale_products_args
storefront_best_selling_products_args

Просто добавьте следующий код в файл function.php дочерней темы:

 add_filter('storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Название рекомендуемых товаров на главной странице

функция custom_storefront_product_featured_title( $args ) {

$args['title'] = __('Здесь заголовки новых рекомендуемых товаров', 'витрина');

вернуть $аргументы;

}

Вот результат: Как изменить заголовок раздела главной страницы

12. Как увеличить сетку / столбец столбца продукта на главной странице

Просто добавьте следующие строки кода в файл function.php дочерней темы.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );




// Столбец рекомендуемых рекомендуемых товаров

функция custom_storefront_featured_product_per_row( $args ) {

$args['столбцы'] = 2;

вернуть $аргументы;

}

Вот результат: Как увеличить сетку / столбец столбца продукта раздела главной страницы

13. Как отобразить больше категорий на главной странице

Просто добавьте следующие строки кода в файл function.php дочерней темы.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// Категория Товары

функция custom_storefront_category_per_page($args) {

$args['число'] = 4;

вернуть $аргументы;

}

Вот результат: Как отобразить больше категорий на главной странице

14. Как добавить описание под заголовком раздела главной страницы

Просто добавьте этот код в файл function.php дочерней темы:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');




функция custom_storefront_product_featured_description(){ ?>

<p class="element-title--sub">

<?php echo "Здесь описание раздела";?>

</p>

<?php }

Вот результат: Как добавить описание под заголовком раздела главной страницы

15. Как удалить раздел товаров с самым высоким рейтингом с главной страницы витрины

Есть два способа сделать это. Один устанавливает плагин, который поможет вам удалить этот раздел. Вы можете взглянуть на плагин Homepage Control . Мы рассмотрим более простой способ сделать это с помощью кода.

Однако вы можете просто удалить раздел с помощью хуков. Это делается простым добавлением следующей строки в файл function.php дочерней темы:

remove_action( 'homepage', 'storefront_popular_products', 50 );

Кроме того, вы можете удалить его, добавив следующий код в файл style.css или в раздел « Дополнительные CSS »:

.storefront-popular-products .section-title {display:none;}

Вот результат: Как удалить раздел продуктов с самым высоким рейтингом с главной страницы витрины

16. Как изменить название раздела товаров с самым высоким рейтингом

Просто добавьте этот код в файл function.php дочерней темы:

 add_filter('storefront_popular_products_args', 'custom_storefront_product_popular_title');

// Название рекомендуемых товаров на главной странице

функция custom_storefront_product_popular_title( $args ) {

$args['title'] = __('Лучшие товары', 'витрина');

вернуть $аргументы;

}

Вот результат: Как изменить название раздела продуктов с самым высоким рейтингом: настройка домашней страницы темы Storefront

17. Как отобразить больше продуктов в разделе с самым высоким рейтингом

По умолчанию Storefront отображает 4 продукта в разделе с самым высоким рейтингом. В этом примере мы увеличим его до 12 продуктов. Просто добавьте этот код в файл function.php дочерней темы:

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page');




// Рекомендуемые рекомендуемые товары на странице

функция custom_storefront_top_product_per_page($args) {

$args['per_page'] = 12;

вернуть $аргументы;

}

Вот результат:

Как отобразить больше продуктов в разделе с самым высоким рейтингом : Настройка домашней страницы темы Storefront

18. Как удалить раздел «Продукты со скидкой» с главной страницы магазина

Есть два способа сделать это. Один устанавливает плагин, который поможет вам удалить этот раздел. Вы можете взглянуть на плагин Homepage Control . В этом примере я буду использовать одну строку кода.

Вы можете просто удалить раздел, используя хуки. Это делается простым добавлением следующей строки в файл function.php дочерней темы:

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

Вот результат: Как удалить раздел «Продукты со скидкой» с домашней страницы Storefront Настройка домашней страницы темы Storefront

19. Ссылки на хуки действий для настройки домашней страницы темы Storefront

Это все доступные функции add_action(), используемые в теме Storefront. Он прикрепляет функцию к хуку, как определено do_action

Заголовок

Домашняя страница
storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

Категории товаров

storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

Последние продукты

storefront_homepage_before_recent_products – Executed before the <section class="storefront-recent-products"> homepage section
storefront_homepage_after_recent_products_title – Executed after the <h2 class="section-title"> recent products section title
storefront_homepage_after_recent_products – Executed after the <section class="storefront-recent-products"> homepage section

Рекомендуемые продукты

storefront_homepage_before_featured_products – Executed before the <section class="storefront-featured-products"> homepage section
storefront_homepage_after_featured_products_title – Executed after the <h2 class="section-title"> featured products section title
storefront_homepage_after_featured_products – Executed after the <section class="storefront-featured-products"> homepage section

Самые продаваемые продукты

storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

Функции витрины

Файл: /inc/storefront-functions.php

storefront_header_styles – filter the header styles
storefront_homepage_content_styles – filter the homepage content styles
Классы витрины

Вывод

В этой статье я выделил 18 различных идей настройки домашней страницы темы Storefront, которые вы можете сделать для домашней страницы темы WooCommerce Storefront. Эти настройки были протестированы, и они работают, как показано на скриншотах.

Если вы новичок в WordPress и не знаете, где найти файл functions.php, просто выполните следующие простые действия:

Войдите на свой сайт WordPress и получите доступ к панели инструментов в качестве пользователя-администратора.
В меню «Панель инструментов» нажмите « Меню внешнего вида» > «Меню редактора тем». Когда откроется страница Theme Editor , найдите файл функций темы, в который мы добавим функцию.

Это так просто. Из этой статьи о настройке домашней страницы темы Storefront вы можете увидеть, насколько гибка тема Storefront, и вы можете использовать фильтры и крючки для настройки, которую вы хотите. Для дополнительного стиля вы можете использовать раздел «Дополнительные CSS» или файл style.css, где вы будете вводить код CSS.