Как добавить телефон в шапку Storefront
Разработчик темы Storefront рекомендует изменять шапку через специальную функцию, которая выводит содержимое в storefront_header.
Оригинал статьи https://docs.woocommerce.com/document/add-static-content-to-the-storefront-header/
Напомню, что изменения нужно вносить в дочернюю тему, чтобы не сбросились изменения при следующем обновлении темы.
Шапка темы состоит из нескольких зон. Рядом с названием зоны в скобках указан приоритет.
storefront_header_container - 0
storefront_skip_links - 5
storefront_social_icons - 10
storefront_site_branding - 20
storefront_secondary_navigation - 30
storefront_product_search - 40
storefront_header_container_close - 41
storefront_primary_navigation_wrapper - 42
storefront_primary_navigation - 50
storefront_header_cart - 60
storefront_primary_navigation_wrapper_close - 68
Изменяя приоритет, можно менять зоны местами или добавлять свои блоки.
Добавим свой блок с номером телефона.
Так как нашему блоку указан такой же приоритет, как и блоку с поиском, то блоки встанут рядом.
Не очень элегантно выглядит, поэтому наведём красоту с помощью CSS. Уберём отмену обтекания и уменьшим шрифт.
style="text-align: right; font-size: 15px;"
Чтобы скрыть блок на мобильных, добавьте ему класс .hide-on-mobile
В CSS укажите:
@media (max-width: 720px) {
.hide-on-mobile {
display: none;
}
}
