Anpassung der Homepage des WooCommerce Storefront Themes [Ultimate Guide]

Veröffentlicht: 2020-09-22

WooCommercer Storefront Homepage-Anpassungsleitfaden Die Anpassung der Homepage des Storefront-Themes ist der Schlüssel für jeden Online-Shop, der mit dem Storefront-WooCommerce-Theme erstellt wurde. Die Anpassung ist notwendig, da gutes Design Besucher in Ihr Geschäft lockt, das Vertrauen der Kunden in Ihre Marke aufbaut und sie zu treuen Kunden macht.

In diesem Tutorial werde ich einige einfache Homepage-Anpassungen zeigen, die Sie in Ihre Storefront-Design-Homepage implementieren können, um sie ansprechender zu gestalten und die allgemeine Benutzererfahrung zu verbessern, was ebenso nützlich für die Verbesserung Ihrer Suchmaschinenoptimierung ist.

Bevor Sie Anpassungen am Storefront-Theme vornehmen, ist es ratsam, zuerst das Storefront-Child-Theme zu erstellen, um zu vermeiden, dass die Änderungen verloren gehen, wenn das Parent-Theme aktualisiert wird. Wenn Sie auch weitere Anpassungen am Storefront-Thema vornehmen möchten, können Sie sich diesen Leitfaden zur Storefront-Anpassung ansehen, den ich in einem früheren Beitrag geteilt habe.

Anpassung der Storefront Theme Homepage

Startseite

Das WooCommerce Storefront-Thema hat mehr als 200.000 aktive Installationen in der WordPress-Community. Die Homepage des Themas hat 6 Abschnitte:

Seiteninhalt
Abschnitt Produktkategorien
Abschnitt Ausgewählte Produkte
Abschnitt „Neueste Produkte“.
Abschnitt mit den am besten bewerteten Produkten
Abschnitt zum Verkauf von Produkten
Abschnitt Meistverkaufte Produkte

Bevor wir jedoch zur Anpassung übergehen, müssen Sie die Homepage einrichten. Damit Sie Homepage-Abschnitte auf Ihrer Homepage anzeigen können, müssen Sie Ihrer Seite das Homepage-Template zuweisen.

Das Storefront-Design erstellt zusätzlich zu den standardmäßigen WooCommerce-Seiten automatisch zwei zusätzliche Seitenvorlagen. Sie sind Homepage und Volle Breite. Hier besprechen wir nur, wie Sie die Homepage-Vorlage einrichten können.

Homepage-Vorlage

Die Homepage-Vorlage bietet Ihnen eine großartige Möglichkeit, alle Ihre Produkte anzuzeigen und Ihnen einen Überblick über Produkte und Produktkategorien zu geben.

Besucher Ihres Shops landen beim Betreten Ihres Shops zunächst auf dieser Seite. Das Erscheinungsbild der Homepage ist sehr wichtig, da Besucher zu Käufern gemacht werden können, wenn es ansprechend ist.

Die Einrichtung ist ein Kinderspiel, da Sie nur Folgendes tun müssen:

Melden Sie sich als Administrator im Admin-Bereich Ihrer Website an.
Erstellen Sie eine neue Seite und fügen Sie einige anzuzeigende Inhalte hinzu .
Dann müssen Sie die „ Homepage “ aus dem Dropdown-Menü „Vorlagen“ im Metafeld „Seitenattribute“ auswählen, wie unten gezeigt:
Nachdem Sie diese Seite veröffentlicht haben, können Sie sie als Homepage festlegen, indem Sie zu den Einstellungen und dann zu Lesen navigieren.
Aktivieren Sie dann „ Eine statische Seite “ und wählen Sie dann die erstellte Homepage aus der Dropdown-Liste „ Startseite “ aus.
Nachdem Sie die Änderungen gespeichert haben, werden sie automatisch im Front-End widergespiegelt .

Sobald die Konfiguration abgeschlossen ist, sollte Ihre Homepage mehrere Abschnitte haben, wie unten gezeigt:

Startseite

Auf der Startseite werden verschiedene Cluster wie empfohlene Produkte, Fan-Favoriten, Produkte im Sale und Bestseller angezeigt. Die Art und Weise, wie diese Elemente angezeigt werden, entspricht der Reihenfolge im Backend.

Sobald die Homepage eingerichtet ist, können wir nun zur Anpassung kommen:

1. Bilder der Produktkategorien von der Homepage entfernen

WooCommerce ermöglicht es Ihnen, sowohl Produkte als auch Produktkategorien mit ihren Bildern auf der Homepage anzuzeigen. Wenn Sie jedoch bevorzugen, dass Kategorien nur als Text angezeigt werden, müssen Sie diese Zeile zur Datei functions.php Ihres Child-Themes hinzufügen. Fügen Sie es einfach am Ende der Datei function.php hinzu.

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

