widget woocommerce, categorie e immagini

Woocommerce: widget per categorie con immagini

In questi giorni stiamo sviluppando un tema wordpress che supporti il famoso plugin Woocommerce, che per chi non lo sapesse estende il cms rendendolo un ottimo gestore di siti e-commerce.

Abbiamo deciso di inserire nella sidebar del sito il classico menu delle “categorie prodotti”, ma per renderlo un po’ più gradevole alla vista abbiamo scelto di visualizzare oltre al classico link anche l’immagine associata alla categoria.

Un po’ per provare, un po’ per pigrizia e non utilizzare codice scritto da altri (che vi ricordo andrebbe sempre controllato) abbiamo deciso di scrivere un widget che facesse esattamente ciò che ci serve!

Prima di mostrarvi il codice vi consigliamo di dare almeno un occhiata ai Walker e ai Widgets di wordpress.

Passo 1 creiamo il walker

Per questa operazione possiamo tranquillamente basarci sul walker base che woocommerce ci mette a disposizione (class-product-cat-list-walker.php), per far ciò noi creeremo un file “mojos_cat_prod_walker.php” ad esempio nella cartella “inc”.

  • Se volete dargli un occhiata lo trovate nella cartella  /wp-content/plugins/woocommerce/includes/walkers

Si deve modificare la funzione “start_el()” e in particolare dobbiamo aggiungere

$thumbnail_id = get_woocommerce_term_meta( $cat->term_id, 'thumbnail_id', true );
$image = wp_get_attachment_url( $thumbnail_id );

e modifcare la variabile $output

$output .= '"><a href="' . get_term_link( (int) $cat->term_id, $this->tree_type ) . '">';
if ( $image )
$output.= '<img src="' . $image . '" alt="'.$cat->name.'" /> ';
$output.= __( $cat->name, 'woocommerce' ) . '</a>';

In pratica otteniamo l’url del allegato che andiamo ad utilizzare per stampare un immagine all’interno del link.

Passo 2 creiamo il widget

Anche per questo passaggio possiamo basarci sul widget che woocommerce ci mette a disposizione (class-wc-widget-product-categories.php), per far ciò noi creeremo un file “class_mojos_cat_prod_widget.php” ad esempio nella cartella “inc”.

  • Se volete dargli un occhiata lo trovate nella cartella /wp-content/plugins/woocommerce/includes/widgets

In questo caso si deve agire sulla funzione “widget()“. In particolare nel ramo “List” del if else che decide cosa visualizzare (Dropdown o List).

La modifica è semplicissima

$list_args['walker']= new Mojos_Product_Cat_List_Walker;

Dove “Mojos_Product_Cat_List_Walker” è il nome che avete dato alla classe del walker creato al punto 1 di questa guida. In questo modo non faciamo altro che dire al widget di usare il nostro walker al posto di quello di default!

L’ultimo accorgimento è quello di ricordarsi di attivare il nuovo widget

add_action( 'widgets_init', function(){
register_widget( 'Mojos_Widget_Product_Categories' );
});

Dove “Mojos_Widget_Product_Categories” è il nome della classe che stiamo modificando!

Passo 3 attiviamo il nostro widget per Woocommerce

Fatto tutto non ci resta che includere il tutto nel file functions.php  del nostro tema

include get_template_directory() . '/inc/mojos_cat_prod_walker.php';
include get_template_directory() . '/inc/class_mojos_cat_prod_widget.php';

e tramite css dare un aspetto gradevole al risultato!

 

Risultato modifica widget woocommerce

 

Ed ecco i file citati nell’articolo:

« Guida WooCommerce: impostazioni generali

« Guida WooCommerce – impostazioni generali (capitolo 2)

« Guida WooCommerce: primo capitolo