Более 80 хитростей по настройке темы Storefront WooCommerce : Полное руководство по настройке темы Storefront

Опубликовано: 2022-01-04

настройка темы витрины магазина woocommerce Ищете способ настроить тему витрины магазина WooCommerce? В этой статье есть более 80 различных приемов, которые вы можете использовать для настройки темы WooCommerce Storefront. Настройка темы WooCommerce Storefront должна быть легкой после прочтения этого руководства.

WooCommerce Storefront — простая и мощная бесплатная тема. Эта тема предоставляет вам большой контроль над вашим магазином с точки зрения представления продукта и доступа пользователей. Это бесплатно и предлагает вам множество вариантов настройки с помощью дочерних тем.

Прежде чем мы изучим все приемы настройки темы WooCommerce Storefront, давайте сначала познакомимся с основами. Кроме того, будет подробное руководство по установке и настройке темы WooCommerce Storefront.

Витрина WooCommerce Тема

Магазин

У вас есть проект WooCommerce? Если да, то Storefront — лучшая тема электронной коммерции, созданная для элегантной работы с WooCommerce.

Эта тема была разработана разработчиками WooCommerce Core с чистым и минималистичным дизайном, открытым для любой настройки.

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

- Элегантный дизайн.
- Отзывчивый макет.
- SEO-дружественная разметка.
- Пользовательские шаблоны страниц.
- Бесплатно.
- Лицензия GPL.
- Перевод готов для других языков.

Как установить и настроить тему WooCommerce Storefront

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

После установки вы можете активировать тему с помощью кнопки « Активировать ».

Установка витрины

Кроме того, вы можете посетить wordpress.org, чтобы загрузить последнюю версию Storefront. Затем вы можете загрузить извлеченную папку в каталог тем на вашем сервере через FTP. После этого вам нужно активировать тему, перейдя в « Внешний вид», затем « Темы ».

Шаблоны страниц

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

Шаблон главной страницы.

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

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

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

После публикации этой страницы вы можете установить ее в качестве домашней страницы, перейдя в « Настройки », а затем «Чтение».

Затем вы отметите «Статическая страница», а затем выберите созданную домашнюю страницу в раскрывающемся списке «Главная страница». После того, как вы сохраните изменения, они автоматически отразятся на интерфейсе.

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

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

Отображение домашней страницы

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

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

Полная ширина в корзине и при оформлении заказа

Полная ширина — это другой шаблон, который охватывает всю страницу без боковых панелей, что является рекомендуемым вариантом для вашей корзины и страниц оформления заказа. Это можно сделать, перейдя на страницы корзины и оформления заказа и выбрав «Полная ширина» в раскрывающемся списке в разделе «Атрибуты страницы».

Настройка шаблона полной ширины

Настройка меню

На витрине магазина по умолчанию организованы пункты меню, которые являются первичными и вторичными. Основное меню отображается сразу под логотипом сайта. WooCommerce отображает все ваши страницы как «основное меню», если вы не установили конкретное основное меню.

Дополнительное меню находится рядом с логотипом, рядом с окном поиска. Однако это вторичное меню появится только в том случае, если вы назначите меню.

Отображение меню

Создание нового меню и добавление страниц

Это можно сделать, перейдя в « Внешний вид », затем « Меню » в панели администратора. С левой стороны вы увидите заголовок под названием «страницы». Нажмите кнопку «Просмотреть все», чтобы получить список всех опубликованных вами страниц.

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

Создание меню

Размещение виджетов

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

Итак, теперь, когда вы знаете об основах установки и настройки темы WooCommerce Storefront, давайте рассмотрим различные приемы, которые вы можете использовать для настройки этой темы.

1. Создание дочерней темы

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

Зачем нам создавать дочернюю тему? Это связано с тем, что ядро Storefront постоянно обновляется, и это может поставить под угрозу все ваши усилия по настройке. Это означает, что вы можете безопасно обновить Storefront, не потеряв нашу работу.

Лучший способ создать дочернюю тему — загрузить плагин Child Theme Configurator и активировать его. Следуйте указаниям мастера, чтобы создать свою первую дочернюю тему.

2. Добавьте логотип в свой магазин

Это можно сделать с помощью настройщика тем, который находится на панели инструментов в разделе « Темы », а затем « Настроить». Выберите опцию «Идентификация сайта», чтобы добавить логотип, загрузив изображение. Рекомендуемый размер для любой темы Storefront — 470 на 110 пикселей. Затем вы сохраните изменения, нажав «Опубликовать».

3. Настройте размер заголовка

Здесь мы снова воспользуемся настройщиком тем, но напишем код CSS в разделе «Дополнительные CSS».

Добавьте следующий код:

 * Заголовок */
#masthead.site-header {
   высота: 155px!важно;
   нижняя граница: 0px
}
/* Мобильный CSS для шапки */
Только экран @media и (максимальная ширина: 320 пикселей) {
   #masthead.site-header {
   высота: 80px!важно;
   нижняя граница: 0px;
}
}
/* Главное меню */
.storefront-primary-navigation a, .cart-contents a {
   поле:0 0 0 0;
}
.main-navigation ул {
   padding:0 0 10px 4px!важно;
}
.main-navigation li {
   высота: 38 пикселей! важно;}
