Creare un catalogo di prodotti con Betheme e WooCommerce

Betheme è uno tra i temi premium per WordPress più utilizzati ed è compatibile con tutte le funzionalità offerte da WooCommerce. Il sistema eCommerce, mediante alcune modifiche, può essere trasformato in un catalogo di prodotti, che potranno essere mostrati senza prezzo e senza la possibilità di essere aggiunti al carrello.

Iniziamo le modifiche abilitando la “modalità catalogo” dalle opzioni del tema, come mostrato nell’immagine seguente:

Nella pagina del prodotto nascondiamo i filtri, i prodotti correlati ed allineiamo al centro il titolo delle immagini lightbox dello stesso, inserendo il codice seguente:

.shop-filters {
    display: none;
}
.related.products {
display: none;
}
.pswp__caption__center {
    text-align: center;
}

Betheme non prevede la possibilità di inserire un’immagine personalizzata nelle categorie dei prodotti, il problema può essere risolto inserendo

body.term-ID della categoria #Subheader{background-image:url(URL dell'immagine)!important}

Nascondiamo dal menù principale le icone relative all’utente ed al carrello, come mostrato nell’immagine seguente:

Dalla pagina del prodotto è possibile rimuovere la tabella della descrizione, inserendo all’interno del file functions.php del tema il codice seguente:

add_filter( 'woocommerce_product_tabs', 'remove_tabs_description_tab', 11 );
function remove_tabs_description_tab( $tabs ) {
  unset( $tabs['description'] );
  return $tabs;
}

Possiamo creare una navigazione per categoria nella pagina del prodotto, inserendo all’interno del file functions.php del tema il codice seguente:

add_action( 'woocommerce_before_single_product', 'bbloomer_prev_next_product' );
add_action( 'woocommerce_after_single_product', 'bbloomer_prev_next_product' );
function bbloomer_prev_next_product(){
echo '<div class="prev_next_buttons">';
// 'product_cat' will make sure to return next/prev from current category
$previous = next_post_link('%link', '← PRECEDENTE', TRUE, ' ', 'product_cat');
$next = previous_post_link('%link', 'SUCCESSIVO →', TRUE, ' ', 'product_cat');
echo $previous;
echo $next;
echo '</div>'; 
}

Per visualizzare correttamente la navigazione andremo ad aggiungere il codice seguente:

.prev_next_buttons {
line-height: 40px;
margin-bottom: 20px;
}
.prev_next_buttons a[rel="prev"], .prev_next_buttons a[rel="next"] {
display: block;
}
.prev_next_buttons a[rel="prev"] {
float: right;
margin-left: 20px;
}
.prev_next_buttons a[rel="next"] {
float: left;
}
.prev_next_buttons::after {
content: '';
display: block;
clear:both;
}
.pswp__caption__center {
    text-align: center;
}