Come modificare la pagina del negozio WooCommerce in modo programmatico (CSS e PHP)

Pubblicato: 2020-08-27

Cerchi modi per personalizzare la pagina del tuo negozio? In questo tutorial, ti mostreremo come modificare la pagina del negozio di WooCommerce in modo programmatico utilizzando sia PHP che CSS .

In qualsiasi negozio online, è fondamentale modificare e ottimizzare la pagina del negozio per aumentare i tassi di conversione. La pagina del negozio è dove mostri i tuoi prodotti e può creare o distruggere la tua attività. Se gestisci un negozio WooCommerce, ti consigliamo vivamente di personalizzare la pagina del negozio e sfruttarla al meglio. In questa guida, ti mostreremo come modificare la pagina del negozio WooCommerce in modo programmatico .

Perché è importante modificare la pagina del negozio in WooCommerce?

La pagina del negozio è una delle pagine più importanti di WooCommerce. È qui che mostri i tuoi prodotti ai tuoi visitatori in modo che possano avere un enorme effetto sulle prestazioni del tuo negozio. Una buona pagina del negozio può migliorare l'esperienza utente, aumentare i tassi di conversione e aiutarti a generare coinvolgimento degli utenti. Una cattiva pagina del negozio, d'altra parte, può fare l'esatto contrario e soffocare la tua attività.

Ecco perché devi ottimizzarlo per massimizzare le tue vendite . Puoi farlo con plug-in e page builder, ma se hai capacità di programmazione, creare la tua soluzione è la strada da percorrere.

Come modificare la pagina del negozio WooCommerce in modo programmatico

In precedenza abbiamo visto diversi metodi per personalizzare la pagina del negozio. Tuttavia, in questo tutorial, ci concentreremo su come modificare la pagina del negozio WooCommerce in modo programmatico utilizzando un po' di codice CSS e PHP. Vale la pena notare che in questa guida lavoreremo su un tema figlio e modificheremo anche il modello di negozio predefinito di WooCommerce. Ci concentreremo sui file modello WooCommerce e su alcuni riferimenti al file functions.php del tema figlio.

In questo tutorial imparerai come modificare la pagina del negozio WooCommerce in modo programmatico per:

Disabilita il modello di pagina del negozio WooCommerce predefinito
Personalizza intestazioni e contenuti
1. Prodotti più popolari
2. I prodotti più venduti
3. Più votati
4. Visualizza i prodotti per tassonomia
5. Personalizza la pagina del negozio WooCommerce in functions.php
Modifica il layout del ciclo dei prodotti e applica il foglio di stile CSS
1. Modifica il conteggio delle colonne predefinito per riga
2. Applica lo stile CSS alla pagina del negozio
Modifica i file di loop della pagina del negozio WooCommerce
1. Sostituisci il testo predefinito "vendita" per una gif animata
2. Rimuovere le opzioni di ordinamento e impaginazione

Prima che inizi

Tieni presente che la seguente guida prevede una codifica avanzata, quindi se non hai competenze tecniche, ti consigliamo di seguire questo altro tutorial .

Prima di iniziare, ti consigliamo anche di installare un tema figlio. Puoi consultare la nostra guida su come creare un tema figlio o utilizzare un plug-in per farlo in pochi clic. Inoltre, poiché cambierai i file principali, è una buona idea eseguire un backup completo del tuo sito.

Quindi ora, vediamo come personalizzare la pagina del negozio in WooCommerce con la codifica.

1. Disabilita il modello di pagina del negozio WooCommerce predefinito

Per personalizzare la pagina del negozio, ci sono due possibili approcci:

Puoi sovrascrivere il file WooCommerce responsabile della stampa della pagina del negozio
Aggiungi script personalizzati al file functions.php del tuo tema figlio usando gli hook WC

Puoi modificare il modello HTML di WooCommerce proprio come il file functions.php del tema figlio, sovrascrivendo i file principali per impedirne la cancellazione quando c'è un aggiornamento. Tuttavia, poiché le cose non funzionano esattamente come nel file functions.php se WooCommerce decide di aggiornare questi file, le tue personalizzazioni potrebbero non funzionare più.

Ma questo non è nulla di cui preoccuparsi. WooCommerce ne è consapevole, quindi aggiorna raramente i file modello in un modo che può interrompere i tuoi script. Il problema di lavorare con il file functions.php è che la pagina del negozio WooCommerce predefinita verrà ancora visualizzata dopo aver aggiunto i tuoi hook.