/* Мобильный CSS для главного меню */
Только экран @media и (максимальная ширина: 320 пикселей) {
.main-navigation ул {
   background:#D6DDE4!важно;
}
}
/* Область заголовка */
.Заголовок сайта {
обивка сверху: 0,5 см;
}
.site-header .custom-logo-link img, .site-header .site-logo-anchor img, .site-header .site-logo-link img {
нижняя граница: -45px;
}

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

Настроить размер заголовка

4. Убираем строку поиска из шапки темы

Добавьте этот код в раздел «Дополнительные CSS».

 .сайт-заголовок .widget_product_search
дисплей: нет;
}

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

Убрать строку поиска из шапки темы

5. Создайте отдельное выпадающее меню для мобильных устройств.

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

Перейдите в « Внешний вид », затем « Настроить », а затем выберите «Меню», где мы можем создать собственный дизайн меню, выбрав «Портативное меню» для небольших экранов.

Создайте отдельное выпадающее меню для мобильных устройств

6. Отключите отзывы клиентов

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

Однако отзывы клиентов могут относиться не ко всем видам магазинов электронной коммерции. Чтобы отключить отзывы клиентов, перейдите в настройки WooCommerce и перейдите на вкладку «Продукты». Внизу страницы вы найдете раздел «отзывы», где вы можете обновить отзывы по своему усмотрению.

Отключить отзывы клиентов

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

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

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

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

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

8. Измените цвет меню заголовка

Настройщик позволяет нам настроить заголовок с цветами, которые вы хотите. Это можно сделать, перейдя в « Настроить », затем « Заголовок » и выбрав нужный цвет.

Однако этот параметр окрашивает всю область заголовка, включая панель поиска, раздел входа и логотип. Чтобы получить другой фон меню заголовка, просто добавьте следующий фрагмент кода на панель « Дополнительные CSS ».

 .storefront-основная-навигация,
.main-navigation ul.menu ul.sub-menu{
цвет фона: # f0f0f0;
}

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

8. Измените цвет меню заголовка

9. Скрыть основную панель навигации

Storefront Theme по умолчанию отображает все страницы в виде меню. Если вы хотите скрыть основную панель навигации, удаления меню недостаточно. Просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 .storefront-основная-навигация {
дисплей: нет;
}

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

Скрыть основную панель навигации

10. Скрыть название товара на странице магазина

Чтобы скрыть название продукта на странице магазина, просто перейдите в раздел « Настроить », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 h2.woocommerce-loop-product__title {
отображение: нет !важно;
}

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

Скрыть название товара на странице магазина

11. Убираем пустое место из шапки

Просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 .сайт-брендинг {
нижняя граница: 0px;
}

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

Убрать пустое место из шапки

12. Увеличьте ширину строки поиска

Что бы вы сделали, если бы захотели увеличить ширину панели поиска? В разделе «Дополнительные CSS» добавьте следующие строки:

 .woocommerce-active .site-header .site-search {
ширина: 44,739%;
}
#masthead .site-search .widget_product_search input[type="search"] {
ширина: 700px !важно;
}

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

Увеличить ширину строки поиска

13. Удалите пробел между заголовком и меню

 .Заголовок сайта {
высота: 77 пикселей;
}
.col-полный {
верх: -84px;
}
Только экран @media и (максимальная ширина: 640 пикселей) {
.Заголовок сайта {
высота: авто;
}
.col-полный {
сверху: 0;
}
}

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

Убрать пробел между заголовком и меню

14. Добавление дополнительного текста на страницу регистрации WooCommerce

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

 add_action('bp_signup_profile_fields', function() {
// Начать редактирование ниже.
?>
<p class="notice-check-inbox">
Пожалуйста, не забудьте проверить свою электронную почту и подтвердить регистрацию на
<strong>Ваучер на скидку 10 %</strong>!
</p>
<?php
// Завершить редактирование.
});

15. Удалите хлебные крошки в теме Storefront

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

Панировочные сухари

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

 add_filter('woocommerce_get_breadcrumb', '__return_false');

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

Удалить хлебные крошки в теме Storefront

