Personalizzazione della home page del tema WooCommerce Storefront [Guida definitiva]

Pubblicato: 2020-09-22

Guida alla personalizzazione della home page di WooCommercer Storefront La personalizzazione della home page del tema Storefront è fondamentale per qualsiasi negozio online creato con il tema WooCommerce della vetrina. La personalizzazione è necessaria poiché un buon design attira visitatori nel tuo negozio, crea fiducia nei clienti nel tuo marchio e li converte in clienti fedeli.

In questo tutorial, mostrerò alcune semplici personalizzazioni della home page che puoi implementare nella tua home page del tema della vetrina, per renderla più accattivante e migliorare l'esperienza utente generale, che è ugualmente utile per migliorare l'ottimizzazione dei motori di ricerca.

Prima di creare qualsiasi personalizzazione sul tema di Storefront, è consigliabile creare prima il tema figlio di Storefront per evitare di perdere le modifiche quando il tema principale viene aggiornato. Se vuoi anche fare più personalizzazione sul tema Storefront, puoi dare un'occhiata a questa guida alla personalizzazione di Storefront che ho condiviso in un post precedente.

Personalizzazione della home page del tema Storefront

homepage

Il tema WooCommerce Storefront ha più di 200.000 installazioni attive nella community di WordPress. La homepage del tema ha 6 sezioni:

Contenuto della pagina
Sezione Categorie di prodotti
Sezione Prodotti in evidenza
Sezione Prodotti recenti
Sezione dei prodotti più votati
Sezione prodotti in vendita
Sezione prodotti più venduti

Tuttavia, prima di passare alla personalizzazione, è necessario configurare la home page. Per poter visualizzare le sezioni della home page sulla tua home page, devi assegnare il modello della home page alla tua pagina.

Il tema Storefront crea automaticamente due modelli di pagina aggiuntivi, oltre alle pagine WooCommerce predefinite. Sono Homepage e Larghezza intera. Qui ci limiteremo a discutere di come impostare il modello di home page.

Modello di pagina iniziale

Il modello Homepage ti offre un ottimo modo per visualizzare tutti i tuoi prodotti, offrendoti una panoramica dei prodotti e delle categorie di prodotti.

I visitatori del tuo negozio atterreranno prima su questa pagina quando accedono al tuo negozio. L'aspetto della home page è molto importante perché i visitatori possono essere convertiti in acquirenti se è attraente.

Configurarlo è un gioco da ragazzi perché devi solo:

Accedi al pannello di amministrazione del tuo sito come amministratore .
Crea una nuova pagina e aggiungi del contenuto da visualizzare.
Quindi, dovrai selezionare la " Pagina iniziale " dal menu a discesa dei modelli nella meta casella Attributi della pagina come mostrato di seguito:
Dopo aver pubblicato questa pagina, puoi impostarla come home page navigando su Impostazioni e poi su Lettura .
Dovrai quindi selezionare ' Una pagina statica ' e quindi selezionare la home page creata dal menu a discesa ' Home page '.
Dopo aver salvato le modifiche, queste si rifletteranno automaticamente sul front-end .

Una volta completata la configurazione, la tua home page dovrebbe avere più sezioni come mostrato di seguito:

homepage

Nella home page vengono visualizzati diversi cluster come prodotti consigliati, preferiti dai fan, prodotti in saldo e best seller. Il modo in cui questi elementi vengono visualizzati è lo stesso dell'ordine nel back-end.

Una volta impostata la Homepage, ora possiamo arrivare alla personalizzazione:

1. Rimuovere le immagini delle categorie di prodotti dalla home page

WooCommerce ti consente di visualizzare i prodotti e le categorie di prodotti con le loro immagini sulla home page. Tuttavia, se preferisci che le categorie vengano visualizzate come solo testo, devi aggiungere questa riga al file functions.php del tuo tema figlio. Basta aggiungerlo alla fine del file function.php.

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

