Dostosowywanie strony głównej motywu WooCommerce Storefront [Ultimate Guide]

Dostosowanie strony głównej motywu witryny sklepowej jest kluczowe dla każdego sklepu internetowego zbudowanego z motywem WooCommerce w witrynie sklepowej. Dostosowanie jest konieczne, ponieważ dobry projekt przyciąga odwiedzających do Twojego sklepu, buduje zaufanie klientów do Twojej marki i przekształca ich w lojalnych klientów.

W tym samouczku pokażę proste dostosowanie strony głównej, które można zaimplementować na stronie głównej motywu witryny sklepowej, aby była bardziej atrakcyjna i poprawiała ogólne wrażenia użytkownika, co jest równie przydatne do poprawy optymalizacji pod kątem wyszukiwarek.

Przed utworzeniem jakichkolwiek dostosowań w motywie Storefront zaleca się najpierw utworzyć motyw podrzędny Storefront, aby uniknąć utraty zmian po zaktualizowaniu motywu nadrzędnego. Jeśli chcesz również bardziej dostosować motyw Storefront, możesz skorzystać z tego przewodnika po dostosowywaniu witryny Storefront, który udostępniłem w poprzednim poście.

Dostosowywanie strony głównej motywu witryny sklepowej

Motyw WooCommerce Storefront ma ponad 200 000 aktywnych instalacji w społeczności WordPress. Strona główna motywu składa się z 6 sekcji:

• Zawartość strony
• Sekcja kategorii produktów
• Sekcja Polecane Produkty
• Sekcja ostatnich produktów
• Sekcja najwyżej ocenianych produktów
• Sekcja produktów na wyprzedaży
• Sekcja najlepiej sprzedających się produktów

Zanim jednak przejdziemy do personalizacji, musisz skonfigurować stronę główną. Aby wyświetlać sekcje strony głównej na swojej stronie głównej, musisz przypisać szablon strony głównej do swojej strony.

Motyw Storefront automatycznie tworzy dwa dodatkowe szablony stron, oprócz domyślnych stron WooCommerce. Są to Strona główna i Pełna szerokość. Tutaj omówimy tylko, jak skonfigurować szablon strony głównej.

Szablon strony głównej

Szablon strony głównej oferuje świetny sposób na wyświetlanie wszystkich produktów, zapewniając przegląd produktów i kategorii produktów.

Odwiedzający Twój sklep najpierw trafią na tę stronę po wejściu do Twojego sklepu. Wygląd strony głównej ma duże znaczenie, ponieważ odwiedzający mogą zostać przekonwertowani na kupujących, jeśli jest atrakcyjna.

Konfiguracja jest bardzo prosta, ponieważ wystarczy:

1. Zaloguj się do panelu administracyjnego swojej witryny jako administrator .
2. Utwórz nową stronę i dodaj zawartość do wyświetlenia.
3. Następnie należy wybrać opcję „ Strona główna ” z listy rozwijanej szablonów w polu meta Atrybuty strony , jak pokazano poniżej:
4. Po opublikowaniu tej strony możesz ustawić ją jako stronę główną, przechodząc do Ustawienia , a następnie Czytanie .
5. Następnie należy zaznaczyć opcję „ Strona statyczna ”, a następnie wybrać utworzoną stronę główną z menu rozwijanego „ Strona główna ”.
6. Po zapisaniu zmian zostaną one automatycznie odzwierciedlone w interfejsie użytkownika .

Po zakończeniu konfiguracji strona główna powinna zawierać wiele sekcji, jak pokazano poniżej:

Na stronie głównej wyświetlane są różne klastry, takie jak polecane produkty, ulubione produkty fanów, produkty na wyprzedaży i bestsellery. Sposób wyświetlania tych elementów jest taki sam jak kolejność na zapleczu.

Po skonfigurowaniu strony głównej możemy teraz przejść do dostosowywania:

1. Usuń obrazy kategorii produktów ze strony głównej

