Przewodnik dostosowywania CSS nagłówka sklepu WooCommerce

Jeśli chcesz zmienić wygląd nagłówka szablonu Storefront WooCommerce, możesz nauczyć się kilku sztuczek CSS z tego krótkiego samouczka.

Witryna WooCommerce Storefront to prosty i potężny motyw, który jest bezpłatny. Ten motyw zapewnia znaczną kontrolę nad swoim sklepem w zakresie prezentacji produktów i dostępu użytkownika. Jest bezpłatny i oferuje mnóstwo opcji dostosowywania za pomocą motywów potomnych.

Motyw Storefront obsługuje dostosowywanie WordPress i możesz edytować nagłówek w tej sekcji.

Możesz jednak dostosować nagłówek witryny sklepowej za pomocą filtrów. Jednak dzięki CSS łatwiej jest dodać swoje reguły, aby zmienić stylizację określonej sekcji. Aby skorzystać z tego samouczka, musisz mieć pewne umiejętności kodowania. Dodamy reguły CSS w sekcji Dodatkowe CSS za pomocą dostosowania.

Zaletą korzystania z tej sekcji jest to, że dostosowywanie WordPressa umożliwia edycję w czasie rzeczywistym. Możesz zobaczyć wprowadzone zmiany, zanim będziesz mógł je opublikować.

Warto również wspomnieć, że motyw Storefront musi być aktywnym motywem podczas dostosowywania.

Mając to na uwadze, spójrzmy na kilka wskazówek CSS nagłówka, których możesz użyć, aby przenieść swój sklep na wyższy poziom.

1. Dostosuj rozmiar nagłówka

Tutaj ponownie użyjemy Theme Customizer, ale napiszemy trochę kodu CSS w sekcji „Dodatkowy CSS”.

Dodaj następujący kod:

 * Masthead */

#masthead.nagłówek-witryny {

    wysokość: 155px!ważne;

    margines-dolny: 0px

}

/* Mobilny CSS dla mastheada */

@media tylko ekran i (maksymalna szerokość: 320px) {

    #masthead.nagłówek-witryny {

    wysokość: 80px!ważne;

    margines-dolny:0px;

}

}

/* Menu nagłówka */

.storefront-podstawowa-nawigacja a, .cart-contents a {

    margines:0 0 0 0;

}

.główna-nawigacyjna ul {

    padding:0 0 10px 4px!ważne;

}

.główna nawigacja li {

    wysokość:38px!ważne;}

/* Mobilny CSS dla menu mastheadu */

@media tylko ekran i (maksymalna szerokość: 320px) {

.główna-nawigacyjna ul {

    tło:#D6DDE4!ważne;

}

}

/* Obszar nagłówka */

.nagłówek witryny {

wyściółka górna:0,5em;

}

obraz .site-header .custom-logo-link obraz, .site-header .site-logo-kotwica obraz, .site-header .site-logo-link obraz {

margines-dolny: -45px;

}

Oto wynik:

2. Usuń pasek wyszukiwania z nagłówka motywu

Dodaj ten kod do sekcji „Dodatkowy CSS”.

 .site-header .widget_product_search {

Nie wyświetla się;

}

Oto wynik:

3. Zmień kolor menu nagłówka

Konfigurator pozwala nam dostosować nagłówek za pomocą żądanych kolorów. Możesz to zrobić, przechodząc do opcji Dostosuj, a następnie nagłówka i wybierając żądany kolor.

Jednak ta opcja koloruje cały obszar nagłówka, w tym pasek wyszukiwania, sekcję logowania i logo. Aby uzyskać inne tło w menu nagłówka, dodaj następujący fragment kodu do panelu Dodatkowe CSS.

 .storefront-podstawowa-nawigacja,

.główna-nawigacja ul.menu ul.sub-menu{

kolor tła: zielony;

}

Oto wynik:

4. Ukryj główny pasek nawigacji

Storefront Theme domyślnie wyświetla wszystkie strony jako menu. Jeśli chcesz ukryć główny pasek nawigacyjny, usunięcie menu nie wystarczy. Przejdź do sekcji Dostosuj, a następnie do sekcji Dodatkowe CSS i dodaj następujące wiersze:

 .storefront-podstawowa-nawigacja {

Nie wyświetla się;

}

Oto wynik:

5. Usuń pustą przestrzeń z nagłówka

Przejdź do sekcji Dostosuj, a następnie do sekcji Dodatkowe CSS i dodaj następujące wiersze:

 .branding witryny {

margines-dolny: 0px;

}

Oto wynik:

6. Zwiększ szerokość paska wyszukiwania

Co byś zrobił, jeśli chcesz rozszerzyć szerokość paska wyszukiwania? Korzystając z sekcji Dodatkowy CSS, dodaj następujące wiersze:

 .woocommerce-aktywny .site-header .site-search {

szerokość: 44,739%;

}

#masthead .site-search .widget_product_search input[type="search"] {

szerokość: 700px !ważne;

}

Oto wynik:

7. Jak zmienić rozmiar logo, dodatkową nawigację i pasek wyszukiwania?