Hier ist das Ergebnis: Bilder der Produktkategorien von der Homepage entfernen

2. Ändern Sie den URL-Link im Logo

In der Regel verlinken WordPress-Themes die Homepage der Seite im Logo. Dies ist eine Standardfunktion für die meisten Websites, und Benutzer erwarten, dass sie jedes Mal, wenn sie auf das Logo klicken, zur Startseite zurückkehren können.

Was aber, wenn sich die Homepage an einem anderen Ort befindet? Das bedeutet, dass Sie die URL konfigurieren müssen, wenn wir einen benutzerdefinierten Link wünschen. Um dies zu ändern, müssen wir den folgenden Code zur Datei functions.php des Child-Themes hinzufügen:

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

Funktion custom_storefront_header () {

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

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

    Funktion custom_site_branding() {

        // Setzen Sie HIER den Link Ihres Logos oder Seitentitels

        $link = home_url( '/my-custom-link/' );

        ?>

        <div class="site-branding">

            <?php

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

                    $custom_logo_id = get_theme_mod( 'custom_logo' );

                    if ( $custom_logo_id ) {

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

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

                        if ( leer ( $ image_alt ) ) {

                            $custom_logo_attr['alt'] = get_bloginfo( 'name', 'display' );

                        }

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

                            esc_url($link),

                            wp_get_attachment_image( $custom_logo_id, 'full', false, $custom_logo_attr )

                        );

                    }

                    elseif ( is_customize_preview() ) {

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

                    }

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

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

                    $logo = site_logo()->logo;

                    $logo_id = get_theme_mod( 'benutzerdefiniertes_logo' );

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

                    $size = site_logo()->theme_size();

                    $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, $size, false, array(

                            'class' => 'Site-Logo-Anhang-' . $größe,

                            'Datengröße' => $Größe,

                            'itemprop' => 'logo'

                        ) )

                    );

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

                } anders {

                    $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( 'name' ) ) ). '</a></' . esc_attr( $tag ) .'>';




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

                        $html .= '<p class="site-description">' . esc_html( get_bloginfo( 'Beschreibung', 'Anzeige' ) ) . '</p>';

                    }

                }

                echo $html;

            ?>

        </div>

        <?php

    }

}

Der benutzerdefinierte Link geht in Zeile 7 '( '/my-custom-link/' );' , wo Sie Ihren benutzerdefinierten Link hinzufügen, indem Sie ihn durch „ my-custom-link “ ersetzen.

3. Entfernen Sie Kategorien vollständig von der Store-Homepage

Möglicherweise möchten Sie die Kategorien auf der Startseite vollständig entfernen. Diese Funktion entfernt einfach die Kategorien. Alles, was Sie tun müssen, ist, die folgenden Zeilen zur Datei functions.php hinzuzufügen:

 Funktion storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Hier ist das Ergebnis: Entfernen Sie Kategorien vollständig von der Store-Homepage

4. Entfernen Sie kürzlich verwendete Produkte von der Homepage Ihres Shops

Unmittelbar nachdem Sie ein neues Produkt hinzugefügt haben, wird es dem Abschnitt „ Neu in “ auf der Titelseite hinzugefügt. Dies ist eine Standardeinstellung im Storefront-Design. Wenn Sie jedoch ständig Produkte zu Ihrer Liste hinzufügen, können diese die Shop-Seite unübersichtlich machen. Darüber hinaus möchten Sie möglicherweise auch zusätzliche Informationen in diesem Abschnitt anzeigen.

Um diesen Abschnitt zu entfernen, fügen Sie einfach den folgenden Code zur function.php-Datei des untergeordneten Designs hinzu.

 Funktion storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Hier ist das Ergebnis: Entfernen Sie kürzlich verwendete Produkte von der Startseite Ihres Shops

5. Entfernen Sie die meistverkauften Produkte von der Shop-Homepage

Für einige Ladenbesitzer sind die meistverkauften Produkte möglicherweise keine wünschenswerte Funktion. Um den Bestseller-Abschnitt zu entfernen, fügen Sie einfach den folgenden Code zur function.php-Datei des Child-Themes hinzu.

 Funktion storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Hier ist das Ergebnis: Entfernen Sie die meistverkauften Produkte von der Shop-Homepage

6. Ausgewählte Produkte entfernen

Auf die gleiche Weise möchten Ladenbesitzer möglicherweise den Abschnitt mit den vorgestellten Produkten deaktivieren. Dies kann durch Hinzufügen des folgenden Code-Snippets zur Datei functions.php des Child-Themes erreicht werden:

 Funktion storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Hier ist das Ergebnis: Ausgewählte Produkte entfernen