WooCommerce umożliwia wyświetlanie produktów, a także kategorii produktów wraz z ich obrazami na stronie głównej. Jeśli jednak wolisz, aby kategorie były wyświetlane tylko jako tekst, musisz dodać tę linię do pliku functions.php motywu potomnego. Po prostu dodaj go na końcu pliku function.php.

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

Oto wynik:

2. Zmień łącze URL w logo

Ogólnie motywy WordPress łączą w logo stronę główną witryny. Jest to standardowa funkcja dla większości witryn internetowych, a użytkownicy oczekują, że będą mogli wrócić do strony głównej za każdym razem, gdy klikną logo.

Co jednak, jeśli strona główna znajduje się w innej lokalizacji? Oznacza to, że musisz skonfigurować adres URL, jeśli chcemy mieć niestandardowy link. Aby to zmienić, musimy dodać następujący kod do pliku functions.php motywu potomnego:

 add_action( 'storefront_header' , 'custom_storefront_header', 1 );

funkcja custom_storefront_header () {

    remove_action( 'storefront_header' , 'storefront_site_branding', 20 );

    add_action( 'storefront_header' , 'custom_site_branding', 20 );

    funkcja custom_site_branding() {

        // TUTAJ ustaw link do swojego logo lub tytułu strony

        $link = home_url( '/mój-niestandardowy-link/' );

        ?>

        <div class="branding-witryny">

            <?php

                if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) {

                    $custom_logo_id = get_theme_mod( 'custom_logo' );

                    jeśli ( $custom_logo_id ) {

                        $custom_logo_attr = array('class' => 'niestandardowe-logo', 'itemprop' => 'logo' );

                        $ image_alt = get_post_meta ( $ custom_logo_id, '_wp_attachment_image_alt', prawda );

                        if ( pusty ( $ image_alt ) ) {

                            $custom_logo_attr['alt'] = get_bloginfo( 'nazwa', 'wyświetlanie' );

                        }

                        $logo = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url">%2$s</a>',

                            esc_url( $link ),

                            wp_get_attachment_image ( $ niestandardowe_logo_id, „pełne”, fałszywe, $ niestandardowe_logo_attr )

                        );

                    }

                    elseif ( is_customize_preview() ) {

                        $logo = sprintf( '<a href="%1$s" class="niestandardowe-logo-link" style="display:none;"><img class="niestandardowe-logo"/></a>' , esc_url( $link ) );

                    }

                    $html = is_front_page() ? '<h1 class="logo">' . $logo . '</h1>' : $logo;

                } elseif ( function_exists( 'jetpack_ma_site_logo' ) && jetpack_ma_site_logo() ) {

                    $logo = site_logo()->logo;

                    $logo_id = get_theme_mod( 'custom_logo' );

                    $logo_id = $logo_id ? $logo_id : $logo['id'];

                    $rozmiar = site_logo()->rozmiar_motywu();

                    $html = sprintf( '<a href="%1$s" class="site-logo-link" rel="home" itemprop="url">%2$s</a>',

                        esc_url( $link ),

                        wp_get_attachment_image( $logo_id, $rozmiar, fałsz, tablica (

                            'class' => 'załącznik-logo witryny-' . $rozmiar,

                            'rozmiar-danych' => $rozmiar,

                            'itemprop' => 'logo'

                        ) )

                    );

                    $html = Apply_filters( 'jetpack_the_site_logo', $html, $logo, $size );

                } w przeciwnym razie {

                    $tag = is_front_page() ? 'h1' : 'div';




                    $html = '<' . esc_attr( $tag ) . ' class="beta site-title"><a href="' . esc_url( $link ) . '" rel="home">' . esc_html( get_bloginfo( 'nazwa' ) ) . '</a></' . esc_attr( $znacznik) .'>';




                    if ( '' !== get_bloginfo( 'opis' )) {

                        $html .= '<p class="opis-witryny">' . esc_html( get_bloginfo( 'opis', 'wyświetlanie') ) . '</p>';

                    }

                }

                echo $html;

            ?>

        </div>

        <?php

    }

}

Link niestandardowy przechodzi do wiersza 7 „( '/mój-niestandardowy-link/' );' , gdzie dodasz swój niestandardowy link, zastępując go słowem „ mój-niestandardowy-link ”.

