Это руководство для темы WooCommerce Storefront было создано на основе наиболее распространенных вопросов в Интернете. Я как и вы столкнулся с тем, что информация вроде бы и есть, но как бы ее и нет. Она или не работает, устарела или нарушает работу даже не темы Storefront, а Wordpress в целом.

Здесь я подобрал те варианты кастомизации Storefront версии 3.1 и выше, которые использовал и тестировал сам. — Dmytro Yakovenko 2021/01/06

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

Читайте также: Как изменять и добавлять вкладки в карточках товарах WooCommerce, Подборка тем для WooCommerce.

Файлы темы Storefront хранятся по адресу https://themes.svn.wordpress.org/storefront/.

Определите ваш стиль путём кастомизации Storefront по вашему вкусу, или выберите одну из дочерних тем Storefront, например бесплатные темы Boutique и Deli. Это всё на ваше усмотрение и с открытым исходным кодом.

Все изменения Storefront рекомендуется производить в дочерней теме. Скачать чистую дочернюю тему Storefront с GitHub.

Читайте также: Лучшие Шаблоны WooCommerce WordPress в 2024.

Если вы как и я используете тему Storefront, тогда размер изображения товара квадратный (1:1), рекомендую минимум 800х800px, а лучше стандарт Инстаграм 1080х1080 пикселей и для постов в блоге 800x300.

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

/*отключаем виджет корзины*/
#site-header-cart  { display: none !important }

Код ниже отвечает на вопросы: как изменить текст авторских прав (Copyright ) теме Storefront, как убрать ссылкив футере. Код ниже перекрывает все возможные вопросы по изменению футера в этом шаблоне. Нужно просто переопределить функцию storefront_credit.

Для того чтобы убрать ссылку с надписью "Работает на Storefront и WooCommerce.", нужно переопределить встроенную в тему Storefront функцию storefront_credit. Для этого в дочерней теме Storefront в файле functions.php вписываем код

1. Первый вариант (рекомендуемый мной)

   /*Delete Footer Text in the Storefront Theme */
    
   function storefront_credit() {
           ?>
           <div class="site-info">
                   &copy; <?php echo get_bloginfo( 'name' ) . ' ' . get_the_date( 'Y' ); ?>
           </div><!-- .site-info -->
           <?php
   }

2. Второй вариант, очень сильно распространенный в интернете, но на мой взгляд не к месту сложный

   add_action( 'init', 'custom_remove_footer_credit', 10 );
    
   function custom_remove_footer_credit () {
       remove_action( 'storefront_footer', 'storefront_credit', 20 );
       add_action( 'storefront_footer', 'custom_storefront_credit', 20 );
   } 
    
   function custom_storefront_credit() {
   	?>
   	<div class="site-info">
   		&copy; <?php echo get_bloginfo( 'name' ) . ' ' . get_the_date( 'Y' ); ?>
   	</div><!-- .site-info -->
   	<?php
   }

Первый вариант:

1. Код для социальных сетей HTML и CSS копируем из https://inter-net.pro/css/knopki-sotssetej-dlya-sajta
2. Код CSS вставляем в файл стилей дочерней темы Storefront public/wp-content/themes/storefront-child/style.css
3. Код HTML вставляем в файл footer.php дочерней темы Storefront public/wp-content/themes/storefront-child/footer.php перед строкой </div><!– .col-full –>

Второй вариант (рекомендую!): установите виджет от Jetpack настройте его

Полностью отключаем хлебные крошки в теме Storefront, добавив код в файл functions.php дочерней темы

add_action( 'init', 'true_woo_no_breadcrumbs_storefront' );
function true_woo_no_breadcrumbs_storefront() {
    remove_action( 'storefront_before_content', 'woocommerce_breadcrumb', 10 ); 
}

Если нужно изменить текст ссылки на главную, используйте код:

add_filter( 'woocommerce_breadcrumb_defaults', 'true_woo_breadcrumbs_home' );
 
function true_woo_breadcrumbs_home( $defaults ) {
      $defaults[ 'home' ] = 'Супер интернет-магазин';
// либо задать пустое и ссылка на главную выводиться не будет
// $defaults[ 'home' ] = '';
    return $defaults; 
}

В storefront по умолчанию в мобильной версии в футере подгружается меню с корзиной и поиском storefront-handheld-footer-bar. Для его удаления, используйте документацию. И я использовал этот код:

add_action( 'init', 'jk_remove_storefront_handheld_footer_bar' );
 
function jk_remove_storefront_handheld_footer_bar() {
 
  remove_action( 'storefront_footer', 'storefront_handheld_footer_bar', 999 );
 
}

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

Первый способ (рекомендую): Использовать плагин Storefront Top Bar, которые создает 2 верхних дополнительных панели перед header.

Плагин Storefront Top Bar подходит только для темы Storefront.

После установки и активации плагина у вас появятся два сайдбара – Top Bar 1 и Top Bar 2 в меню Внешний вид –> Виджеты. Внешний вид виджетов настраивается через настройки темы: Внешний вид –> Настроить.

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

<?php
function storefront_add_topbar() {
    ?>
    <div id="topbar">
        <div class="col-full">
            <p>Твоя верхняя панель перед header!</p>
        </div>
    </div>
    <?php
}
add_action( 'storefront_before_header', 'storefront_add_topbar' );

Затем добавьте CSS в настройках темы.

#topbar {
    background-color: #1F1F20;
    height: 40px;
    line-height: 40px;
}
 
#topbar p {
    color: #fff;
}

Для добавления шрифтов используйте плагин Easy Google Fonts By Titanium Themes. Настройка Easy Google находится Внешний вид (Appearance)→ Typography, на этой страницы вы выбираете нужный шрифт для абзацев и заголовков.

Плагин Easy Google Fonts By Titanium Themes добавляет более 600 шрифтов Google на выбор, а также список системных шрифтов по умолчанию. Работает с любой темой WordPress. Не требуется написание кода. Автоматические фоновые обновления: автоматически обновляет список шрифтов Google новейшими шрифтами один раз. Поддержка переводов файлы MO и PO.

В корзине ниже доставки появиласт строка направлени доставки. Её убрать можно только скрытием CSS. Заходим в настройки темы → Дополнительные стили и добавляем Основы работы с CSS код:

.woocommerce-shipping-destination {
    display: none;
}

Добавьте этот CSS код в настройках темы → Дополнительные стили.

.widget-area .widget {
    color: red;
    font-size: 1em;
}

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