Quindi, prima di tutto, devi disabilitare la pagina del negozio di modelli WooCommerce predefinita per creare il tuo modello da zero .

Il file archive-product.php

In WooCommerce, il file responsabile dell'output nella pagina del negozio si chiama archive-product.php e puoi trovarlo nella cartella dei modelli di WooCommerce ( WooCommerce > Templates > archive-product.php ). Modifica la pagina del negozio WooCommerce in modo programmatico - Disabilita il modello di pagina del negozio

Per sovrascrivere questo file, devi copiarlo e incollarlo nella cartella WooCommerce nel tuo tema figlio come mostrato di seguito:

Ora, diamo un'occhiata al file archive-product.php modo da poter vedere come WooCommerce visualizza la pagina del negozio. Per farlo, apri il tuo ambiente di sviluppo integrato (IDE) preferito, vai alla cartella dei modelli del plugin WooCommerce e apri il file. Puoi modificarlo e giocarci, allo stesso modo in cui puoi personalizzare qualsiasi altro file modello WC.

Prima di farlo, assicurati di avere un backup del file originale per annullare eventuali modifiche, se necessario.

Nel file archive-product.php vedrai diverse funzioni do_action() . Queste funzioni vengono utilizzate per creare hook WooCommerce attualmente disponibili per la pagina del negozio. Per disabilitare completamente la pagina del negozio WooCommerce, è sufficiente eliminare il loop responsabile della stampa dei prodotti:

 se (wc_get_loop_prop('total')) {
    mentre (have_posts()) {
        il_post();
        do_action('woocommerce_shop_loop');
        wc_get_template_part('contenuto', 'prodotto');
    }
}

Puoi apportare più modifiche qui, ma per semplificare, elimineremo solo il ciclo e lasceremo tutto il resto così com'è. Se decidi di apportare più modifiche, tieni presente che se rimuovi alcune delle funzioni do_action() , lo shortcode corrispondente non funzionerà più su nessuna pagina del sito web.

Dopo aver eliminato il ciclo per la stampa dei prodotti, il file archive-product.php apparirà così:

 definito('ABSPATH') || Uscita;
get_header('negozio');
do_action('woocommerce_before_main_content');
se (woocommerce_product_loop()) {
    do_action('woocommerce_before_shop_loop');
    // qui abbiamo cancellato il ciclo
    do_action('woocommerce_after_shop_loop');
} altro {
    do_action('woocommerce_no_products_found');
}
do_action('woocommerce_after_main_content');
do_action('woocommerce_sidebar');
get_footer('negozio');

Questo è tutto! Hai disabilitato il modello di pagina del negozio predefinito e modificato la pagina del negozio WooCommerce in modo programmatico ! Ora hai una pagina del negozio vuota in modo da poter iniziare a progettare la tua.

2. Personalizza le intestazioni e il contenuto della pagina del negozio WooCommerce in modo programmatico

Il contenuto e le intestazioni possono essere qualsiasi markup HTML che può includere immagini, tabelle o collegamenti. O anche qualcosa come un contenitore vuoto per eseguire un file JavaScript esterno. Per questo, avrai bisogno di una conoscenza di base degli shortcode di WooCommerce, dal momento che li utilizzerai per visualizzare i prodotti nella pagina del negozio. Se non hai familiarità con gli shortcode WC, dai un'occhiata a questa guida.

Ora modifichiamo la pagina del negozio WC e mostriamo i prodotti in base alle tassonomie più popolari, più vendute, più votate. Inoltre, ti mostreremo come aggiungere alcuni titoli e contenuti al di fuori del ciclo.

2.1 Visualizza i prodotti più popolari

Per visualizzare i prodotti più popolari devi modificare il file archive-product.php del tuo tema figlio. Per prima cosa, usa il seguente shortcode

 [ products orderby="popularity" ]

Proprio dove si trovava il loop prima che lo cancellassi. # mostra i prodotti più popolari: 2 prodotti in 2 colonne

 do_action('woocommerce_before_shop_loop');
echo '<h1>PIÙ POPOLARE !!</h1>';
do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); do_action('woocommerce_after_shop_loop');

Nello shortcode, aggiungerai una classe chiamata m-popular , che potrai utilizzare in seguito quando applicherai gli stili. Nell'esempio sopra, lo impostiamo per visualizzare 2 prodotti in una singola riga di 2 colonne (colonne=”2″ limit=”2″) . Tieni presente che non puoi utilizzare gli shortcode qui nello stesso modo in cui li usi in un post o in una pagina.