16. Измените 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».

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

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

 функция storefront_child_reorder_homepage_contant() {
remove_action('домашняя страница', 'storefront_product_categories', 20 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

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

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

18. Удалить изображение товара из корзины и мини-корзины

Для этого просто добавьте следующий код в файл functions.php вашей дочерней темы:

 add_filter('woocommerce_cart_item_thumbnail', '__return_false');

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

Удалить изображение товара из корзины и мини-корзины

19. Последние товары со страницы нашего магазина

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

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

 функция storefront_child_reorder_homepage_contant() {
remove_action('домашняя страница', 'storefront_recent_products', 30 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

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

Последние товары со страницы нашего магазина

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

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

 функция storefront_child_reorder_homepage_contant() {
remove_action('домашняя страница', 'storefront_best_selling_products', 70 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

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

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

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

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

 функция storefront_child_reorder_homepage_contant() {
remove_action('домашняя страница', 'storefront_featured_products', 40 );
}
add_action('init', 'storefront_child_reorder_homepage_contant');

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

Удалить избранные товары

22. Интегрируйте липкую кнопку «Добавить в корзину».

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

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

Это можно сделать с помощью плагина Sticky add to cart для WooCommerce. Просто установите его и активируйте, чтобы пользоваться липкими кнопками «Добавить в корзину» на всех страницах вашего продукта.

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

Интегрируйте липкую кнопку «Добавить в корзину»

23. Добавьте выпадающий список городов на странице оформления заказа.

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

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

 add_filter('woocommerce_default_address_fields', 'override_checkout_city_fields', 10, 1);
функция override_checkout_city_fields($fields) {
// Определяем здесь в массиве желаемые города (Вот пример городов)
$option_cities = массив(
'' => __('Выберите свой город'),
'а' => 'а',

);

$fields['город']['тип'] = 'выбрать';
$fields['город']['опции'] = $option_cities;

вернуть $поля;
}

Если вы посмотрите на пятую строку кода, вы можете определить наш список городов. Первая часть кода 'a' => — это идентификатор города, который не может содержать пробелы или пустые символы. Просто напишите название города именно так, как вы хотите.

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

Добавить выпадающий список городов на странице оформления заказа

24. Скройте кнопки «плюс» и «минус» с количеством товара на странице товара.

Чтобы вы могли скрыть текстовое поле с кнопками «плюс» и «минус» для увеличения или уменьшения количества товара, все, что вам нужно сделать, это добавить следующий код CSS в раздел « Дополнительные CSS »:

 .количество {
отображение: нет !важно;
}

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

Скрыть кнопки плюс и минус количества товара на странице товара

25. Скрыть кнопку «Добавить в корзину» на странице товара

Для этого просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 .single_add_to_cart_button {
отображение: нет !важно;
}

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

26. Удалите кредит темы Storefront из нижнего колонтитула.

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

 add_action('init', 'custom_remove_footer_credit', 10);
функция custom_remove_footer_credit () {
remove_action('storefront_footer', 'storefront_credit', 20);
add_action('storefront_footer', 'custom_storefront_credit', 20);
}
функция custom_storefront_credit() {
?>
<div class="Информация о сайте">
&копировать; <?php эхо get_bloginfo('имя') . ' ' . get_the_date('Г'); ?>
</div><!-- .site-info -->
<?php
}

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

Удалить ссылку на тему Storefront из нижнего колонтитула

27. Измените цвет и размер шрифта раздела виджета витрины.

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

 .виджет-область .виджет {
цвет: зеленый;
размер шрифта: 1em;
}

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

Изменить цвет и размер шрифта раздела виджета витрины

28. Покажите значок «Распродажа» на витрине магазина на изображении товара.

Версия темы WooCommerce Storefront по умолчанию позволяет вам определить распродажу или цену со скидкой для определенного продукта. Однако, если вы хотите добавить значок «Распродажа» на изображение продукта, просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 ul.products li.product .onsale {
положение: абсолютное;
верх: 137 пикселей;
справа: 62 пикселя;
}

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

Показывать значок Storefront «Распродажа» на изображении товара

29. Измените цвет значка «Распродажа».

Чтобы изменить цвет значка «Распродажа», просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 .в продаже {
цвет фона: #FFFFFF;
цвет границы: зеленый;
цвет: зеленый;
}

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

Изменить цвет значка «Распродажа»

30. Изменить цвет поля «плюс-минус» количества

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

 .количество .кол-во {
цвет: #000;
цвет фона: #f5df72;
}

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

Изменить цвет поля «плюс-минус» количества

31. Как изменить цвет фона шапки Витрины

Настройщик WordPress позволяет нам изменить цвет фона заголовка темы Storefront. Для этого просто перейдите в раздел « Настроить », а затем в « Заголовок »:

Как изменить цвет фона шапки витрины

32. Измените цвет фона корзины в шапке.

При изменении цвета заголовка раскрывающийся список миникорзины наследует этот цвет. Однако вы можете изменить это, используя следующие правила CSS для дополнительной видимости. Просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 woocommerce.widget_shopping_cart {
фон: белый;
радиус границы: 12px;
}

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

Изменить цвет фона корзины в шапке

33. Добавьте изображение в нижний колонтитул витрины с помощью CSS ниже Copyright

Если вы хотите добавить свой собственный логотип, принятые платежи или значок партнера под текстом об авторских правах, просто перейдите в « Слои », « Настроить » и нажмите « Нижний колонтитул ».

Нажмите « Настройка », чтобы развернуть панель, и нажмите « Выбрать изображение» в фоновом режиме.

Выберите нужное изображение и добавьте его .

Выберите No Repeat и Bottom или расположите его вручную по желанию.

Вернитесь к Customizer и щелкните CSS , чтобы развернуть панель. Тем не менее, вы должны убедиться, что проценты соответствуют вашим спецификациям. Затем добавьте следующие строки:

 .сайт-информация: после {
содержание: '';
фоновое изображение: URL-адрес (добавьте свой собственный URL-адрес);
дисплей: блок;
ширина: 100 пикселей;
высота: 100 пикселей;
поле: 0 авто;
}

34. Как убрать пробел в футере

Просто перейдите в раздел « Настроить », затем в раздел « Дополнительные CSS » и добавьте следующую строку:

 .footer-widgets { padding-top: 0; }

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

Как убрать пробел в футере

35. Как убрать шапку, но сохранить меню

 #заголовок &gt; .col-полный,
#masthead .site-header-cart {
дисплей: нет;
}

36. Как убрать подчеркивание с гиперссылок

По умолчанию тема Storefront подчеркивает ссылки, и если вы хотите удалить их, просто перейдите в раздел « Настройка », затем в раздел « Дополнительные CSS » и добавьте следующие строки:

 а {
украшение текста: нет !важно;
}

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

Как убрать подчеркивание в гиперссылках

37. Как удалить избранные изображения в сообщениях в теме WooCommerce Storefront

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

 remove_action('storefront_post_content_before', 'storefront_post_thumbnail', 10);

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

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

 .page-template-template-homepage .hentry .entry-header,
.page-template-template-homepage .hentry,
.page-template-template-homepage .storefront-product-section {
цвет границы: красный;
}

39. Как настроить значок Storefront WooCommerce при распродаже

Просто добавьте следующий код в раздел «Дополнительные CSS»:

 .в продаже {
цвет фона: #FFFFFF;
цвет границы: #FF0000;
цвет: #FF0000;
}

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

Как настроить значок Storefront WooCommerce в продаже

40. Как изменить размер логотипа, вторичной навигации и панели поиска

Чтобы изменить их все сразу, просто добавьте следующий код в раздел «Дополнительные CSS»:

 Экран @media и (минимальная ширина: 768 пикселей) {
/* ЛОГОТИП */
.site-header .site-branding, .site-header .site-logo-anchor, .site-header .site-logo-link { ширина: 30% !важно; /* Используйте значения пикселей, если хотите, например. 350 пикселей */ }

/* ВТОРИЧНАЯ НАВИГАЦИЯ */
.site-header .secondary-navigation { ширина: 40% !важно; /* Используйте значения пикселей, если хотите, например. 350 пикселей */ }

/* ПАНЕЛЬ ПОИСКА */
.site-header .site-search { ширина: 30% !важно; /* Используйте значения пикселей, если хотите, например. 350 пикселей */ }

41. Как убрать боковую панель на страницах продуктов WooCommerce, чтобы она стала полной.

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

 add_action('get_header', 'remove_storefront_sidebar');
если (is_product()) {
remove_action('storefront_sidebar', 'storefront_get_sidebar', 10);
}
}
Добавьте эту строку в раздел «Дополнительные CSS»:
body.woocommerce #primary { ширина: 100%; }

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

Как убрать боковую панель на страницах продуктов WooCommerce, чтобы она стала полной

42. Как добавить изображение или иконку в пункты меню.

Для этого просто установите и активируйте плагин Menu Image, Icons made easy и добавьте свои значки по желанию. Просто добавьте нужные размеры в разные поля меню.

Вот визуальное описание:

43. Как добавить верхнюю панель на Витрину

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

 /**
* Добавляет верхнюю панель на витрину перед заголовком.
*/
функция storefront_add_topbar() {
?>
<div ID="верхняя панель">
<div class="кол-полный">
<p>Добро пожаловать в тестовый WooStore</p>
</div>
</div>
<?php
}
add_action('storefront_before_header', 'storefront_add_topbar');

Затем добавьте этот CSS в раздел «Дополнительные CSS» вашего настройщика:

 #верхняя панель {
цвет фона: #1F1F20;
высота: 40 пикселей;
высота строки: 40px;
}

#верхняя панель р {
цвет: #fff;
}

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

Как добавить верхнюю панель на Storefront

44. Как добавить собственное сообщение на верхнюю панель

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

 /**
* Добавляет верхнюю панель на витрину перед заголовком.
*/
функция storefront_add_topbar() {
глобальный $current_user;
get_currentuserinfo();

если (! пусто($current_user->user_firstname)) {
$user = $current_user->user_firstname;
} еще {
$user = __('гость', 'витрина-ребенок');
}

?>
<div ID="верхняя панель">
<div class="кол-полный">
<p>Добро пожаловать <?php echo $user ?>!</p>
</div>
</div>
<?php
}
add_action('storefront_before_header', 'storefront_add_topbar');

Как добавить собственное сообщение на верхнюю панель

45. Как сделать Meta Slider на всю ширину с помощью Storefront

Мета-слайдеры очень популярны на многих сайтах WordPress. Добавьте этот фрагмент кода, чтобы растянуть ползунок на всю ширину. Добавьте его в дочернюю тему, растянув ползунок на всю ширину:

 add_action('init', 'child_theme_init');
функция child_theme_init() {
add_action('storefront_before_content', 'woa_add_full_slider', 5);
}
функция woa_add_full_slider() { ?>
<div ID="слайдер">
<?php echo do_shortcode("[metaslider id=388 процентширина=100]"); ?>
</div>
<?php
}

Однако для этого вы можете использовать плагин, и хорошим примером является плагин WooSlider .

46. Как добавить дополнительные шрифты Google на витрину

Это очень просто, и вам просто нужно загрузить и активировать плагин Easy Google Fonts . Более 300 000 пользователей в сообществе WordPress доверяют этому хорошему шрифтовому плагину.

Легкие шрифты Google

47. Как убрать строку поиска из шапки

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

 add_action('init', 'jk_remove_storefront_header_search');
функция jk_remove_storefront_header_search() {
remove_action('storefront_header', 'storefront_product_search', 40);
}

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

Как убрать строку поиска из шапки

48. Как скрыть заголовки страниц в витрине

Если вы хотите скрыть заголовки страниц, вам необходимо установить и активировать плагин Title Toggle for Storefront Theme , который доступен в сообществе wordpress.org. Этому плагину доверяют более 10 000 пользователей.

Переключатель заголовка для темы Storefront

49. Как убрать надпись «Designed by WooThemes» в нижнем колонтитуле Storefront

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

 add_action('init', 'custom_remove_footer_credit', 10);
функция custom_remove_footer_credit () {
remove_action('storefront_footer', 'storefront_credit', 20);
add_action('storefront_footer', 'custom_storefront_credit', 20);
}
функция custom_storefront_credit() {
?>
<div class="Информация о сайте">
&копировать; <?php эхо get_bloginfo('имя') . ' ' . get_the_date('Г'); ?>
</div><!-- .site-info -->
<?php
}

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

Как удалить «создано WooThemes» в нижнем колонтитуле Storefront

50. Как добавить значки Font Awesome в меню витрины

Это можно сделать с помощью плагина Font Awesome 4 Menus , доступного в сообществе wordpress.org. Этому плагину доверяют более 50 000 пользователей.

Font Awesome 4 Меню

51. Как переименовать «Навигацию» в мобильной версии Storefront

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

 функция storefront_primary_navigation() {
?>
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle"><?php _e('Редактировать название меню', 'витрина'); ?></кнопка>
<?php wp_nav_menu(массив('theme_location' => 'основной')); ?>
</nav><!-- #сайт-навигация -->
<?php
}

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

Как переименовать «Навигацию» в мобильной версии Storefront

52. Как добавить аватар покупателя на витрине «Моя учетная запись»

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

/**
* Распечатайте аватар клиента на странице «Моя учетная запись» после приветственного сообщения.
*/
функция storefront_myaccount_customer_avatar() {
$current_user = wp_get_current_user();

эхо '<div class="myaccount_avatar">' . get_avatar($current_user->user_email, 72, '', $current_user->display_name). '</дел>';
}
add_action('woocommerce_before_my_account', 'storefront_myaccount_customer_avatar', 5);
Затем добавьте следующие правила команд CSS в раздел «Дополнительные CSS»:
.myaccount_avatar {
граница справа: 1px сплошной rgba (0, 0, 0, 0,1);
плыть налево;
отступ справа: 10px;
ширина: 83 пикселя;
}

.myaccount_user {
граница слева: 3px сплошная #787E87;
поплавок: справа;
отступ слева: 10px;
ширина: 88%;
}

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

Как добавить аватар покупателя на витрине «Моя учетная запись»

53. Как изменить высоту нижнего колонтитула магазина WooCommerce

Изменить высоту нижнего колонтитула WooCommerce Storefront очень просто, добавив следующий код CSS в раздел « Дополнительные CSS »:

 section.footer-виджеты {
отступы сверху: 25px;
}

div.сайт-информация {
padding-top: 16px;
нижний отступ: 25px;
}

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

Как изменить высоту нижнего колонтитула магазина WooCommerce

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

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

 .storefront-представленные-продукты{
background-image: url (добавьте сюда свой URL);
фоновая позиция: по центру по центру;
фоновый повтор: без повтора;
размер фона: обложка;
-o-background-size: обложка;
}

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

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

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

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

 .storefront-представленные-продукты{
цвет фона:#FFEB3B;
}

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

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

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

Для этого вам нужно сначала определить раздел, который вы хотите удалить или скрыть. Это можно сделать, добавив следующий код в раздел « Дополнительные 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;}

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

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

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

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

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'] = __('Здесь заголовки новых рекомендуемых товаров', 'витрина');
вернуть $аргументы;
}

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

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

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

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

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_page' );
// Рекомендуемые рекомендуемые товары на странице
функция custom_storefront_featured_product_per_page( $args ) {
$args['per_page'] = 10;
вернуть $аргументы;
}

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

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

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );

// Столбец рекомендуемых рекомендуемых товаров
функция custom_storefront_featured_product_per_row( $args ) {
$args['столбцы'] = 2;
вернуть $аргументы;
}

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

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

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

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

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );

// Категория Товары
функция custom_storefront_category_per_page($args) {
$args['число'] = 10;
вернуть $аргументы;
}

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

Просто добавьте этот код в файл 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 }

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

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

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

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

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

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

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

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

 add_filter('storefront_popular_products_args', 'custom_storefront_product_popular_title');
// Название рекомендуемых товаров на главной странице
функция custom_storefront_product_popular_title( $args ) {
$args['title'] = __('Лучшие товары', 'витрина');
вернуть $аргументы;
}

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

По умолчанию для Storefront отображаются 4 продукта в разделе с самым высоким рейтингом. В этом примере мы увеличим его до 15 продуктов. Просто добавьте этот код в файл 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;
вернуть $аргументы;
}

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

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

66. Как изменить цвет фона распродажных товаров

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

 .storefront-on-sale-products{
цвет фона:#FFEB3B;
}

67. Как настроить кнопки

Кнопки можно изменить с помощью Customizer . Перейдите к «Внешнему виду», затем «Настроить». Нажмите «Кнопки», затем настройте его в соответствии с вашими требованиями.