3. Całkowicie usuń kategorie ze strony głównej sklepu

Możesz całkowicie usunąć kategorie na stronie głównej. Ta funkcja po prostu usuwa kategorie. Wszystko, co musisz zrobić, to dodać następujące wiersze do pliku functions.php:

 funkcja storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_product_categories', 20 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Oto wynik:

4. Usuń ostatnie produkty ze strony głównej swojego sklepu

Zaraz po dodaniu nowy produkt jest dodawany do sekcji „ Nowości ” na stronie głównej. Jest to ustawienie domyślne w motywie Storefront. Jeśli jednak stale dodajesz produkty do swojej listy, mogą one zaśmiecać stronę sklepu. Dodatkowo możesz również wyświetlić dodatkowe informacje w tej sekcji.

Aby usunąć tę sekcję, po prostu dodaj następujący kod do pliku function.php motywu potomnego.

 funkcja storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_recent_products', 30 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Oto wynik:

5. Usuń najlepiej sprzedające się produkty ze strony głównej sklepu

Dla niektórych właścicieli sklepów najlepiej sprzedające się produkty mogą nie być pożądaną cechą. Aby usunąć najlepiej sprzedającą się sekcję, po prostu dodaj następujący kod do pliku function.php motywu potomnego.

 funkcja storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_best_selling_products', 70 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Oto wynik:

6. Usuń polecane produkty

W ten sam sposób właściciele sklepów mogą chcieć wyłączyć sekcję polecanych produktów. Można to zrobić, dodając następujący fragment kodu do pliku functions.php motywu potomnego:

 funkcja storefront_child_reorder_homepage_contant() {

remove_action('homepage', 'storefront_featured_products', 40 );

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Oto wynik:

7. Jak zmienić kolor linii poziomych na stronie głównej witryny sklepowej?

Po prostu dodaj następujący kod do pliku custom.css motywu podrzędnego :

 .strona-szablon-szablon-strona-domowa .hentry .entry-header,

.strona-szablon-szablon-strona-domowa .hentry,

.strona-szablon-szablon-strona-domowa .sekcja-produktu-strony sklepowej {

kolor obramowania: czerwony;

}

8. Dodawanie obrazu tła do witryny sklepowej w określonej sekcji strony głównej

Domyślny motyw Storefront zawiera sześć sekcji, a mianowicie kategorie produktów, najnowsze produkty, polecane produkty, popularne produkty, produkty wyprzedaży i najlepiej sprzedające się produkty. Po prostu dodaj następujący kod do pliku style.css :

 .produkty-polecane-w-sklepie{

obraz w tle: url(Dodaj tutaj swój adres URL);

pozycja tła: środek centrum;

powtarzanie w tle: bez powtórzeń;

rozmiar tła: okładka;

-o-rozmiar-tła: okładka;

}

Oto wynik:

9. Dodawanie koloru tła do sekcji strony głównej witryny sklepowej

Możesz dodać kolor tła do sekcji strony głównej. Aby to zrobić, musisz najpierw zidentyfikować sekcję, do której chcesz dodać kolor. Można to łatwo zrobić, dodając następujący kod do pliku style.css :

 .produkty-polecane-w-sklepie{

kolor tła:#FFEB3B;

}

Oto wynik:

10. Jak usunąć lub ukryć tytuł sekcji strony głównej?

Aby to zrobić, musisz najpierw zidentyfikować sekcję, którą chcesz usunąć lub ukryć. Można to zrobić, dodając następujący kod do pliku style.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;}

.store-front-on-sale-products .section-title {display:none;}

.storefront-najlepiej-sprzedające się-produkty .section-title {display:none;}

Oto wynik:

11. Jak zmienić tytuł sekcji strony głównej

Aby to zrobić, musisz najpierw zidentyfikować sekcję, której tytuł chcesz usunąć. Ta lista pomoże Ci zidentyfikować filtry sekcji strony głównej witryny sklepowej:

• 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