Ecco il risultato: Rimuovi le immagini delle categorie di prodotti dalla home page

2. Modificare il collegamento URL nel logo

In generale, i temi WordPress collegano la home page del sito nel logo. Questa è una funzione standard per la maggior parte dei siti Web e gli utenti si aspettano di poter tornare alla home page ogni volta che fanno clic sul logo.

Tuttavia, cosa succede se la home page si trova in una posizione diversa? Ciò significa che devi configurare l'URL se vogliamo un collegamento personalizzato. Per cambiarlo, dobbiamo aggiungere il seguente codice al file functions.php del tema figlio:

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

funzione custom_storefront_header () {

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

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

    funzione custom_site_branding() {

        // QUI imposta il link del tuo logo o titolo del sito

        $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' );

                    se ( $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);

                        se ( vuoto ( $ immagine_alt ) ) {

                            $custom_logo_attr['alt'] = get_bloginfo( 'nome', 'visualizzazione');

                        }

                        $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 = è_front_page() ? '<h1 class="logo">' . $logo. '</h1>' : $logo;

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

                    $logo = sito_logo()->logo;

                    $logo_id = get_theme_mod('custom_logo');

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

                    $dimensione = logo_sito()->dimensione_tema();

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

                            'class' => 'site-logo attachment-' . $ taglia,

                            'dimensione-dati' => $dimensione,

                            'itemprop' => 'logo'

                        ) )

                    );

                    $html = applica_filtri('jetpack_the_site_logo', $html, $logo, $dimensione);

                } altro {

                    $tag = è_front_page() ? 'h1' : 'div';




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




                    se ( '' !== get_bloginfo( 'descrizione' ) ) {

                        $html .= '<p class="descrizione-sito">' . esc_html( get_bloginfo( 'description', 'display' ) ) . '</p>';

                    }

                }

                eco $html;

            ?>

        </div>

        <?php

    }

}

Il collegamento personalizzato va sulla riga 7 '( '/my-custom-link/' );' , dove aggiungerai il tuo link personalizzato sostituendolo con " my-custom-link ".

3. Rimuovere completamente le categorie dalla home page del negozio

Potresti voler rimuovere completamente le categorie sulla home page. Questa funzione rimuove semplicemente le categorie. Tutto quello che devi fare è aggiungere le seguenti righe al file functions.php:

 funzione storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Ecco il risultato: Rimuovere completamente le categorie dalla home page del negozio

4. Rimuovi i prodotti recenti dalla home page del tuo negozio

Immediatamente dopo aver aggiunto un nuovo prodotto, questo viene aggiunto alla sezione ' Nuovo in ' in prima pagina. Questa è un'impostazione predefinita nel tema Storefront. Tuttavia, se aggiungi costantemente prodotti alla tua lista, potrebbero ingombrare la pagina del negozio. Inoltre, potresti anche voler visualizzare informazioni aggiuntive in questa sezione.

Per rimuovere questa sezione, aggiungi semplicemente il seguente codice al file function.php del tema figlio.

 funzione storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Ecco il risultato: Rimuovi i prodotti recenti dalla home page del tuo negozio

5. Rimuovere i prodotti più venduti dalla home page del negozio

Per alcuni proprietari di negozi, i prodotti più venduti potrebbero non essere una caratteristica desiderabile. Per rimuovere la sezione più venduta, aggiungi semplicemente il seguente codice al file function.php del tema figlio.

 funzione storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Ecco il risultato: Rimuovi i prodotti più venduti dalla home page del negozio

6. Rimuovere i prodotti in evidenza

Allo stesso modo, i proprietari dei negozi potrebbero voler disabilitare la sezione dei prodotti in primo piano. Questo può essere fatto aggiungendo il seguente frammento di codice al file functions.php del tema figlio:

 funzione storefront_child_reorder_homepage_contant() {

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

}