7. So ändern Sie die Farbe der horizontalen Linien auf der Storefront-Homepage

Fügen Sie einfach den folgenden Code zur custom.css-Datei Ihres untergeordneten Designs hinzu:

 .page-template-template-homepage .hentry .entry-header,

.page-template-template-homepage .hentry,

.page-template-template-homepage .storefront-product-section {

Randfarbe: rot;

}

8. Hinzufügen eines Hintergrundbilds zur Storefront eines bestimmten Homepage-Abschnitts

Das standardmäßige Storefront-Design besteht aus sechs Abschnitten, nämlich Produktkategorien, aktuelle Produkte, vorgestellte Produkte, beliebte Produkte, im Angebot befindliche Produkte und meistverkaufte Produkte. Fügen Sie einfach den folgenden Code zur Datei style.css hinzu :

 .storefront-empfohlene-produkte{

background-image: url (Fügen Sie hier Ihre URL hinzu);

Hintergrundposition: Mitte Mitte;

Hintergrundwiederholung: keine Wiederholung;

Hintergrundgröße: Cover;

-o-Hintergrundgröße: Abdeckung;

}

Hier ist das Ergebnis:

9. Hinzufügen von Hintergrundfarbe zu Storefront-Homepage-Abschnitten

Vielleicht möchten Sie einem Homepage-Abschnitt eine Hintergrundfarbe hinzufügen. Dazu müssen Sie zuerst den Abschnitt identifizieren, dem Sie Farbe hinzufügen möchten. Dies kann einfach durch Hinzufügen des folgenden Codes zur Datei style.css erreicht werden :

 .storefront-empfohlene-produkte{

Hintergrundfarbe:#FFEB3B;

}

Hier ist das Ergebnis: Hinzufügen von Hintergrundfarbe zu Storefront-Homepage-Abschnitten

10. So entfernen oder verstecken Sie den Titel des Homepage-Abschnitts

Dazu müssen Sie zunächst den Abschnitt identifizieren, den Sie entfernen oder ausblenden möchten. Dies kann durch Hinzufügen des folgenden Codes zur Datei style.css erfolgen :

 .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;}

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

.storefront-meistverkaufte-produkte .section-title {display:none;}

Hier ist das Ergebnis: So entfernen oder verbergen Sie den Titel des Homepage-Abschnitts

11. So ändern Sie den Titel des Homepage-Bereichs

Dazu müssen Sie zunächst den Abschnitt identifizieren, dessen Titel Sie entfernen möchten. Diese Liste hilft Ihnen dabei, die Filter für den Abschnitt der Storefront-Homepage zu identifizieren:

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

Fügen Sie einfach den folgenden Code in die function.php-Datei des untergeordneten Designs ein:

 add_filter( 'storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Startseite Ausgewählte Produkte Titel

function custom_storefront_product_featured_title( $args ) {

$args['title'] = __( 'New Featured Products Title Here', 'storefront' );

gib $args zurück;

}

Hier ist das Ergebnis: So ändern Sie den Titel des Homepage-Abschnitts

12. So erhöhen Sie das Produktspaltenraster / die Spalte des Homepage-Abschnitts

Fügen Sie einfach die folgenden Codezeilen zur function.php-Datei des untergeordneten Designs hinzu.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );




// Ausgewählte Spalte Ausgewählte Produkte

Funktion custom_storefront_featured_product_per_row( $args ) {

$args['Spalten'] = 2;

gib $args zurück;

}

Hier ist das Ergebnis: So erhöhen Sie das Produktspaltenraster / die Spalte des Homepage-Abschnitts

13. So zeigen Sie weitere Kategorien auf der Homepage an

Fügen Sie einfach die folgenden Codezeilen zur function.php-Datei des untergeordneten Designs hinzu.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// Kategorie Produkte

Funktion custom_storefront_category_per_page( $args ) {

$args['Zahl'] = 4;

gib $args zurück;

}

Hier ist das Ergebnis: So zeigen Sie weitere Kategorien auf der Homepage an

14. So fügen Sie eine Beschreibung unter dem Titel des Homepage-Abschnitts hinzu

Fügen Sie einfach diesen Code zur Datei function.php des Child-Themes hinzu:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');




Funktion custom_storefront_product_featured_description(){ ?>

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

<?php echo "Abschnittsbeschreibung hier";?>

</p>

<?php }

Hier ist das Ergebnis: So fügen Sie eine Beschreibung unter dem Titel des Homepage-Abschnitts hinzu

15. So entfernen Sie den Abschnitt mit den am besten bewerteten Produkten von der Storefront-Homepage

Dazu gibt es zwei Möglichkeiten. Einer installiert ein Plugin, das Ihnen hilft, diesen Abschnitt zu entfernen. Sie können sich das Homepage Control Plugin ansehen. Wir werden uns die einfachere Möglichkeit ansehen, dies durch Code zu tun.