È necessario utilizzare la funzione do_shortcode() affinché gli shortcode funzionino. Se tutto è andato bene, ora dovresti vedere questo nella pagina del negozio: pagina negozio personalizzata

2.2 I prodotti più venduti

Un altro modo per personalizzare il negozio WooCommerce in modo programmatico è ordinare i prodotti in base ai best-seller. Per questo, oltre a fare eco allo shortcode, aggiungerai del contenuto usando un semplice markup HTML ( <h1> ). Qui puoi aggiungere qualsiasi altro tipo di contenuto corrispondente al formato HTML corretto.

Mostriamo i prodotti più venduti, questa volta in un layout di 2 righe e 3 colonne. Per farlo, incollalo semplicemente subito dopo la echo do_shortcode() che hai inserito nel passaggio precedente 2.1:

 echo '<h1>Bestseller</h1>';
do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

E quello che ottieni è questo: pagina negozio personalizzata Se vuoi aggiungere solo i più venduti al posto dei prodotti più popolari, basta sostituire la linea echo in 2.1 con quella in 2.2.

2.3 I prodotti più votati

Ora, giochiamo ancora un po' con gli shortcode e mostriamo i prodotti più votati. Questa volta useremo uno shortcode senza più attributi di una classe.

 echo '<h1>Migliore</h1>';
do_shortcode('[ top_rated_products class="t-rated" ]');

Vediamo cosa succede dopo questo: pagina negozio personalizzata Come puoi vedere, il layout predefinito di WooCommerce ha 4 colonne. Lasciamo perdere così per ora, ci torneremo più tardi.

2.4 Visualizza i prodotti per tassonomia nella pagina del negozio

Oltre a visualizzare i prodotti più venduti o più votati, puoi anche visualizzarli per tassonomia. Ad esempio, il codice seguente stamperà i prodotti per le categorie Poster e Abbigliamento, utilizzando gli stessi attributi utilizzati in precedenza ma modificando il numero di colonne a 5.

 echo '<h1>Tassonomia dell'abbigliamento:</h1>';
do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Tassonomia dei poster:</h1>'; echo '<h2>Porta i migliori poster alla tua parete</h2>'; do_shortcode('[ products category="Posters" limit="4" class="t-posters" ]');

Ed ecco come dovrebbe apparire ora il tuo archive-product.php :

 <header class="woocommerce-products-header">
       <h1 class="woocommerce-products-header__title page-title"></h1>	
</intestazione>
<?php
se ( woocommerce_product_loop() ) {
	do_action('woocommerce_before_shop_loop');		
	
	echo '<h1>PIÙ POPOLARE !!</h1>';
        do_shortcode('[ products orderby="popularity" class="m-popular" columns="2" limit="2" ]'); echo '<h1>Bestseller</h1>'; do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]'); echo '<h1>Migliore</h1>'; do_shortcode('[ top_rated_products class="t-rated" ]'); echo '<h1>Tassonomia dell'abbigliamento:</h1>'; do_shortcode('[ products category="Clothing" columns="5" limit="10" class="t-clothing" ]'); echo '<h1>Tassonomia dei poster:</h1>; echo '<h2>Porta i migliori poster alla tua parete</h2>'; do_shortcode('[ products category="Posters" columns="2" limit="4" class="t-posters" ]'); do_action('woocommerce_after_shop_loop'); } altro {do_action('woocommerce_no_products_found'); } do_action( 'woocommerce_after_main_content' ); do_action('woocommerce_sidebar'); get_footer('negozio');

A questo punto, dovresti essere in grado di capire come utilizzare tutti gli shortcode di WooCommerce e i loro attributi per costruire una pagina del negozio personalizzata in grado di soddisfare qualsiasi esigenza di progettazione.

2.5 Personalizzare la pagina del negozio di WC in functions.php

Se vuoi personalizzare la pagina del negozio WooCommerce in modo programmatico, puoi anche modificare il file functions.php . Per i contenuti al di fuori del ciclo dei prodotti, puoi utilizzare alcuni degli hook visti nel file archive-product.php , eseguendoli dal file functions.php del tema figlio. In questo modo ti assicuri che i tuoi script funzionino ancora anche se WC decide di aggiornare i suoi file di template.

Per questo esempio, aggiungiamo un'intestazione personalizzata con un titolo, un sottotitolo, una descrizione e un banner. Incolla questo script nel file functions.php del tema figlio:

 add_action('woocommerce_before_shop_loop','shop_main_heading');