Aby zmienić je wszystkie naraz, dodaj następujący kod do sekcji Dodatkowe CSS:

 @media screen i (minimalna szerokość: 768px) {

/* LOGO */

.site-header .site-branding, .site-header .site-logo-kotwica, .site-header .site-logo-link { width: 30% !ważne; /* Użyj wartości px jeśli chcesz, np. 350px */ }




/* NAWIGACJA WTÓRNA */

.site-header .secondary-navigation { szerokość: 40% !ważne; /* Użyj wartości px jeśli chcesz, np. 350px */ }




/* PASEK WYSZUKIWANIA */

.site-header .site-search { szerokość: 30% !ważne; /* Użyj wartości px jeśli chcesz, np. 350px */ }

Oto wynik:

8. Usuń koszyk z nagłówka

W tym przykładzie usunę ikonę koszyka, dodając nową regułę ' display: none; „. Dodaj następujący kod CSS w sekcji Dodatkowe CSS:

 .koszyk-nagłówek-witryny .zawartość-koszyka {

Nie wyświetla się;

}

Oto wynik:

9. Ukryj nagłówek

Aby ukryć nagłówek, dodaj następujący kod CSS w sekcji Dodatkowe CSS:

 .nagłówek witryny {

Nie wyświetla się;

}

Oto wynik:

10. Zwiększ rozmiar łącza menu w nagłówku witryny sklepowej

Menu są nieco mniejsze, zgodnie z preferencjami wielu użytkowników. Muszą jednak uaktualnić rozmiar czcionki łączy menu w motywie witryny sklepowej. Dodaj następujący kod w sekcji Dodatkowe CSS:

 .main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {

rozmiar czcionki:28px;

}

Oto wynik:

11. Zmień rozmiar ikony koszyka w nagłówku witryny sklepowej

Możesz to zrobić, dodając następujący kod CSS w sekcji Dodatkowe CSS

 .koszyk-nagłówek-witryny .zawartość-koszyka {

rozmiar czcionki:30px;

}

Oto wynik:

12. Zmień rozmiar tytułu nagłówka witryny w motywie witryny sklepowej

Dodaj następujący kod w sekcji Dodatkowe CSS:

 .nagłówek witryny {

rozmiar czcionki: 20px;

}

Oto wynik:

13. Zmień rozmiar przycisku menu mobilnego

Należy zauważyć, że sposób wyświetlania menu jest częścią jego responsywności. Dlatego jeśli Twoje główne menu nawigacyjne ma postać listy na urządzeniu stacjonarnym, to samo menu może być wyświetlane jako menu hamburgerowe na urządzeniu mobilnym.

Aby zmienić rozmiar, dodaj następujący kod CSS w sekcji Dodatkowe CSS:

 .przycisk.przełączanie menu {

rozmiar czcionki: 19px;

}

Oto wynik:

Wniosek

W tym przewodniku udostępniłem kilka wskazówek CSS dotyczących nagłówków, których możesz użyć do stylizacji nagłówka. Gorąco polecam dodanie reguł CSS w sekcji Dodatkowe CSS, aby móc podglądać zmiany w czasie rzeczywistym. Podgląd zmian umożliwi Ci zmianę reguły zgodnie ze specyfikacją.

Aby dodać regułę, skopiuj/wklej w sekcji „ Dodatkowy CSS ” interfejsu dostosowywania motywu Storefront. Aby to zrobić:

• Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
• W menu Dashboard kliknij menu Wygląd > Dostosuj .
• Przejdź w dół do Dodatkowe CSS na lewym pasku bocznym, który się pojawi.
• Dodaj regułę CSS.
• Jeśli jesteś zadowolony ze zmian, kliknij Opublikuj.

Należy jednak pamiętać, że udostępnione tutaj wskazówki dotyczące CSS działają tylko w przypadku motywu Storefront.

Podobne artykuły

1. Jak utworzyć niestandardowy obszar widżetów w WordPressie krok po kroku
2. Jak dostosować motyw Storefront – Dostosowywanie strony głównej [Ultimate Guide]
3. Jak dodać obraz tła nagłówka motywu Storefront
4. Jak edytować nagłówek w motywie Storefront WooCommerce?
5. Jak zrobić przewijalne menu Divi Mobile Quick Fix?
6. Jak zmienić rozmiar ikony koszyka w motywie WooCommerce Storefront?
7. Jak zmienić rozmiar motywu przycisku menu mobilnego Storefront?
8. Jak dostosować wysokość nagłówka sklepu WooCommerce?
9. Jak zmienić rozmiar czcionki w menu głównym Motyw witryny sklepowej?
10. Jak zmienić wysokość stopki witryny sklepu WooCommerce?
11. Jak zmienić kolor menu WooCommerce Storefront
12. Jak dostosować motyw Storefront WooCommerce: Najlepszy przewodnik po dostosowywaniu witryny Storefront
13. Jak zmienić rozmiar tytułu witryny Motyw WooCommerce Storefront
14. Jak usunąć nagłówek WooCommerce Storefront Theme