Come aggiungere il supporto WooCommerce

Come ben sai, WooCommerce è uno dei plugin più popolari per WordPress, in grado di trasformare questa piattaforma di blogging in un sistema e-commerce completo.

Inoltre, vista l’acquisizione da parte di Automattic avvenuta un paio di anni fa, è evidente come WordPress punti ad aumentare la sua diffusione, anche tra chi utilizza piattaforme diverse da WordPress, come Magento oppure Prestashop.

Ad oggi, nel mondo, oltre il 37% dei siti e-commerce utilizza WooCommerce

In questa guida ti farà vedere i passi necessari per rendere il tuo tema compatibile con WooCommerce.

La maggior parte dei temi WordPress disponibili, gratuiti e non, supporta nativamente questo plugin, è comunque possibile trovare template che invece non offrono questa funzionalità, magari sviluppati per un’utenza diversa, come i titolari di un blog personale oppure per gestire un portfolio di lavori.

Quando provi ad utilizzare WooCommerce insieme ad un tema non compatibile, oltre alla presenza di un avviso a riguardo, ogni pagina dello shop sarà visualizzata con un layout completamente diverso da quello previsto dal tema.

Aggiungere il supporto WooCommerce tramite woocommerce_content()

La soluzione più semplice è quella di duplicare il file template page.php del tema in uso, rinominandolo in woocommerce.php, al suo interno dovrai sostituire il loop di WordPress, generalmente inizia con:

if ( have_posts() ) :

e termina con

endif;

Al suo posto dovrai inserire la funzione woocommerce_content().

Utilizzare i filtri ed azioni di WooCommerce

In alternativa puoi agire su filtri ed azioni, per personalizzare il layout generato da WooCommerce.

Come prima cosa, rimuovi il wrapper di WooCommerce aggiungendo, all’interno del file functions.php del tuo tema WordPress:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);
remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

Successivamente aggiungi

add_action('woocommerce_before_main_content', 'my_theme_wrapper_start', 10);
add_action('woocommerce_after_main_content', 'my_theme_wrapper_end', 10);

function my_theme_wrapper_start() {
  echo '<section id="main">';
}

function my_theme_wrapper_end() {
  echo '</section>';
}

Queste righe di codice andranno a modificare l’html generato all’inizio ed alla fine del contenitore principale di WooCommerce, anche se dovrai sostituire il codice html dell’esempio con quello utilizzato dal tuo tema per la parte iniziale e finale del contenitore principale per i contenuti.

Di seguito una lista di azioni che potranno tornarti utili:

Rimuovere l’immagine in evidenza dei prodotti WooCommerce

remove_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );

Rimuovere i prodotti correlati di WooCommerce

remove_action( 'woocommerce_cart_collaterals', 'woocommerce_cross_sell_display');
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15);

Rimuovere il breadcrumbs di WooCommerce

remove_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20, 0 );

Aggiungere il carrello WooCommerce nella testata del tema

Questa prima parte di codice va inserita nel punto esatto in cui vuoi visualizzare il carrello

<div class="header-cart">
            
	<a class="cart-contents" href="<?php echo esc_url(WC()->cart->get_cart_url()); ?>" title="<?php esc_attr_e( 'View your shopping cart','sueva' ); ?>">
		<i class="fa fa-shopping-cart"></i>
		<span class="cart-count"><?php echo sprintf ( _n( '%d', '%d', WC()->cart->cart_contents_count, 'sueva' ), WC()->cart->cart_contents_count ); ?></span>  
	</a>
                            
</div>

Invece, questa seconda parte di codice va aggiunta all’interno del file functions.php ed andrà ad aggiornare automaticamente il carrello, ogni volta che un utente aggiungerà un nuovo prodotto al suo interno.

function wip_cart_link_fragment( $fragments ) {
	
	ob_start();

?>
	<a class="cart-contents" href="<?php echo esc_url(WC()->cart->get_cart_url()); ?>" title="<?php esc_attr_e( 'View your shopping cart','sueva' ); ?>">
		<i class="fa fa-shopping-cart"></i>
		<span class="cart-count"><?php echo sprintf ( _n( '%d', '%d', WC()->cart->cart_contents_count, 'sueva' ), WC()->cart->cart_contents_count ); ?></span>  
	</a>
        
<?php

	$fragments['a.cart-contents'] = ob_get_clean();
		
	return $fragments;
	
}
	
add_filter( 'woocommerce_add_to_cart_fragments', 'wip_cart_link_fragment' );

Puoi trovare la lista completa all’interno della documentazione di WooCommerce

documentazione di WooCommerce

Sovrascrivere i file template di WooCommerce

La terza soluzione che ti suggerisco è di sovrascrivere i file template di WooCommerce, modificando il codice che gestisce l’output di ogni sezione, come le categorie prodotto, la sezione recensioni oppure la disposizione degli elementi che compongono la scheda di un singolo prodotto, per una personalizzazione ancora più avanzata.

Per fare questo, ti basterà creare una nuova cartella dentro il tema in uso, chiamata appunto woocommerce, in cui andrai a copiare ogni file template che desideri sovrascrivere.

Se modifichi un file all’interno di una cartella come single-product, questa cartella dovrà essere presente anche nella cartella woocommerce del tuo tema.

Tieni però presente che, dopo ogni aggiornamento di WooCommerce, sei costretto a verificare se il template originale è stato sostituito da una versione più recente e, nel caso, integrare queste modifiche all’interno del file template del tuo tema.

Puoi trovare tutti i file template all’interno del seguente percorso

/wp-content/plugins/woocommerce/templates/

Conclusioni

Quando sei finalmente soddisfatto del risultato ottenuto, ti suggerisco di dichiarare il supporto a WooCommerce, grazie al seguente codice da inserire nel file functions.php.

add_action( 'after_setup_theme', 'woocommerce_support' );
function woocommerce_support() {
    add_theme_support( 'woocommerce' );
}