Da quando WordPress ha integrato l’editor Gutenberg è diventato molto più semplice creare pagine che abbiano un layout bello ed articolato, e se consideriamo che WooCommerce mette a disposizione un grandissimo numero di blocchi da poter utilizzare, il gioco è praticamente fatto!
Se si vuole però personalizzare la pagina principale del negozio, allora qui iniziano un po’ di problemi. Questo perché WooCommerce prevede per quella pagina esclusivamente il classico layout a griglia, personalizzabile nei contenuti ma non nella struttura. Attraverso il configuratore che trovate in “Aspetto > Personalizza > WooCommerce > Catalogo Prodotti” potremo scegliere se visualizzare i prodotti, le categorie, o entrambe le cose ma non esiste per quella pagina la possibilità di applicare un template personalizzato, cosa che è invece possibile per tutte le altre pagine di WordPress.
Come rimuovere il loop dei prodotti solamente dalla pagina Negozio
Per poter modificare il layout della pagina Negozio avremo bisogno di pasticciare un pochino con il codice php del file “functions.php”. Niente di troppo complesso, noi lo abbiamo fatto e in questo articolo vi spieghiamo tutto passo per passo. Vedrete che con poche righe di codice la pagina Negozio del vostro ecommerce potrà avere il look and feel che più preferite, diversificandosi dalle pagine “standard” che ormai vediamo su quasi tutti i siti WooCommerce.
Visto che il nostro obiettivo è quello di rinunciare alla griglia standard dei prodotti per elaborarne uno più “creativo”, come prima cosa dobbiamo rimuovere il loop che inserisce i prodotti nella pagina del negozio. Tra tutti i file che compongono il layout di un tema WooCommerce non ne esiste uno che si occupi esclusivamente di quella pagina, visto che il file “templates/archive-product.php” viene utilizzato sia dalla pagina del Negozio (quella che nelle impostazioni di WooCommerce viene indicata come “Pagina negozio”) che dalla pagina di categoria.
Per fare in modo che i prodotti spariscano solo dalla pagina del negozio e non da quelle di categoria possiamo creare una funzione che azzeri il conteggio dei prodotti (perché questo funzioni occorre che in “Aspetto > Personalizza > WooCommerce > Catalogo Prodotti” si sia scelto “Mostra prodotti”).
function remove_products_from_shop_page( $q ) {
if ( ! $q->is_main_query() ) return;
if ( ! $q->is_post_type_archive() ) return;
if ( ! is_admin() && is_shop() ) {
$q->set( 'post__in', array(0) );
}
remove_action( 'pre_get_posts', 'remove_products_from_shop_page' );
}
add_action( 'pre_get_posts', 'remove_products_from_shop_page' );L’aver azzerato il numero dei prodotti farà si che WooCommerce visualizzi il messaggio di prodotti non trovati, per cui, solo per la pagina Negozio (individuabile per mezzo della condizione is_shop) andiamo a rimuovere quell’avviso. Scegliete voi se rimuovere anche la sidebar per avere una pagina ancora più pulita, noi nell’esempio lo abbiamo fatto.
add_action( 'woocommerce_no_products_found', function() {
if( is_shop() ) {
remove_action( 'woocommerce_no_products_found', 'wc_no_products_found', 10 );
remove_action('woocommerce_sidebar', 'woocommerce_get_sidebar');
}
}, 9 );Utilizzare CSS specifici esclusivamente per la pagina Negozio
Potrebbe tornarvi utile utilizzare classi CSS specifiche per la pagina del Negozio, ma WooCommerce non prevede una distinzione per un caso come questo, per questo motivo la seguente funzione aggiungere una classe al tag <body> di quella pagina. A noi ad esempio è tornato comodo per ridimensionare a tutta larghezza l’area dei contenuti , visto che avevamo pensato di rimuovere la sidebar:
body.negozio #main #content { width:100% }Sbizzarrirsi nell’impaginazione con i blocchi Gutenberg di WooCommerce
Ora che la pagina del vostro negozio WooCommerce è una tela completamente ripulita potete, attraverso i blocchi di Gutenberg che WooCommerce vi mette a disposizione, creare una pagina dal layout completamente personalizzato. Fino a qui è stato semplice no? Ora lasciamo a voi la parte creativa e divertente!