Вот пример:

68. Как добавить пользовательские ссылки в футере Storefront

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

 add_filter('storefront_credit_links_output', функция($default_links) {
$ вывод = [
спринтф(
'<a href="%s">%s</a>', get_home_url(), 'Добавить сюда пользовательские ссылки'

),

$default_links
];
возврат взорваться(
' <span role="separator" aria-hidden="true"></span> ', $output
);
});

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

Как добавить настраиваемые ссылки нижнего колонтитула Storefront

69. Отрывок из блога Storefront show об архивах

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

 add_action('инициализация', функция() {
remove_action('storefront_loop_post', 'storefront_post_content', 30);
add_action('storefront_loop_post', function() {
echo '<div class="entry-content" itemprop="articleBody">';
если( has_post_thumbnail() ) {
the_post_thumbnail('большой', ['itemprop' => 'изображение']);
}
the_excerpt();
эхо '</div>';
}, 30);
});

70. Как добавить собственный тег Metaviewport

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

 add_filter('wpex_meta_viewport', функция() {
return '<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1" />';
});

71. Как убрать уведомление о рекомендуемых плагинах

Некоторых могут беспокоить уведомления о плагинах, и их очень легко удалить. Просто добавьте эти строки кода в файл function.php дочерней темы:

 // Удалить определенные плагины