Po prostu dodaj następujący kod w pliku function.php motywu potomnego :

 add_filter( 'storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Tytuł polecanych produktów na pierwszej stronie

function custom_storefront_product_featured_title( $args ) {

$args['title'] = __( 'Tytuł nowych polecanych produktów', 'storefront' );

return $args;

}

Oto wynik:

12. Jak zwiększyć sekcję strony głównej Produkt Siatka kolumn / kolumn

Po prostu dodaj następujące wiersze kodu do pliku function.php motywu potomnego.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );




// kolumna Polecane polecane produkty

function custom_storefront_featured_product_per_row( $args ) {

$args['kolumny'] = 2;

return $args;

}

Oto wynik:

13. Jak wyświetlić więcej kategorii na stronie głównej?

Po prostu dodaj następujące wiersze kodu do pliku function.php motywu potomnego.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// Kategoria Produkty

function custom_storefront_category_per_page( $args ) {

$args['liczba'] = 4;

return $args;

}

Oto wynik:

14. Jak dodać opis poniżej Tytuł sekcji strony głównej

Po prostu dodaj ten kod do pliku function.php motywu potomnego:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');




funkcja custom_storefront_product_featured_description(){ ?>

<p class="element-title--sub">

<?php echo "Tutaj opis sekcji";?>

</p>

<?php }

Oto wynik:

15. Jak usunąć sekcję najwyżej ocenianych produktów ze strony głównej Storefront?

Można to zrobić na dwa sposoby. Jednym z nich jest zainstalowanie wtyczki, która pomoże ci usunąć tę sekcję. Możesz rzucić okiem na wtyczkę Homepage Control . Przyjrzymy się prostszemu sposobowi wykonania tego za pomocą kodu.

Możesz jednak po prostu usunąć sekcję za pomocą haczyków. Odbywa się to poprzez dodanie następującej linii do pliku function.php motywu potomnego :

remove_action( 'homepage', 'storefront_popular_products', 50 );

Dodatkowo możesz go usunąć, dodając następujący kod w pliku style.css lub w sekcji Dodatkowe CSS :

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

Oto wynik:

16. Jak zmienić tytuł sekcji z najwyżej ocenianymi produktami?

Po prostu dodaj ten kod do pliku function.php motywu potomnego:

 add_filter( 'storefront_popular_products_args', 'custom_storefront_product_popular_title');

// Tytuł polecanych produktów na pierwszej stronie

function custom_storefront_product_popular_title( $args ) {

$args['title'] = __( 'Najlepsze produkty', 'sklep' );

return $args;

}

Oto wynik:

17. Jak wyświetlić więcej produktów w sekcji najwyżej ocenianych?

Domyślnie Storefront wyświetla 4 produkty w sekcji Najwyżej oceniane. W tym przykładzie zwiększymy go do 12 produktów. Po prostu dodaj ten kod do pliku function.php motywu potomnego :

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page' );




// Polecane polecane produkty na stronie

funkcja custom_storefront_top_product_per_page( $args ) {

$args['per_page'] = 12;

return $args;

}

Oto wynik:

18. Jak usunąć sekcję produktów wyprzedaży ze strony głównej Storefront

Można to zrobić na dwa sposoby. Jednym z nich jest zainstalowanie wtyczki, która pomoże ci usunąć tę sekcję. Możesz rzucić okiem na wtyczkę Homepage Control . W tym przykładzie użyję jednego wiersza kodu.

Możesz po prostu usunąć sekcję za pomocą haczyków. Odbywa się to poprzez dodanie następującej linii do pliku function.php motywu potomnego:

remove_action( 'homepage', 'storefront_on_sale_products', 60 );

Oto wynik:

19. Storefront Theme Strona główna Dostosowywanie Akcja Hooks Referencje

Są to wszystkie dostępne funkcje add_action() używane w motywie Storefront. Dołącza funkcję do haka zdefiniowanego przez do_action

nagłówek

• Strona główna
• storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

Kategorie produktów