Sie können den Abschnitt jedoch einfach mit Haken entfernen. Dies geschieht durch einfaches Hinzufügen der folgenden Zeile zur Datei function.php des Child-Themes:

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

Darüber hinaus können Sie es entfernen, indem Sie den folgenden Code in der style.css-Datei oder im zusätzlichen CSS -Abschnitt hinzufügen:

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

Hier ist das Ergebnis: So entfernen Sie den Abschnitt mit den am besten bewerteten Produkten von der Storefront-Startseite

16. So ändern Sie den Abschnittstitel für am besten bewertete Produkte

Fügen Sie einfach diesen Code zur Datei function.php des Child-Themes hinzu:

 add_filter( 'storefront_popular_products_args', 'custom_storefront_product_popular_title');

// Startseite Ausgewählte Produkte Titel

function custom_storefront_product_popular_title( $args ) {

$args['title'] = __( 'Top-Produkte', 'storefront' );

gib $args zurück;

}

Hier ist das Ergebnis: So ändern Sie den Titel des Abschnitts mit den am besten bewerteten Produkten : Anpassung der Homepage des Storefront-Themas

17. So zeigen Sie mehr Produkte im Abschnitt mit den besten Bewertungen an

Die Standardeinstellung für Storefront zeigt 4 Produkte im Abschnitt „Am besten bewertet“ an. In diesem Beispiel werden wir es auf 12 Produkte erhöhen. Fügen Sie einfach diesen Code zur Datei function.php des Child-Themes hinzu:

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page' );




// Ausgewählte Ausgewählte Produkte pro Seite

function custom_storefront_top_product_per_page( $args ) {

$args['per_page'] = 12;

gib $args zurück;

}

Hier ist das Ergebnis:

So zeigen Sie mehr Produkte im Abschnitt mit den besten Bewertungen an: Anpassung der Homepage des Storefront-Themas

18. So entfernen Sie den Abschnitt für im Angebot befindliche Produkte von der Storefront-Homepage

Dazu gibt es zwei Möglichkeiten. Einer installiert ein Plugin, das Ihnen hilft, diesen Abschnitt zu entfernen. Sie können sich das Homepage Control Plugin ansehen. Für dieses Beispiel werde ich eine Codezeile verwenden.

Sie können den Abschnitt einfach mit Haken entfernen. Dies geschieht durch einfaches Hinzufügen der folgenden Zeile zur Datei function.php des Child-Themes:

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

Hier ist das Ergebnis: So entfernen Sie den Abschnitt „Angebotsprodukte“ von der Storefront-Homepage

19. Referenzen für Aktions-Hooks zur Anpassung der Storefront-Design-Homepage

Dies sind alle verfügbaren add_action()-Funktionen, die im Storefront-Design verwendet werden. Es hängt eine Funktion an einen Hook an, wie von do_action definiert

Header

Startseite
storefront_homepage – Executed inside <div class="col-full"> of the homepage content section

Produktkategorien

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

Kürzlich hinzugefügte Produkte

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

Ausgewählte Produkte

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

Beliebte Produkte

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

Produkte im Sale

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

Meistverkaufte Produkte

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

Storefront-Funktionen

Datei: /inc/storefront-functions.php

storefront_header_styles – filter the header styles
storefront_homepage_content_styles – filter the homepage content styles
Schaufensterklassen

Fazit

In diesem Artikel habe ich 18 verschiedene Ideen zur Anpassung der Homepage des Storefront-Themas hervorgehoben, die Sie für die Homepage des WooCommerce Storefront-Themas vornehmen können. Diese Anpassungen wurden getestet und funktionieren wie in den Screenshots gezeigt.

Wenn Sie ein WordPress-Anfänger sind und nicht wissen, wo Sie die Datei functions.php finden können, folgen Sie einfach diesen einfachen Schritten:

Melden Sie sich bei Ihrer WordPress-Site an und greifen Sie als Admin-Benutzer auf das Dashboard zu.
Klicken Sie im Dashboard-Menü auf Darstellungsmenü > Themen-Editor-Menü . Wenn die Seite Design- Editor geöffnet wird, suchen Sie nach der Datei mit den Designfunktionen, in der wir die Funktion hinzufügen werden.

So einfach ist das. In diesem Artikel über die Anpassung der Homepage des Storefront-Designs können Sie sehen, wie flexibel das Storefront-Design ist, und Sie können Filter und Hooks verwenden, um die gewünschte Anpassung vorzunehmen. Für zusätzliches Styling können Sie den Abschnitt „Zusätzliches CSS“ oder die Datei „style.css“ verwenden, in die Sie den CSS-Code eingeben.