add_action('init', 'storefront_child_reorder_homepage_contant');

Ecco il risultato: Rimuovi i prodotti in evidenza

7. Come modificare il colore delle linee orizzontali sulla home page di Storefront

Aggiungi semplicemente il seguente codice al file custom.css del tuo tema figlio:

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

.page-template-template-homepage .hentry,

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

colore del bordo: rosso;

}

8. Aggiunta di un'immagine di sfondo alla vetrina di una particolare sezione della home page

Il tema Storefront predefinito ha sei sezioni: categorie di prodotti, prodotti recenti, prodotti in primo piano, prodotti popolari, prodotti in vendita e prodotti più venduti. Aggiungi semplicemente il seguente codice al file style.css :

 .prodotti in vetrina{

background-image: url(Aggiungi il tuo URL qui);

posizione di sfondo: centro centro;

background-repeat: no-repeat;

dimensione dello sfondo: copertina;

-o-dimensione-sfondo: copertina;

}

Ecco il risultato:

9. Aggiunta del colore di sfondo alle sezioni della home page di Storefront

Potresti voler aggiungere un colore di sfondo a una sezione della home page. Per fare ciò devi prima identificare la sezione a cui vuoi aggiungere il colore. Questo può essere fatto facilmente aggiungendo il seguente codice al file style.css :

 .prodotti in vetrina{

colore di sfondo:#FFEB3B;

}

Ecco il risultato: Aggiunta del colore di sfondo alle sezioni della home page di Storefront

10. Come rimuovere o nascondere il titolo della sezione della home page

Per fare ciò devi prima identificare la sezione che vuoi rimuovere o nascondere. Questo può essere fatto aggiungendo il seguente codice al file 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;}

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

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

Ecco il risultato: Come rimuovere o nascondere il titolo della sezione della home page

11. Come modificare il titolo della sezione della home page

Per fare ciò è necessario prima identificare la sezione di cui si desidera rimuovere il titolo. Questo elenco ti aiuterà a identificare i filtri della sezione della home page della vetrina:

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

Aggiungi semplicemente il seguente codice nel file function.php del tema figlio:

 add_filter( 'storefront_featured_products_args', 'custom_storefront_product_featured_title');

// Titolo dei prodotti in primo piano in prima pagina

funzione custom_storefront_product_featured_title($args) {

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

restituisce $args;

}

Ecco il risultato: Come modificare il titolo della sezione della home page

12. Come aumentare la griglia/colonna della colonna del prodotto della sezione della home page

Aggiungi semplicemente le seguenti righe di codice al file function.php del tema figlio.

 add_filter('storefront_featured_products_shortcode_args','custom_storefront_featured_product_per_row' );




// Colonna Prodotti in evidenza

funzione custom_storefront_featured_product_per_row($args) {

$args['colonne'] = 2;

restituisce $args;

}

Ecco il risultato: Come aumentare la griglia/colonna della colonna del prodotto della sezione della home page

13. Come visualizzare più categorie sulla home page

Aggiungi semplicemente le seguenti righe di codice al file function.php del tema figlio.

 add_filter('storefront_product_categories_shortcode_args','custom_storefront_category_per_page' );




// Categoria Prodotti

funzione custom_storefront_category_per_page($args) {

$args['numero'] = 4;

restituisce $args;

}

Ecco il risultato: Come visualizzare più categorie sulla home page

14. Come aggiungere una descrizione sotto il titolo della sezione della home page

Aggiungi semplicemente questo codice al file function.php del tema figlio:

 add_action('storefront_homepage_after_featured_products_title', 'custom_storefront_product_featured_description');




funzione custom_storefront_product_featured_description(){ ?>

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

<?php echo "Descrizione sezione qui";?>

</p>

<?php }

Ecco il risultato: Come aggiungere una descrizione sotto il titolo della sezione della home page

15. Come rimuovere la sezione dei prodotti più votati dalla home page di Storefront

