Кастомизация темы Storefront для WooCommerce

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

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

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

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

Где скачать Storefront и его дочернюю тему

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

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

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

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

Если вы как и я используете тему 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 по умолчанию в мобильной версии в футере подгружается меню с корзиной и поиском 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;
}
  • Крупнейшая в Европе школа английского языка

    Промокоды, акции и подарки, чтобы Ваше обучение было не только интересным, но и выгодным. Закажите пробный урок уже сейчас!

    skyeng.ru
  • Английский для IT‑специалистов по Skype

    Персональные занятия по разумным ценам. Длительность курса: 50 уроков по 50 минут. Управляй расписанием занятий через мобильное приложение!

    englex.ru