Creare un catalogo di prodotti con il tema Avada e WooCommerce

Avada è il tema “premium” per WordPress più venduto al mondo 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 disabilitando da Avada/Opzioni/WooCommerce:

Modifichiamo la pagina del singolo prodotto, per impedire di aggiungere prodotti nel carrello, inserendo all’interno del file functions.php del tema il codice seguente:

add_filter ('woocommerce_is_purchasable', '__return_false');
/** nascondere il prezzo del prodotto */
add_filter( 'woocommerce_get_price_html', 'cart_remove_price');
function cart_remove_price($price){   
    return ;
}

Nella pagina del prodotto possiamo nascondere la tabulazione che contiene descrizione, informazioni aggiuntive e recensioni inserendo il codice seguente:

.woocommerce-tabs {
    display: none;
}

A seguito della precedente modifica rimarrà visualizzata solamente la descrizione breve del prodotto, è consigliabile ripeterla nella descrizione estesa per non avere problemi con la SEO. 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 inseriamo 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;
}
.prev_next_buttons a[rel="next"] {
float: left;
}
.prev_next_buttons::after {
content: '';
display: block;
clear:both;
}
.pswp__caption__center {
    text-align: center;
}