funzione negozio_intestazione_principale(){
	$contenuto = '';
	$content.='<h1>Benvenuto nella mia favolosa pagina del negozio!</h1>'; 
	$content.='<h2>Costruito con amore da me stesso</h2>';
	$content.='<p>Grazie per essere passato e aver visitato la pagina del negozio del mio sito web, per favore sfoglia i tuoi prodotti più apprezzati e acquistali tutti</p>';
	$content.='<img src="https://www.carpetright.co.uk/globalassets/static-pages/useful-links/samples/sample-banner.jpg"/>';
	eco $contenuto;
}

Ecco come apparirà la tua pagina del negozio: pagina negozio personalizzata Allo stesso modo, puoi utilizzare l'hook woocommerce_after_shop_loop per visualizzare alcuni contenuti alla fine della pagina del negozio.

3. Modifica il numero di prodotti per riga e applica un foglio di stile CSS alla pagina del negozio WC

A questo punto, dovresti essere in grado di visualizzare i prodotti, ordinarli per funzionalità, tassonomie, best-seller e qualsiasi altro modo desideri utilizzando gli shortcode di WooCommerce. Inoltre, dovresti essere in grado di inserire qualsiasi tipo di contenuto in qualsiasi punto desideri sulla pagina del tuo negozio. Ma cosa accadrebbe se potessi andare ancora oltre e portare la pagina del tuo negozio al livello successivo? Puoi modificare il layout del modello e aggiungere alcuni stili CSS per personalizzare ulteriormente la pagina del tuo negozio WooCommerce in modo programmatico.

3.1 Modifica il conteggio delle colonne predefinito per riga

Se specifichi l'attributo della colonna dello shortcode WC, puoi impostare il numero di prodotti che ciascuna riga visualizzerà. Inoltre, puoi impostare il numero totale di prodotti per lo shortcode con l'attributo limit:

 [ product orderby=”popularity” columns=”3” limit=”3” ]

Tuttavia, se non si definisce l'attributo colonne, è possibile impostare il numero di prodotti che si desidera stampare per ogni riga utilizzando questo script nel file functions.php del tema figlio.

 add_filter('loop_shop_columns', 'loop_columns', 999);
if (!function_exists('loop_columns')) {
    funzione ciclo_colonne() {
        restituire 4 ;//4 prodotti per riga
    }
}

Questo cambierà il numero predefinito di prodotti visualizzati per riga solo se non è presente un attributo di colonna nello shortcode WooCommerce.

3.2 Applicare alcuni stili CSS alla pagina del negozio

Per applicare alcuni CSS alla pagina del negozio di WooCommerce, puoi semplicemente aggiungere i tuoi script nel file modello in questo modo:

 <stile>
* {
    colore di sfondo:#a2bcff;
}
</stile>

Questo va bene per piccoli pezzi di CSS ma non è una pratica consigliata. Per applicare lo stile CSS in modo WordPress, devi utilizzare l'hook wp_enqueue_scripts per caricare i tuoi script da un file diverso.

Per questo esempio, chiameremo questo file shop_style.css e lo memorizzeremo nella nostra cartella principale del tema figlio, allo stesso livello di gerarchia del file style.css predefinito. Dopo aver creato questo file, incolla il seguente script nel tuo file functions.php :

 add_action( 'wp_enqueue_scripts', 'quadlayers_enqueue_css' );
funzione quadlayers_enqueue_css(){    
    if( is_shop() ) :
    wp_enqueue_style( 'checkout_style',
        get_stylesheet_directory_uri() . '/shop_style.css'
    );
    finisci se;
}

Come puoi vedere, il condizionale if(is_shop()): deve essere true per accodare il file shop_style.css . In questo file avrai tutti gli script di stile che vuoi applicare solo alla pagina del negozio . Questo è diverso dal file style.css nel tema figlio che applicherà gli script all'intero frontend del sito web. Per questa guida, useremo il seguente file shop_style.css ma sentiti libero di usare i tuoi script CSS o di cambiarlo:

 div.storefront-sorting:nth-child(2){
	allineamento testo:centro;
} 
#main div.storefront-sorting h1{
	stile carattere:normale;
}
#principale h1,#principale h2{
	font-weight: grassetto;
	stile del carattere: obliquo;
	allineamento testo:centro;
}
#main > .m-popular,#main > .b-seller,#main > .t-rated,#main > .t-clothing,#main > .t-poster{	
	bordo: solido #b8b8b8 1px;
	raggio di confine: 25px;
	margine inferiore: 25px;
	imbottitura superiore: 35px;	
	riempimento a sinistra: 20px;
	riempimento a destra: 20px;	
} 
#principale > .m-popolare{
	colore di sfondo:#dbad97;	
}
#principale > .b-venditori {
	colore di sfondo:#b4e6a3;
}
#principale > .t-rated {
	colore di sfondo:#f0f695;	
}
#principale > .t-abbigliamento {
	colore di sfondo:#95b4f6;	
}
#main > .t-poster {
	colore di sfondo:#c88fe5;	
}