функция my_recommended_plugins( $plugins ) {
// Удалить уведомление об установке WooCommerce
unset($plugins['woocommerce']);
// Возвращаем плагины
вернуть $плагины;
}
add_filter('wpex_recommended_plugins', 'my_recommended_plugins');
// Удалить все плагины
// ЭТО НЕ РЕКОМЕНДУЕТСЯ, ЕСЛИ ВЫ ИСПОЛЬЗУЕТЕ НЕКОТОРЫЕ ПЛАГИНЫ, ПОСКОЛЬКУ УВЕДОМЛЕНИЕ ТАКЖЕ ИСПОЛЬЗУЕТСЯ, ЧТОБЫ УВЕДОМИТЬ ВАС ОБ ОБНОВЛЕНИЯХ
add_filter('wpex_recommended_plugins', '__return_empty_array');

72. Как условно показать или скрыть выноску нижнего колонтитула

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

 функция my_callout_visibility($bool) {
// Скрыть на главной странице
если (is_front_page()) {
$ логическое значение = ложь;
}
// Возвращаем логическое значение
вернуть $bool;
}
add_filter('wpex_callout_enabled', 'my_callout_visibility', 20);

73. Как удалить метагенератор темы

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

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

 add_action('инициализация', функция() {
remove_action('wp_head', 'wpex_theme_meta_generator', 1);
}, 10 )

74. Как автоматически добавить место под заголовком для страниц без заголовка

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

 body.page-header-disabled #main {
отступ сверху: 30px;
}

75. Как скрыть кнопку прокрутки вверх на мобильном телефоне

Просто добавьте следующий код в раздел « Дополнительные CSS »:

 Только экран @media и (максимальная ширина: 959 пикселей) {
#site-scroll-top { display: none !important; }
}

76. Как переместить верхний и нижний колонтитулы за пределы «коробочного» макета

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

 функция myprefix_move_header_footer_out_of_boxed_layout() {
// Удалить верхний/нижний колонтитул
remove_action('wpex_hook_wrap_top', 'wpex_header');
remove_action('wpex_hook_wrap_bottom', 'wpex_footer');
// Повторно добавляем верхний/нижний колонтитул
add_action('wpex_outer_wrap_before', 'wpex_header', 9999);
add_action('wpex_outer_wrap_after', 'wpex_footer');
}
add_action('init', 'myprefix_move_header_footer_out_of_boxed_layout');

77. Как добавить больше вариантов столбцов в модули сетки

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

 // Эта функция добавит выбранные столбцы, которые вам нужно будет затем добавить в собственный CSS
// для фактического столбца. Пример '.span_1_of_8{ ширина: 12,5%; }'
функция myprefix_grid_columns ($ столбцы) {
$columns['8'] = '8';
$columns['9'] = '9';
$columns['10'] = '10'; // добавьте столько, сколько хотите
вернуть $столбцов;
}
add_filter('wpex_grid_columns', 'myprefix_grid_columns');

78. Как добавить вторичное пользовательское меню под заголовком

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

 функция add_custom_menu_above_main_content() { ?>
<div class="my-nav-wrapper clr">
<div class="container clr"> <!-- .center содержимое панели навигации -->
<?php
// Решение 1 добавить шорткод панели навигации
echo do_shortcode('[vcex_navbar menu="60"]'); // изменить идентификатор меню
// Решение 2 с использованием меню WP см.
// @ https://codex.wordpress.org/Function_Reference/wp_nav_menu для аргументов
$аргументы = массив();
wp_nav_menu ($ аргументы);
// Решение 3: используйте плагин меню, такой как uberMenu
do_shortcode('[menu_shortcode_here]'); ?>
</div>
</div>
<?php }
add_action('wpex_hook_header_after', 'add_custom_menu_above_main_content');

79. Как убрать заголовок из шапки страницы и оставить только хлебные крошки

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

 // Удалить заголовок из области шапки страницы