• storefront_homepage_before_product_categories – Executed before the <section class="storefront-product-categories"> homepage section
• storefront_homepage_after_product_categories_title` – Executed after the <h2 class="section-title"> product categories section title
• storefront_homepage_after_product_categories – Executed after the <section class="storefront-product-categories"> homepage section

Najnowsze produkty

• storefront_homepage_before_recent_products – Executed before the <section class="storefront-recent-products"> homepage section
• storefront_homepage_after_recent_products_title – Executed after the <h2 class="section-title"> recent products section title
• storefront_homepage_after_recent_products – Executed after the <section class="storefront-recent-products"> homepage section

Polecane produkty

• storefront_homepage_before_featured_products – Executed before the <section class="storefront-featured-products"> homepage section
• storefront_homepage_after_featured_products_title – Executed after the <h2 class="section-title"> featured products section title
• storefront_homepage_after_featured_products – Executed after the <section class="storefront-featured-products"> homepage section

Popularne Produkty

• storefront_homepage_before_popular_products – Executed before the <section class="storefront-popular-products"> homepage section
• storefront_homepage_after_popular_products_title – Executed after the <h2 class="section-title"> popular products section title
• storefront_homepage_after_popular_products – Executed after the <section class="storefront-popular-products"> homepage section

Produkty na wyprzedaży

• storefront_homepage_before_on_sale_products – Executed before the <section class="storefront-on-sale-products"> homepage section
• storefront_homepage_after_on_sale_products_title – Executed after the <h2 class="section-title"> on-sale products section title
• storefront_homepage_after_on_sale_products – Executed after the <section class="storefront-on-sale-products"> homepage section

Najlepiej sprzedające się produkty

• storefront_homepage_before_best_selling_products – Executed before the <section class="storefront-best-selling-products"> homepage section
• storefront_homepage_after_best_selling_products_title – Executed after the <h2 class="section-title"> best-selling products section title
• storefront_homepage_after_best_selling_products – Executed after the <section class="storefront-best-selling-products"> homepage section

Funkcje witryny sklepowej

Plik: /inc/storefront-functions.php

• storefront_header_styles – filter the header styles
• storefront_homepage_content_styles – filter the homepage content styles
• Klasy sklepowe

Wniosek

W tym artykule przedstawiłem 18 różnych pomysłów na dostosowanie strony głównej motywu Storefront, które możesz zastosować na stronie głównej motywu WooCommerce Storefront. Te dostosowania zostały przetestowane i działają tak, jak pokazano na zrzutach ekranu.

Jeśli jesteś początkującym użytkownikiem WordPressa i nie wiesz, gdzie znaleźć plik functions.php, po prostu wykonaj te proste czynności:

1. Zaloguj się do swojej witryny WordPress i uzyskaj dostęp do pulpitu nawigacyjnego jako administrator.
2. Z menu Dashboard kliknij menu Wygląd > Menu edytora motywów . Po otwarciu strony Theme Editor poszukaj pliku funkcji motywu, w którym dodamy funkcję.

To takie proste. Z tego artykułu na temat dostosowywania strony głównej motywu witryny Storefront możesz zobaczyć, jak elastyczny jest motyw witryny sklepu i możesz użyć filtrów i haczyków, aby dostosować, które chcesz. Aby uzyskać dodatkowe style, możesz użyć sekcji Dodatkowe CSS lub pliku style.css, w którym wprowadzisz kod CSS.

Podobne artykuły

1. Ponad 80 sztuczek, aby dostosować motyw WooCommerce Storefront: Najlepszy przewodnik po dostosowywaniu motywu Storefront
2. Jak ukryć produkt w WooCommerce lub ukryć produkty według kategorii lub ról
3. Jak uzyskać aktualną nazwę kategorii produktu w WooCommerce?
4. Jak ustawić polecane produkty w WooCommerce?
5. Jak ukryć wszystkie produkty ze strony sklepu w WooCommerce?
6. Jak liczyć przedmioty dodane do koszyka Kod liczenia koszyka WooCommerce
7. Jak ukryć produkty bez ceny w WooCommerce
8. Jak ukryć produkt WooCommerce w wynikach wyszukiwania
9. Jak korzystać z atrybutów produktów WooCommerce krok po kroku [Kompletny przewodnik]
10. Jak utworzyć stronicowanie liczb w WordPress bez korzystania z wtyczki?