Ci sono due modi per farlo. Uno sta installando un plugin che ti aiuterà a rimuovere questa sezione. Puoi dare un'occhiata al plugin per il controllo della home page . Esamineremo il modo più semplice per farlo attraverso il codice.

Tuttavia, puoi semplicemente rimuovere la sezione usando i ganci. Questo viene fatto semplicemente aggiungendo la seguente riga al file function.php del tema figlio:

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

Inoltre, puoi rimuoverlo aggiungendo il codice seguente nel file style.css o nella sezione CSS aggiuntivo :

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

Ecco il risultato: Come rimuovere la sezione dei prodotti più votati dalla home page di Storefront

16. Come modificare il titolo della sezione dei prodotti più votati

Aggiungi semplicemente questo codice al file function.php del tema figlio:

 add_filter( 'storefront_popular_products_args', 'custom_storefront_product_popular_title');

// Titolo dei prodotti in primo piano in prima pagina

funzione custom_storefront_product_popular_title($args) {

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

restituisce $args;

}

Ecco il risultato: Come modificare il titolo della sezione dei prodotti più votati: personalizzazione della home page del tema Storefront

17. Come visualizzare più prodotti nella sezione più votata

L'impostazione predefinita per Storefront mostra 4 prodotti nella sezione I più votati. In questo esempio, lo aumenteremo a 12 prodotti. Aggiungi semplicemente questo codice al file function.php del tema figlio:

 add_filter('storefront_popular_products_shortcode_args','custom_storefront_top_product_per_page' );




// Prodotti in primo piano per pagina

funzione custom_storefront_top_product_per_page($args) {

$args['per_page'] = 12;

restituisce $args;

}

Ecco il risultato:

Come visualizzare più prodotti nella sezione più votata: personalizzazione della home page del tema Storefront

18. Come rimuovere la sezione dei prodotti in vendita dalla home page di Storefront

Ci sono due modi per farlo. Uno sta installando un plugin che ti aiuterà a rimuovere questa sezione. Puoi dare un'occhiata al plugin per il controllo della home page . Per questo esempio, userò una riga di codice.

Puoi semplicemente rimuovere la sezione usando i ganci. Questo viene fatto semplicemente aggiungendo la seguente riga al file function.php del tema figlio:

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

Ecco il risultato: Come rimuovere la sezione dei prodotti in vendita dalla home page di Storefront Personalizzazione della home page del tema di Storefront

19. Riferimenti degli hook di azione di personalizzazione della home page del tema della vetrina

Queste sono tutte le funzioni add_action() disponibili utilizzate sul tema Storefront. Allega una funzione a un hook come definito da do_action

Intestazione

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

Categorie di Prodotto

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

Prodotti recenti

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

Prodotti sponsorizzati

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

Prodotti popolari

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

Prodotti in saldo

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

I prodotti più venduti

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

Funzioni di vetrina

File: /inc/storefront-functions.php

storefront_header_styles – filter the header styles
storefront_homepage_content_styles – filter the homepage content styles
Classi in vetrina

Conclusione

In questo articolo, ho evidenziato 18 diverse idee per la personalizzazione della home page del tema Storefront che puoi realizzare per la home page del tema WooCommerce Storefront. Queste personalizzazioni sono state testate e funzionano come mostrato negli screenshot.

Se sei un principiante di WordPress e non sai dove trovare il file functions.php, segui semplicemente questi semplici passaggi:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina Editor del tema , cerca il file delle funzioni del tema in cui aggiungeremo la funzione.

È così semplice. Da questo articolo sulla personalizzazione della home page del tema Storefront, puoi vedere come il tema Storefront è flessibile e puoi utilizzare filtri e hook per effettuare la personalizzazione che desideri. Per uno stile aggiuntivo, puoi utilizzare la sezione CSS aggiuntivo o il file style.css in cui inserirai il codice CSS.