Uno dei punti di forza di WooCommerce è quello di peretterci di personalizzare, con facilità, gli elementi che lo compongono e per poterlo fare hai a disposizione tre metodologie:
- Aggiungere funzioni personalizzate all’interno del tuo file functions.php
- Modificare i file di template presenti all’interno di woocommerce/template/single-product
- Utilizzare un plugin esterno per la personalizzazione della pagina di prodotto
Se è vero che la seconda metodologia quella più complessa (perchè richiede un minimo di conoscenza di programmazione) e che l’utilizzo di plugin ti permette di lavorare con più facilità è anche vero che per alcune personalizzazioni la scelta migliore, e più veloce, è quella di utilizzare snippet di codice pronti all’uso da incollare all’inteno del tuo file functions.php
Se stai seguendo il corso completo “Creare un e-commerce con WordPress : corso completo” avrai sicuramente visto i trucchi che usano i professionisti e che ho scelto di rendere pubblici, per creare e-commerce professionali e persoalizzare ogni singolo elemento di WooCommerce! A supporto della lezione che riguarda proprio la personalizzazione della pagina del singolo prodotto voglio riportati i più comuni (e semplici) snippet di codice che puoi utilizzare per personalizzare, usando il file functions.php, il template di prodotto.
Rimuovere tutte le tab dalla pagina di Prodotto
Per rimuovere le tab descrizione, recensioni, informazioni aggiuntive dalla pagina di prodotto di WooCommere ti basterà copiare ed incollare questa funzione all’interno del file functions.php del tuo child theme.
1 2 3 4 5 6 7 8 |
/* Remove the tabs from woocommerce */ add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); function woo_remove_product_tabs( $tabs ) { unset( $tabs['description'] ); // Remove the description tab unset( $tabs['reviews'] ); // Remove the reviews tab unset( $tabs['additional_information'] ); // Remove the additional information tab return $tabs; } |
Se, diversamente, hai bisogno di rimuovere solo una o due delle tab presenti quello che devi fare è, dal codice sopra riportato, andare a rimuovere la stringa relativa alla tab che vuoi conservare come ad esempio il codice sotto riportato (resterà visibile la tab di descrizione)
1 2 3 4 5 6 7 |
// Remove the tabs from woocommerce */ add_filter( 'woocommerce_product_tabs', 'woo_remove_product_tabs', 98 ); function woo_remove_product_tabs( $tabs ) { unset( $tabs['reviews'] ); // Remove the reviews tab unset( $tabs['additional_information'] ); // Remove the additional information tab return $tabs; } |
Spostare il prezzo sotto la descrizione breve
1 2 3 4 5 6 |
/* Move Price */ add_action('woocommerce_single_product_summary', 'move_single_product_price', 1); function move_single_product_price() { remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 10); add_action('woocommerce_single_product_summary', 'woocommerce_template_single_price', 29); } |
Rimuovere la descrizione breve dalla pagina di prodotto WooCommerce
1 2 3 4 5 6 |
/* Remove Short Description */ remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); function woocommerce_template_single_excerpt() { return; } |
Spostare la descrizione breve in una tab
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
/* Change Short Description on Tag */ // Change Location remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 ); add_action( 'woocommerce_single_product_summary', 'woocommerce_output_product_data_tabs', 30 ); // Remove short description remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 ); // Add short description to a custom product tab add_filter( 'woocommerce_product_tabs', 'add_custom_product_tab', 10, 1 ); function add_custom_product_tab( $tabs ) { $custom_tab = array( 'custom_tab' => array( 'title' => __( "Short description", "woocommerce" ), 'priority' => 12, 'callback' => 'short_description_tab_content' ) ); return array_merge( $custom_tab, $tabs ); } // Custom product tab content function short_description_tab_content() { global $post, $product; $short_description = apply_filters( 'woocommerce_short_description', $post->post_excerpt ); if ( ! $short_description ) { return; } echo '<div class="woocommerce-product-details__short-description">' . $short_description . '</div>'; // WPCS: XSS ok. } |
I prodotti che ti consiglio