Nel file CSS troverai alcuni selettori che contengono classi personalizzate. Li abbiamo creati prima di creare gli shortcode. Ad esempio, abbiamo aggiunto la classe "b-seller" nello shortcode in questo modo:

 do_shortcode('[ best_selling_products limit="9" columns="3" class="b-sellers" ]');

Quindi, dopo aver aggiunto lo stile CSS alla pagina del negozio di WooCommerce, otterrai qualcosa del genere (fai clic sull'immagine per vederla a grandezza naturale): Clicca sull'immagine per vederla a grandezza naturale

Clicca sull'immagine per vederla a grandezza naturale.

Inoltre, tieni presente che abbiamo il tema StoreFront attivo e, come forse saprai, i selettori CSS possono essere diversi su ogni sito web anche se hanno lo stesso tema. Quindi, per far funzionare questo file, potresti dover modificare i selettori per il tuo sito specifico.

BONUS : Come modificare il numero di prodotti per pagina

Ora, supponiamo che tu voglia modificare il numero di prodotti che visualizzi per pagina nella pagina del negozio. Se vuoi ad esempio visualizzare 10 prodotti per pagina, aggiungi semplicemente il seguente codice al file functions.php :

 add_filter( 'loop_shop_per_page', 'new_loop_shop_per_page', 20 );

funzione new_loop_shop_per_page($cols) {
  $ colonne = 10;
  restituisci $cols;
}

Dove $cols contiene il numero di prodotti per pagina che prende il valore da Opzioni -> Lettura e restituisce il numero di prodotti che desideri visualizzare su ogni pagina.

4. Modifica i file di loop della pagina del negozio WooCommerce

Finora, abbiamo visto come modificare il file modello archive-product.php per personalizzare la pagina del negozio WooCommerce in modo programmatico. Questo file è dove viene eseguito il ciclo WC per visualizzare tutti i prodotti della pagina. Ora apri la cartella del plug-in WooCommerce nell'editor del plug-in o nel tuo IDE e apri la cartella del ciclo. Lo troverai allo stesso livello del file archive-product.php .

Nella cartella loop, troverai alcuni file che puoi anche modificare per personalizzare ancora di più la pagina del negozio. Per sovrascrivere questo file, devi creare una cartella e un file clonati nel tuo tema figlio. Crea una nuova cartella chiamata loop sotto la cartella WooCommerce creata in precedenza.

Dopodiché, copia il file sale-flash.php originale dai modelli di plugin e incollalo all'interno di questa cartella di loop nel tuo tema figlio. Utilizzeremo il file sale-flash.php per aggiungere una gif animata a tutti i prodotti in vendita. Se dai un'occhiata al file, vedrai che questo è lo script responsabile della visualizzazione del messaggio "SALDI" quando un prodotto è in vendita.

4.1 Sostituisci il testo predefinito "vendita" per una gif animata

In questa sezione, ti mostreremo come disabilitare il messaggio di vendita predefinito e sostituirlo con una gif animata. Devi modificare il file flash-sale.php del tuo tema figlio in modo che assomigli a questo:

 definito('ABSPATH') || Uscita;
$post globale, $prodotto;
se ( $prodotto->è_in_vendita() ) { 
   $an_gif = '<img src="https://i1.wp.com/tamingchaos.net/wp-content/uploads/2020/04/Sale-Gif.gif" width="100px" height="60px"/ >';
   eco $an_gif;
}

Lì puoi sostituire il file gif con qualsiasi altra gif che ti piace.

4.2 Rimuovere le opzioni di ordinamento e impaginazione

Ora, diamo un'occhiata a come disabilitare il selettore "ordina per" e la funzionalità di impaginazione nella pagina del negozio di WooCommerce. Simile a quello che hai fatto con il file sale-flash.php , puoi ottenere ciò semplicemente salvando un file vuoto con lo stesso nome.

Crea entrambi i file nella cartella loop e chiamali orderby.php e pagination.php . Per disabilitare completamente entrambi i file, devi solo inserire questo script in ciascuno dei file:

 definito('ABSPATH') || Uscita;

Dopo aver fatto ciò, avrai un'intestazione e un piè di pagina più puliti nella pagina del tuo negozio. Inoltre, l'impaginazione potrebbe non essere molto utile poiché stai visualizzando un gran numero di prodotti. modifica la pagina del negozio WooCommerce in modo programmatico - Ordinamento e impaginazione Nota che nel file sale-flash.php abbiamo eliminato il comportamento predefinito di WooCommerce e aggiunto il nostro che mostra una gif animata. Questo è un compito molto semplice, ma questa tecnica offre un'ampia gamma di possibilità per gli sviluppatori avanzati.

NOTE FINALI

I file modello WC del tema figlio non impediscono la sovrascrittura se WooCommerce decide di rilasciare un aggiornamento dei modelli. Tuttavia, questo accade raramente.
Questi sono script di esempio e non devono essere messi in produzione, sono destinati solo a scopi didattici.

Bonus: mostra le categorie nella pagina del negozio WooCommerce

Infine, vediamo come puoi aggiungere categorie alla pagina del negozio WooCommerce usando un po' di codice. Questo metodo è consigliato agli utenti con capacità di programmazione. Oltre a PHP, si consiglia di conoscere anche un po' di CSS per poter dare uno stile al codice.

NOTA : prima di iniziare, assicurati di eseguire il backup del tuo sito e di creare un tema figlio se non ne hai già uno.

Aggiungi Categorie alla pagina Negozio

Nella dashboard, vai su Aspetto > Editor temi e apri il file functions.php del tema figlio. Fai clic sul file functions.php nella barra laterale dei file del tema a destra e incolla i seguenti script per aggiungere le tue funzioni personalizzate.

La funzione sottostante aggiungerà le tue categorie di prodotti prima di caricare gli altri elementi della tua pagina Shop. Ciò significa che gli acquirenti vedranno tutte le categorie di prodotti prima del catalogo prodotti.

 funzione prodotto_sottocategorie($args = array() ) {
$parentid = get_queried_object_id();

$args = array(
'genitore' => $parentid
);

$terms = get_terms( 'product_cat', $args );

se ( $ termini ) {
echo '<ul class="product-cats">';

foreach ( $ termini come $ termine ) {
echo '<li class="categoria">'; 
woocommerce_subcategory_thumbnail($termine);
eco '<h2>';
echo '<a href="' .esc_url( get_term_link($term )). '" class="' . $term->slug . '">';
eco $termine->nome;
eco '</a>';
eco '</h2>';
eco '</li>';
}

eco '</ul>';
}

}

add_action('woocommerce_before_shop_loop', 'product_subcategories', 50);

Questa funzione aggiungerà le tue Categorie alla pagina del Negozio WooCommerce. Tuttavia, tieni presente che potrebbero non apparire esattamente come desideri, quindi dovrai modellare la nuova sezione delle categorie con un po' di CSS. Per ulteriori informazioni a riguardo, dai un'occhiata al nostro post su come visualizzare e stilizzare le categorie nella pagina del negozio.

Conclusione

Tutto sommato, la pagina del negozio è estremamente importante e può creare o distruggere il tuo negozio. Ecco perché se hai capacità di programmazione, ti consigliamo di modificare la pagina del negozio WooCommerce in modo programmatico e ottimizzarla per aumentare i tuoi tassi di conversione.

In questa guida, ti abbiamo mostrato come aggiungere, rimuovere e personalizzare diversi aspetti del tuo negozio. Tuttavia, questi sono solo alcuni esempi e idee che potrebbero aiutarti a trovare ispirazione e portare il tuo negozio al livello successivo. Ora è il momento per te di giocare e sviluppare le tue personalizzazioni.

Per ulteriori guide per personalizzare il tuo negozio WooCommerce, ti consigliamo di controllare:

Aggiungi al carrello WooCommerce AJAX
Come aggiungere campi personalizzati alla pagina di pagamento?
WooCommerce aggiungi al carrello la funzione in modo programmatico

Infine, se vuoi connettere Facebook Shop con WooCommerce, dovresti dare un'occhiata a questa guida completa. Hai personalizzato il tuo negozio online? Cosa hai cambiato? Se hai domande, lascia un commento qui sotto e faremo del nostro meglio per aiutarti! Puoi anche controllare il codice completo in Github.