add_action('инициализация', функция() {
remove_action('wpex_hook_page_header_inner', 'wpex_page_header_title');
remove_action('wpex_hook_page_header_content', 'wpex_page_header_title'); // Всего v5+
});

80. Ссылки на действия

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

Общий

Вот некоторые из общих функций Action:

storefront_before_site – Executed after opening <body> tag

 storefront_before_content — выполняется перед открытием тега <div id="content">
storefront_content_top — выполняется после открытия тега <div id="content">

Заголовок

 storefront_before_header — выполняется после тега <div id="page">
storefront_header — выполняется внутри <div class="col-full"> тега <header id="masthead">
Домашняя страница
storefront_homepage — выполняется внутри <div class="col-full"> раздела содержимого домашней страницы.

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

 storefront_homepage_before_product_categories — выполняется перед разделом <section class="storefront-product-categories"> главной страницы storefront_homepage_after_product_categories_title` — выполняется после <h2 class="section-title"> заголовка раздела категорий товаров storefront_homepage_after_product_categories — выполняется после <section class="storefront -product-categories"> раздел главной страницы

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

 storefront_homepage_before_recent_products — выполняется перед разделом главной страницы <section class="storefront-recent-products"> storefront_homepage_after_recent_products_title — выполняется после <h2 class="section-title"> заголовка раздела последних продуктов storefront_homepage_after_recent_products — выполняется после <section class="storefront- недавние продукты"> раздел домашней страницы

Товары со скидкой

 storefront_homepage_before_on_sale_products — выполняется перед разделом главной страницы <section class="storefront-on-sale-products"> storefront_homepage_after_on_sale_products_title — выполняется после <h2 class="section-title"> заголовка раздела товаров в продаже storefront_homepage_after_on_sale_products — выполняется после класса <section ="storefront-on-sale-products"> раздел главной страницы

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

 storefront_homepage_before_best_selling_products — выполняется перед разделом главной страницы <section class="storefront-best-selling-products">.
storefront_homepage_after_best_selling_products_title — выполняется после заголовка раздела <h2 class="section-title"> самых продаваемых товаров.
storefront_homepage_after_best_selling_products — выполняется после раздела главной страницы <section class="storefront-best-selling-products">.

Страница архива блога

 storefront_loop_before — выполняется перед всеми сообщениями в архиве блога.
storefront_loop_post — выполняется перед каждым сообщением в архиве блога.
storefront_post_content_before — выполняется перед содержимым каждого сообщения в архиве блога.
storefront_post_content_after — выполняется после содержимого каждой записи в архиве блога.

Общая страница

 storefront_page_before — выполняется после тега `<main id="main">` на отдельных страницах.
storefront_page — выполняется после открывающего тега `<div id="post-…">` на отдельных страницах.
storefront_page_after — выполняется в конце тега `<div id="post-…">` на отдельных страницах.

Один пост

 storefront_single_post_before — выполняется после открывающего тега <main id="main"> в отдельных сообщениях блога.
storefront_single_post_top — выполняется после открывающего тега <div id="post-..."> в отдельных сообщениях.
storefront_single_post — выполняется сразу после хука storefront_single_post_top для отображения содержимого поста.
storefront_single_post_bottom — выполняется перед закрывающим тегом <div id="post-..."> в отдельных сообщениях.
storefront_single_post_after — выполняется перед закрывающим тегом <main id="main"> в отдельных сообщениях блога.

Боковая панель

storefront_sidebar — выполняется на всех страницах, содержащих боковую панель, при наличии виджетов

Нижний колонтитул

 storefront_before_footer — выполняется перед тегом <footer id="colophon">
storefront_footer — выполняется перед закрытием тега <footer id="colophon">
storefront_after_footer — выполняется после закрытия тега <footer id="colophon">

Справочник по фильтрам

В этом разделе перечислены некоторые из наиболее часто используемых фильтров, доступных в теме Storefront.

Функции шаблона витрины

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

Меню навигации

storefront_menu_toggle_text — фильтровать адаптивный текст переключения меню.

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

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

 storefront_product_categories_args — фильтрация аргументов категории товаров на главной странице.
storefront_product_categories_shortcode_args — фильтровать аргументы шорткода категории продуктов на главной странице.

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

 storefront_recent_products_args — фильтровать аргументы последних товаров на главной странице.
storefront_recent_products_shortcode_args — фильтровать аргументы шорткода последних товаров на главной странице.

Товары со скидкой

 storefront_on_sale_products_args — фильтровать главную страницу по аргументам товаров со скидками.
storefront_on_sale_products_shortcode_args — фильтровать главную страницу по аргументам шорткода продуктов со скидками.

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

 storefront_best_selling_products_args — фильтровать аргументы самых продаваемых продуктов на главной странице.
storefront_best_selling_products_shortcode_args — фильтровать аргументы шорткода самых продаваемых продуктов главной страницы.

Один пост

storefront_single_post_posted_on_html — отфильтровать одиночные публикации по деталям

Нижний колонтитул

 storefront_footer_widget_rows — фильтровать количество строк виджета нижнего колонтитула (по умолчанию: 1)
storefront_footer_widget_columns — фильтровать количество столбцов виджета нижнего колонтитула (по умолчанию: 4)
storefront_copyright_text — фильтровать текст копирайта в нижнем колонтитуле
storefront_credit_link — фильтровать кредитную ссылку нижнего колонтитула

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

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

 storefront_header_styles — фильтровать стили заголовков
storefront_homepage_content_styles — фильтровать стили содержимого домашней страницы.

Классы витрины

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

 storefront_custom_background_args — фильтрация фоновых аргументов по умолчанию.
storefront_default_background_color — фильтровать цвет фона сайта по умолчанию
storefront_sidebar_args — фильтровать аргументы боковой панели по умолчанию.
storefront_google_font_families — фильтровать семейства шрифтов Google по умолчанию.
storefront_navigation_markup_template — фильтровать выходную разметку навигации.

Функции шаблона WooCommerce

Файл: /woocommerce/storefront-woocommerce-template-functions.php

 storefront_upsells_columns — фильтровать столбцы допродажи (по умолчанию: 3)
storefront_loop_columns — фильтровать отображение циклов продуктов по умолчанию (по умолчанию: 3)
storefront_handheld_footer_bar_links — фильтровать ссылки в колонтитуле портативных устройств.

Классы WooCommerce

Файл: /woocommerce/class-storefront-woocommerce.php

 storefront_related_products_args — фильтровать аргументы связанных продуктов
storefront_product_thumbnail_columns — фильтровать столбцы эскизов товаров (по умолчанию: 4)
storefront_products_per_page — фильтровать товары на странице по категориям товаров.

Вывод

Если вы хотите настроить тему витрины магазина, лучше всего начать с советов, представленных в этом всеобъемлющем руководстве по настройке витрины. Это также предлагает вам фрагменты кода, которые вы можете быстро добавить в дочернюю тему Storefront и мгновенно получить результаты. Я надеюсь, что вы найдете это руководство по настройке Storefront полезным.

Более 80 хитростей по настройке темы Storefront WooCommerce : Полное руководство по настройке темы Storefront

Витрина WooCommerce Тема

Как установить и настроить тему WooCommerce Storefront

Шаблоны страниц

Шаблон главной страницы.

Полная ширина в корзине и при оформлении заказа

Настройка меню

Создание нового меню и добавление страниц

Размещение виджетов

1. Создание дочерней темы

2. Добавьте логотип в свой магазин

3. Настройте размер заголовка

4. Убираем строку поиска из шапки темы

5. Создайте отдельное выпадающее меню для мобильных устройств.

6. Отключите отзывы клиентов

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

8. Измените цвет меню заголовка

9. Скрыть основную панель навигации

10. Скрыть название товара на странице магазина

11. Убираем пустое место из шапки

12. Увеличьте ширину строки поиска

13. Удалите пробел между заголовком и меню

14. Добавление дополнительного текста на страницу регистрации WooCommerce

15. Удалите хлебные крошки в теме Storefront

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

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

18. Удалить изображение товара из корзины и мини-корзины

19. Последние товары со страницы нашего магазина

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

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

22. Интегрируйте липкую кнопку «Добавить в корзину».

23. Добавьте выпадающий список городов на странице оформления заказа.

24. Скройте кнопки «плюс» и «минус» с количеством товара на странице товара.

25. Скрыть кнопку «Добавить в корзину» на странице товара

26. Удалите кредит темы Storefront из нижнего колонтитула.

27. Измените цвет и размер шрифта раздела виджета витрины.

28. Покажите значок «Распродажа» на витрине магазина на изображении товара.

29. Измените цвет значка «Распродажа».

30. Изменить цвет поля «плюс-минус» количества

31. Как изменить цвет фона шапки Витрины

32. Измените цвет фона корзины в шапке.

33. Добавьте изображение в нижний колонтитул витрины с помощью CSS ниже Copyright

34. Как убрать пробел в футере

35. Как убрать шапку, но сохранить меню

36. Как убрать подчеркивание с гиперссылок

37. Как удалить избранные изображения в сообщениях в теме WooCommerce Storefront

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

39. Как настроить значок Storefront WooCommerce при распродаже

40. Как изменить размер логотипа, вторичной навигации и панели поиска

41. Как убрать боковую панель на страницах продуктов WooCommerce, чтобы она стала полной.

42. Как добавить изображение или иконку в пункты меню.

43. Как добавить верхнюю панель на Витрину

44. Как добавить собственное сообщение на верхнюю панель

45. Как сделать Meta Slider на всю ширину с помощью Storefront

46. ​​Как добавить дополнительные шрифты Google на витрину

47. Как убрать строку поиска из шапки

48. Как скрыть заголовки страниц в витрине

49. Как убрать надпись «Designed by WooThemes» в нижнем колонтитуле Storefront

50. Как добавить значки Font Awesome в меню витрины

51. Как переименовать «Навигацию» в мобильной версии Storefront

52. Как добавить аватар покупателя на витрине «Моя учетная запись»

53. Как изменить высоту нижнего колонтитула магазина WooCommerce

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

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

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

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

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

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

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

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

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

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

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

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

66. Как изменить цвет фона распродажных товаров

67. Как настроить кнопки

68. Как добавить пользовательские ссылки в футере Storefront

69. Отрывок из блога Storefront show об архивах

70. Как добавить собственный тег Metaviewport

71. Как убрать уведомление о рекомендуемых плагинах

46. Как добавить дополнительные шрифты Google на витрину