Come personalizzare i modelli WooCommerce in modo programmatico

Pubblicato: 2021-05-04

Vuoi modificare i modelli sul tuo sito? Questa guida ti mostrerà come personalizzare i template WooCommerce in modo programmatico sia con hook che sovrascrivendoli .

Perché modificare i modelli WooCommerce?

Fare acquisti online è più comodo e veloce rispetto ai negozi fisici, quindi l'eCommerce è diventato estremamente popolare negli ultimi anni. Con così tanta concorrenza, non è sufficiente impostare il tuo negozio WooCommerce e mettere online i tuoi prodotti. Devi trovare il modo di differenziarti e distinguerti dalla massa .

Uno dei modi migliori per farlo è personalizzare il tuo negozio. Oltre a modificare l'intestazione e modificare le pagine chiave come la cassa o la pagina del negozio, puoi anche personalizzare i modelli che utilizzi. Non ci sono molti siti che modificano i loro modelli, quindi così facendo sarai in grado di avere un vantaggio sui tuoi concorrenti .

Se hai capacità di programmazione, probabilmente sai che l'utilizzo di un tema figlio è consigliato durante la modifica del tuo negozio. Allo stesso modo, gli hook integrati di WordPress e WooCommerce offrono molte possibilità per modificare e aggiungere nuove funzionalità a qualsiasi sito web.

Come personalizzare i modelli WooCommerce in modo programmatico

Esistono due modi principali per personalizzare i modelli WooCommerce in modo programmatico:

  1. Con ganci
  2. Sovrascrivere i modelli

Ognuno di questi metodi ha scopi diversi. Diamo un'occhiata più da vicino alle loro principali differenze.

Sovrascrivere i file modello o utilizzare hook?

Personalizzare il tuo negozio con i ganci è una pratica consigliata. Tuttavia, quando personalizzi WooCommerce con gli hook, potresti riscontrare problemi di incompatibilità. Per personalizzazioni più complesse, la sovrascrittura dei file modello WooCommerce può essere un'opzione migliore.

È importante notare che quando si sovrascrive un file modello, gli hook che funzionano su quel file smetteranno di funzionare. Ogni hook punta a un file specifico, quindi non sarai in grado di usarli se modifichi lo stesso file che attiva l'hook.

Ad esempio, prendiamo il file single-product.php per vedere come vengono creati gli hook. Inoltre, nota dove si trovano i ganci sia prima che dopo il ciclo.

 if ( ! definito( 'ABSPATH' ) ) {
        Uscita; // Esci se si accede direttamente
 }
 get_header('negozio'); ?>
 <?php
                /**
                 * hook woocommerce_before_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper - 10 (uscite che aprono i div per il contenuto)
                 * @hooked woocommerce_breadcrumb - 20
                 */
                do_action( 'woocommerce_before_main_content' );
        ?>
                <?php while ( have_posts() ) : ?>
                        <?php the_post(); ?>
                        <?php wc_get_template_part( 'contenuto', 'prodotto singolo' ); ?>
                <?php nel frattempo; // fine del ciclo. ?>
        <?php
                /**
                 * hook woocommerce_after_main_content.
                 *
                 * @hooked woocommerce_output_content_wrapper_end - 10 (emette div di chiusura per il contenuto)
                 */
                do_action( 'woocommerce_after_main_content' );
        ?>
        <?php
                /**
                 * gancio woocommerce_sidebar.
                 *
                 * @hooked woocommerce_get_sidebar - 10
                 */
                do_action('woocommerce_sidebar');
        ?>
 <?php
 get_footer('negozio');

Se dai un'occhiata allo script, vedrai come creiamo gli hook su do_action('name-of-the-hook'); Linee.

Supponiamo che tu abbia il seguente hook sul file functions.php del tuo tema figlio:

 add_action('woocommerce_after_main_content',function(){echo “contenuto personalizzato dopo un file modello di prodotto singolo”;});

Puoi fare eco allo stesso contenuto direttamente sul file modello come segue:

 <?php nel frattempo; // fine del ciclo. ?>
        <?php
 echo "contenuto personalizzato dopo il file modello di prodotto singolo";
                /**
                 * hook woocommerce_after_main_content.
 do_action( 'woocommerce_after_main_content' );

Tuttavia, così facendo, do_action('woocommerce_after_main_content'); funzione diventerà inutile poiché hai aggiunto il tuo codice lì invece di estrarlo con l'hook. Quindi potresti voler rimuovere tutti gli hook non necessari nel file eliminando do_action('name-of-the-hook'); sezioni.

Tieni presente che se stai usando l' woocommerce_after_main_content() da qualche altra parte sul tuo sito web e rimuovi do_action( 'name_of_your_hook' ); in questo file, l'hook non funzionerà più.

Dopo aver rimosso gli hook e i tag PHP non necessari, il tuo file dovrebbe assomigliare a questo:

 if ( ! definito( 'ABSPATH' ) ) {
 Uscita; // Esci se si accede direttamente
 }
 get_header('negozio');
 mentre ( have_posts() ) :
 il_post();
 wc_get_template_part('contenuto', 'prodotto singolo');
 nel frattempo; // fine del ciclo.
 do_action('woocommerce_sidebar');
 get_footer('negozio');
 NOTA : la rimozione degli hook in questo modo può influire sul codice di terze parti come plug-in e temi, causando errori o interrompendo il tuo sito Web. Si presume che tu sappia cosa stai facendo.
		


 Personalizza e sovrascrivi i file modello WooCommerce
 La sovrascrittura dei file modello WooCommerce ti offre molta flessibilità per personalizzare il tuo negozio. Tuttavia, come accennato in precedenza, devi capire che quando sovrascrivi il contenuto di un file modello, gli hook che funzionano su quel file smetteranno di funzionare. Inoltre, WooCommerce può modificare i file del modello di volta in volta, quindi se c'è un aggiornamento e cambiano i file, potresti scoprire che il file che modifichi non è aggiornato.
 Cose da tenere a mente quando si sovrascrivono i modelli
 Se sei qui, probabilmente hai alcune capacità di programmazione e sai come usare e installare un tema figlio. In caso contrario, consulta la nostra guida per creare un tema figlio o utilizzare uno di questi plugin.
		


 La sovrascrittura dei modelli WooCommerce è simile alla sovrascrittura del file functions.php . La differenza principale è che modifichi i file modello di WooCommerce invece dei file del tema.
 Per fare ciò, devi copiare il file modello desiderato dalla cartella dei modelli di plugin WooCommerce e incollarlo nel tema del tuo bambino nella cartella WooCommerce. Se segui la stessa struttura della cartella dei modelli di WooCommerce, dei nomi dei file e delle sottocartelle; sarai in grado di sovrascrivere i file modello, anche quelli all'interno di sottocartelle.
 Esistono molti file modello WooCommerce e ognuno di essi è responsabile di una singola attività. puoi controllare l'elenco completo dei file modello che puoi modificare, nonché le sottodirectory e la struttura delle cartelle in questo collegamento.
		


 Come puoi vedere, ci sono alcuni file nella cartella del modello principale e diverse sottodirectory. Puoi personalizzare i file all'interno di qualsiasi sottodirectory nello stesso modo in cui modifichi i file principali come archive-product.php , single-product.php o content-single-product.php . Allo stesso modo, puoi anche personalizzare i file nel carrello, Il mio account, le e-mail o le cartelle di pagamento se segui gli stessi nomi di cartelle e struttura del tema del tuo bambino.
 Quindi, se desideri personalizzare alcuni di questi file, il tema del tuo bambino sarebbe simile a questo: Come personalizzare i modelli woocommerce in modo programmatico
		


 Detto questo, diamo un'occhiata ad alcuni esempi di cose che puoi fare per personalizzare i modelli di WooCommerce.
 1. Aggiungi shortcode al modello WooCommerce
 Un'alternativa interessante consiste nell'utilizzare gli shortcode nel codice. La maggior parte degli shortcode esistenti dovrebbe funzionare qui, ma è anche comune trovare alcuni shortcode non supportati al di fuori di quelli ufficiali di WooCommerce e WordPress.
 Ad esempio, lo script seguente includerà la dashboard dell'account in tutte le pagine dei singoli prodotti. Ricordati di incollarlo sul file single-product.php che hai creato sul tuo tema figlio.
		


 <?php
 if ( ! definito( 'ABSPATH' ) ) {
 Uscita; // Esci se si accede direttamente
 }
 get_header('negozio');
 mentre ( have_posts() ) :
 il_post();
 wc_get_template_part('contenuto', 'prodotto singolo');
 nel frattempo; // fine del ciclo.
 do_action('woocommerce_sidebar');
 $t= '<div><h4>Il mio account</h4>';
 $t.= do_shortcode(" [ woocommerce_my_account ] ");
 $t.="</div>";
 eco $t;
 get_footer('negozio');
 E questo è il risultato su una pagina di prodotto dal vivo: 
Personalizza i file modello woocommerce - Aggiungi shortcode al modello wc
 2. Mostra il contenuto per i clienti che hanno già acquistato quel prodotto
 Se hai clienti che hanno già acquistato un prodotto da te e tornano per acquistare di nuovo lo stesso prodotto, puoi fornire loro un codice sconto per migliorare la loro esperienza e farli tornare nel tuo negozio più e più volte.
 Il seguente script visualizzerà il contenuto sulla pagina del prodotto per i clienti abituali che hanno acquistato lo stesso prodotto in passato. Ancora una volta, modifichiamo il file single-product.php :
 get_header('negozio');
 mentre ( have_posts() ) :
 il_post();
 wc_get_template_part('contenuto', 'prodotto singolo');
 nel frattempo; // fine del ciclo.
 $utente_corrente = wp_get_utente_corrente();
 if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
 echo '<div class="user-bought">&hearts; Ehi ' . $utente_corrente->nome_nome . ', l\'hai già acquistato. Acquista di nuovo utilizzando questo coupon: <b>PURCHASE_AGAIN_21</b></div>';
 finisci se;
 get_footer('negozio'); 
Personalizza i file modello woocommerce - Mostra i contenuti per i clienti acquistati prima di tornare
 3. Rimuovere il pulsante Aggiungi al carrello in base alla quantità del prodotto e al prezzo totale del carrello
 Un altro esempio interessante se desideri personalizzare i tuoi modelli WooCommerce in modo programmatico è aggiungere il pulsante Carrello in base al numero di articoli che il cliente sta acquistando e al prezzo totale del carrello.
 In questo caso, entreremo nel ciclo di WooCommerce utilizzando un file che si trova all'interno della cartella del ciclo nella directory del modello. Crea semplicemente un nuovo file add-to-cart.php in una cartella chiamata loop , nella cartella woocommerce del tuo tema figlio e incolla questo script:
 if ( ! definito( 'ABSPATH' ) ) {
 Uscita;
 }
 prodotto $ globale;
 $count= WC()->carrello->get_cart_contents_count();
 $total_price= WC()->carrello->get_cart_total();
 preg_match_all('!\d+!', $total_price, $matches);
 $to_int = intval($corrisponde[0][1]);
 se($to_int>500){
 echo "Eccede l'importo limite per il carrello totale";
 }
 altrimenti se($conteggio<10){
 echo apply_filters(
 'woocommerce_loop_add_to_cart_link', // WPCS: XSS ok.
 sprintf(
 '<a href="%s" data-quantity="%s" class="%s" %s>%s</a>',
 esc_url($prodotto->aggiungi_al_carrello_url() ),
 esc_attr( isset($args['quantity'] ) ? $args['quantity'] : 1 ),
 esc_attr( isset( $args['class'] ) ? $args['class'] : 'button' ),
 isset($args['attributi'])? wc_implode_html_attributes($args['attributes']) : '',
 esc_html($prodotto->aggiungi_al_carrello_testo() )
 ),$prodotto,$args);
 }
 altro{
 echo "Limite quantità superata";
 }
 In questo caso, stiamo aggiungendo un'istruzione if() logica condizionale per verificare se ci sono più di 10 articoli aggiunti al carrello e il prezzo totale del carrello non è superiore a $ 500.
 Come puoi vedere, stiamo entrando nell'ambito della classe WooCommerce chiamando l'oggetto WooCommerce in questo modo: WC()->cart . In questo modo, puoi recuperare alcune informazioni per aggiungere o meno un pulsante carrello alla pagina del negozio, in base alle tue condizioni.
 Ecco il risultato quando si applicano entrambe le restrizioni condizionali: 
Rimuovi il pulsante Aggiungi al carrello in base alla quantità di prodotti e al prezzo totale del carrello
 Tieni presente che funzionerà solo sulla pagina principale del negozio. Dovrai aggiungere altro codice se vuoi fare lo stesso su altre pagine.
 4. Modifica i file dei modelli di email di WooCommerce
 I modelli di email includono già link utili al tuo sito web, ma alcuni utenti potrebbero non esserne consapevoli. Quindi aggiungiamo un collegamento ai modelli di posta elettronica in cui gli utenti possono accedere al sito Web direttamente dall'e-mail che hanno ricevuto.
 Aggiungeremo il collegamento nell'intestazione del layout dell'e-mail, quindi abbiamo bisogno di una copia del file email-header.php , che si trova nella cartella e-mail della sottodirectory dei modelli di WooCommerce.
 Crea una nuova cartella sul tema del tuo bambino e incolla lì il file con lo stesso nome. Vedrai i flag iniziali <!–header–> e <!–end header–> , ed è qui che aggiungerai il link:
 <!-- Intestazione -->
 <table border="0" cellpadding="0" cellspacing="0" width="100%">
 <tr>
 <td>
 <h1><?php echo $email_heading; ?></h1>
 <h3>
 <?php echo '<span class="my-link"><a href="#login-URL">Accedi al tuo account</a></span>';?>
 </h3>
 </td>
 </tr>
 </tabella>
 <!-- Fine intestazione →
 Questo è tutto! Hai appena modificato il file di intestazione del modello di email di WooCommerce. Allo stesso modo, puoi modificare tutti i file dei modelli di email che si trovano in questa directory. Per ulteriori informazioni su come testare i tuoi modelli di email, dai un'occhiata a questa guida completa.
 Per visualizzare in anteprima i modelli, ti consigliamo di utilizzare un plug-in di anteprima e-mail. Qui troverai alcuni dei plugin di posta elettronica che puoi utilizzare. 
Modifica dei file dei modelli di posta elettronica WC
 5. Come applicare lo stile CSS ai modelli di email WooCommerce
 Un'altra alternativa interessante è personalizzare lo stile dei tuoi modelli WooCommerce in modo programmatico. Dopo aver modificato il markup HTML, puoi aggiungere uno stile CSS ai modelli di email. Considerando che il CSS in linea non è una pratica consigliata, dovremo usare il file email-styles.php . Questo è il file che gestisce i CSS per i modelli di email.
 Per applicare un codice CSS personalizzato alle e-mail, copia questo file dalle cartelle dei plug-in WooCommerce e incollalo nella cartella WooCommerce del tuo tema. Questo è un file PHP, quindi sarai in grado di utilizzare variabili, funzioni e costruire la tua istruzione logica e applicarle agli stili:
 un {
 colore: <?php echo esc_attr($link_color); ?>;
 font-weight: normale;
 decorazione del testo: sottolineatura;
 }
 E questo è il selettore di link personalizzato:
 .mio-link > a:nth-child(1){
 colore bianco;
 dimensione del carattere: 14px;
 }
 Conclusione
 In sintesi, la modifica dei file modello è un modo eccellente per distinguersi dalla concorrenza e offrire ai clienti una migliore esperienza di acquisto.
 Esistono 2 modi principali per personalizzare i modelli WooCommerce in modo programmatico:
  •  Con ganci
  •  Sovrascrivere i modelli
 Abbiamo confrontato entrambi i metodi e mostrato diversi esempi. Puoi utilizzare gli script come base e giocare per personalizzarli e applicarli al tuo negozio.
 In caso di problemi con la guida, faccelo sapere nei commenti qui sotto e faremo del nostro meglio per aiutarti.