Come modificare la pagina del prodotto WooCommerce in modo programmatico

Pubblicato: 2021-01-09

Cerchi modi per personalizzare la pagina del prodotto nel tuo negozio eCommerce? In questa guida, ti mostreremo come modificare la pagina del prodotto WooCommerce in modo programmatico .

Personalizzazione della pagina del prodotto

Anche se puoi personalizzare qualsiasi cosa nel tuo negozio, le due pagine principali in cui si verificano la maggior parte delle personalizzazioni in WooCommerce sono la pagina del negozio e la pagina dei prodotti. Se vuoi aumentare le tue vendite e ottimizzare l'inizio del processo di acquisto, devi lavorare su entrambi. Abbiamo già visto come personalizzare la pagina Shop, quindi oggi ti mostreremo come modificare la pagina Prodotto in modo programmatico (con codice).

Un design accurato che si concentra sulla fornitura della migliore esperienza del cliente ti aiuterà a migliorare il processo di acquisto generale e ad aumentare i tassi di conversione. Esistono due modi principali per personalizzare la pagina Prodotto:

  • Con plugin
  • Programmaticamente

Anche se alcuni plugin possono aiutarti, trovare quello che ha tutte le funzionalità che desideri può essere un processo lungo. Quindi, se hai alcune abilità di sviluppo di base, un'opzione eccellente è modificare la pagina del prodotto WooCommerce in modo programmatico . Non solo puoi evitare di installare strumenti di terze parti, ma avrai anche molta più flessibilità per personalizzare tutto ciò che desideri.

Se vuoi personalizzare la pagina del prodotto con plugin e page builder, dai un'occhiata a questa guida.

Come modificare la pagina del prodotto WooCommerce in modo programmatico

In questa sezione imparerai come modificare la pagina del prodotto WooCommerce per i singoli prodotti. Tratteremo i seguenti argomenti.

  1. Utilizzo di ganci
    1. Rimuovi elementi
    2. Riordina gli elementi
    3. Aggiungi nuovi elementi
    4. Applicare la logica condizionale
      1. Utente registrato e ruolo utente
      2. ID prodotto e tassonomie
    5. Modifica schede prodotto
    6. Supporto per prodotti variabili
  2. Sovrascrivi i file modello WooCommerce
    1. Modifica le meta-informazioni
    2. Passa a un modello personalizzato per una specifica categoria di prodotti
      1. Modifica il file single-product.php
      2. Crea un nuovo file content-single-product.php
      3. Crea un modello personalizzato modificando il tuo nuovo file content-single-product.php
  3. Personalizzazione della pagina del prodotto con script CSS

Layout della pagina del prodotto WooCommerce

Prima di iniziare con il tutorial, diamo un'occhiata alla pagina del prodotto predefinita in WooCommerce per i singoli prodotti e identifichiamo ogni elemento. Presta attenzione alle diverse sezioni del modello e a come sono organizzate le informazioni perché a loro faremo riferimento più avanti nella guida. WooCommerce pagina del singolo prodotto Esistono due file WooCommerce principali responsabili dell'output della pagina del prodotto.

  1. single-product.php : crea il modello richiesto per il layout corrente
  2. content-single-product.php : questo file stampa il contenuto nel modello

Entrambi i file possono essere sovrascritti utilizzando un tema figlio. Questa è una pratica comune per sovrascrivere i file modello WooCommerce. Tuttavia, dovresti provare a utilizzare gli hook di WooCommerce invece di sovrascrivere i file modello ove possibile perché è una delle migliori pratiche consigliate da WordPress durante la personalizzazione del tuo sito.

D'altra parte, per attività complesse che includono funzioni o oggetti, potrebbe essere necessario modificare i file modello. Combinando entrambe le tecniche dovresti essere in grado di ottenere quasi tutte le personalizzazioni che desideri. Quindi, in questo tutorial, ti mostreremo come modificare la pagina del prodotto WooCommerce usando entrambi i metodi.

Prima di iniziare, assicurati di creare un tema figlio per testare i tuoi script o di utilizzare un plug-in per generarne uno. Vediamo alcuni esempi pratici in modo da poter imparare come funziona ciascuna di queste tecniche per sfruttare al meglio il tuo negozio.

1) Modifica la pagina del prodotto WooCommerce usando gli hook

NOTA : se non hai familiarità con gli hook di WooCommerce e come usarli, dai un'occhiata a questa guida.

1.1) Rimuovere elementi dalle singole pagine prodotto

Esistono diversi hook di WooCommerce che puoi utilizzare per rimuovere qualsiasi elemento su una singola pagina di prodotto. Ognuno di essi funzionerà con un gruppo di elementi specifici, quindi è necessario utilizzare l'hook giusto, la giusta funzione di callback di WooCommerce e il giusto valore di priorità.

Ad esempio, se desideri rimuovere il titolo di tutte le pagine dei prodotti, utilizzerai il seguente script nel file functions.php del tuo tema figlio.

 remove_action(/* hook -> */'woocommerce_single_product_summary', /* callback function ->*/ 'woocommerce_template_single_title', /* position ->*/5 );

Troverai tutti gli hook e i relativi parametri qui o nei commenti nel file content-single-product.php del plugin WooCommerce. Ora, diamo un'occhiata ad altri script di esempio per rimuovere diversi elementi e personalizzare la pagina del prodotto.

 // rimuovi il titolo
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
// rimuovi le stelle di valutazione
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
// rimuove il meta del prodotto 
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
// rimuovi la descrizione
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
// rimuovi le immagini
remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20);
// rimuovi i prodotti correlati
remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);
// rimuove le schede di informazioni aggiuntive
remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

1.2) Riordinare gli elementi

Riordinare gli elementi della pagina del prodotto è abbastanza semplice. Innanzitutto, devi rimuovere il gancio come abbiamo fatto prima, quindi devi aggiungerlo di nuovo con una priorità/numero d'ordine diverso. Ad esempio, il seguente script sposterà la descrizione del prodotto proprio sotto il titolo:

 // cambia l'ordine della descrizione
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 6 );

Come vedi, rimuoviamo l'azione e poi la aggiungiamo di nuovo con una priorità diversa (6 invece di 20). Perché abbiamo scelto una priorità/ordine di 6? Sappiamo che l'elemento title ha un valore di priorità di 5, quindi questo ci permette di conoscere il valore di priorità che dobbiamo assegnare al nostro hook personalizzato per visualizzare l'elemento di callback subito dopo il titolo (6).

Utilizzando le informazioni che ti abbiamo fornito al punto 1.1, puoi fare lo stesso con qualsiasi hook e callback e posizionarli nell'ordine che desideri.

1.3) Aggiungi nuovi elementi

Se hai bisogno di personalizzare la pagina del prodotto WooCommerce aggiungendo nuovi contenuti, potresti dover considerare di sovrascrivere i file modello. Tuttavia, puoi anche utilizzare il seguente hook per aggiungere nuovi contenuti:

 add_action('woocommerce_before_single_product_summary',function(){
  printf('<h4><a href="?added-content">Congratulazioni, hai appena aggiunto un link!</a></h4>');
}
);

woocommerce_before_single_product_summary hook personalizzazione della pagina del prodotto In alternativa, puoi creare la tua funzione:

 add_action('woocommerce_after_single_product_summary','QuadLayers_callback_function');
funzione QuadLayers_callback_function(){
    printf('
    <h1> Ciao!</h1>
    <div><h5>Benvenuto nella pagina del mio prodotto personalizzato</h5>
    <h4><a href="?link-to-somewere">Link a qualcuno!</a></h4>
    <img src="https://img.freepik.com/free-vector/bird-silhouette-logo-vector-illustration_141216-100.jpg" />
    </div>');
}

woocommerce_after_single_product_summary personalizzazione della pagina del prodotto

1.4) Logica condizionale su una singola pagina di prodotto

In precedenza abbiamo visto come aggiungere campi condizionali nella pagina di pagamento, ma puoi anche aggiungerli alla pagina del prodotto. Puoi creare una logica condizionale per soddisfare i requisiti che desideri utilizzando una qualsiasi delle funzioni native di WordPress. Diamo un'occhiata ad alcuni esempi.

1.4.1) Utente registrato e ruolo utente

user_is_logged_in() è una funzione predefinita di WordPress utilizzata per convalidare i visitatori del sito web. Inoltre, possiamo utilizzare la funzione wp_get_current_user() per recuperare tutte le informazioni relative all'utente connesso. Nello script seguente, stiamo semplicemente aggiungendo del contenuto in base al fatto che l'utente abbia effettuato l'accesso e al suo ruolo, ma puoi aggiungere le tue funzioni personalizzate per funzionalità più complesse

 add_action('woocommerce_before_single_product','QuadLayers_get_user');
funzione QuadLayers_get_user() {
    if( is_user_logged_in() ) {
    $utente = wp_get_utente_corrente(); 
    printf ('<h1>Buongiorno ' .$user->user_nicename.'!</h1>');
    $ruoli = (array) $utente->ruoli;
        if($ruoli[0]=='amministratore'){
            echo "<h4><b>Sei $roles[0]</h4></b>";
        }     
    } 
    altro {
    restituisce array();
    }     
}
1.4.2) ID prodotto e tassonomie

Allo stesso modo, possiamo recuperare l'ID prodotto e/o le categorie di prodotti. La differenza è che utilizzeremo l'oggetto globale WP $post per ottenere l'ID e la funzione get_the_terms() per ottenere le categorie di prodotti.

 add_action('woocommerce_before_single_product','QuadLayers_get_product_taxonomies');
funzione QuadLayers_get_product_taxonomies(){ 
    posta $ globale; 
    $term_obj_list = get_the_terms($post->ID, 'product_cat');
    $stringa_termini = join(', ', wp_list_pluck($lista_term_obj, 'nome'));
    if($terms_string=='Poster'){
        eco "
<h1>Questo è uno dei nostri migliori $terms_string</h1>"; echo "<h2>ID prodotto: $post->ID"; } }

Lo script precedente restituirà una singola categoria. Se devi recuperare più categorie o tag, dovrai creare una funzione più complessa. Dovrai scorrere le tassonomie prima di applicare i tuoi condizionali come mostrato di seguito:

 add_action('woocommerce_before_single_product','QuadLayers_get_multiple_taxonomies');
funzione QuadLayers_get_multiple_taxonomies(){
    posta $ globale;
    $args = array( 'tassonomia' => 'tag_prodotto',);
    $termini = wp_get_post_terms($post->ID,'tag_prodotto', $args);
    $conteggio = conteggio($termini);
 se ($conteggio > 0) {
        echo '<div class="custom-content"><h4>Elenco tag:</h4><ul>';
        foreach ($terms as $term) {echo '<li>'.$term->name.'</li>';}
        eco "</ul></div>";
    }
}

1.5) Modifica schede prodotto

Il gancio del filtro woocommerce_product_tabs ci consente di rimuovere, aggiungere, riordinare o aggiungere una nuova scheda nella sezione Informazioni aggiuntive . Lo script seguente rimuoverà la scheda Descrizione e il relativo contenuto, rinominerà la scheda Recensioni e cambierà la priorità delle Informazioni aggiuntive al primo posto.

 add_filter('woocommerce_product_tabs', 'woo_remove_product_tabs', 98);
funzione woo_remove_product_tabs($tabs) {
    unset($tabs['descrizione']); // Rimuovere la scheda Descrizione
    $tabs['recensioni']['titolo'] = __('Valutazioni'); // Rinomina la scheda Recensioni
    $tabs['informazioni_aggiuntive']['priorità'] = 5; // Informazioni aggiuntive all'inizio
    restituisci $schede;
}

Modifica la pagina del prodotto WooCommerce in modo programmatico - Personalizza le schede del prodotto Per modificare il contenuto di una scheda, è necessario utilizzare una funzione di callback come questa:

 add_filter('woocommerce_product_tabs', 'woo_custom_description_tab', 98);

funzione woo_custom_description_tab($schede) {
	$tabs['description']['callback'] = 'woo_custom_description_tab_content'; // Richiamata con descrizione personalizzata
	restituisci $schede;
}
funzione woo_custom_description_tab_content() {
	eco '
<h2>Descrizione personalizzata</h2>
'; echo 'Ecco una descrizione personalizzata'; }

Allo stesso modo, possiamo creare una nuova scheda come segue:

 add_filter('woocommerce_product_tab', 'woo_new_product_tab');
funzione woo_new_product_tab($schede) {	
	// Aggiunge la nuova scheda	
	$schede['test_tab'] = array(
		'title' => __( 'Scheda Nuovo prodotto', 'woocommerce' ),
		'priorita' => 50,
		'callback' => 'woo_new_product_tab_content'
	);
	restituisci $schede;
}
funzione woo_new_product_tab_content() {
	echo '<h2>Nuova scheda prodotto</h2><p>Ecco il contenuto della nuova scheda prodotto</p>.'; 
}

In questo esempio, abbiamo appena creato una nuova scheda chiamata "Scheda Nuovo prodotto". Ecco come appare nella parte anteriore.

1.6) Supporto per prodotti variabili

Le variazioni dei prodotti sono una funzionalità predefinita di WooCommerce e puoi creare e utilizzare prodotti variabili senza alcun tipo di personalizzazione. Tuttavia, devi seguire le linee guida di WooCommerce per rendere una soluzione personalizzata compatibile con le variazioni del prodotto.

È importante notare che qualsiasi soluzione personalizzata deve essere integrata con l'intero sito Web e non con una singola pagina. Quindi, tenendo presente questo, possiamo ancora utilizzare alcuni degli hook disponibili relativi ai prodotti variabili. Questi hook si attiveranno solo quando si trovano su una pagina di prodotto variabile.

  • woocommerce_before_variations_form
  • woocommerce_before_single_variation
  • woocommerce_single_variation
  • woocommerce_after_single_variation

2) Personalizza la pagina del prodotto sovrascrivendo i file modello WooCommerce

La seconda alternativa per modificare la pagina del prodotto WooCommerce in modo programmatico è sovrascrivere i file modello. Poiché questo metodo è un po' più rischioso del precedente, ti consigliamo di creare un backup completo del tuo sito prima di iniziare. Se non sei sicuro di come farlo, dai un'occhiata a questa guida su come eseguire il backup di un sito WordPress.

L'override dei file modello WooCommerce è simile all'override di qualsiasi altro file nel tuo tema figlio, quindi per evitare di perdere le tue personalizzazioni quando aggiorni il tuo tema, ti consigliamo di creare un tema figlio o di utilizzare uno di questi plugin se non ne hai uno.

2.1) Modificare le meta-informazioni

Per modificare le meta-informazioni, è necessario sovrascrivere il file modello responsabile della stampa dei dati corrispondenti. Il file meta.php che si trova nel plugin WooCommerce segue questo percorso: woocommerce/templates/single-product/meta.php

Ora modifica la directory dei file del tuo tema figlio e crea una cartella WooCommerce. Quindi, crea un'altra cartella al suo interno chiamata single-product e incolla lì il file meta.php : Child_theme/woocommerce/single-product/meta.php

Dopo questo, dovresti essere in grado di modificare il file meta.php e vedere le tue modifiche nel frontend. Il seguente file di esempio meta.php :

  • Cambia l'etichetta dello SKU in ID
  • Modifica i tag in Pubblicato in
  • Rimuovere l'etichetta della categoria
 prodotto $ globale;
?>
<div class="product_meta">

	<?php do_action( 'woocommerce_product_meta_start' ); ?>

	<?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

		<span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?> 
			<span class="sku"><?php echo ( $sku = $prodotto->get_sku() ) ? $sku: esc_html__( 'N/A', 'woocommerce'); ?>
			</span>
		</span>
	<?php endif; ?>
	<?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce ' ) . ' ', '</span>' ); ?>
	<?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Pubblicato sotto:', 'Pubblicato sotto:', count( $product->get_tag_ids () ), 'woocommerce' ) . ' ', '</span>' ); ?>
	<?php do_action( 'woocommerce_product_meta_end' ); ?>
</div>

2.2) Passa a un modello personalizzato per una specifica categoria di prodotti

Ora proviamo un compito più complesso. Sovrascriveremo il modello di prodotto singolo solo quando il prodotto corrente appartiene a una categoria specifica.

2.2.1) Modificare il file single-product.php

Per prima cosa, copia il file single-product.php e incollalo nella cartella del tuo tema figlio, nella directory WooCommerce:

Child_theme/woocommerce/single-product.php

Quindi, apri il file e controlla la riga 37: wc_get_template_part('content','single-product');

È così che entra in azione il file content-single-product.php , che stampa tutti gli elementi del prodotto corrente per completare il ciclo e costruire il layout.

Vogliamo sovrascrivere questo file solo quando il prodotto appartiene alla categoria specificata, quindi cancelleremo la riga 37: wc_get_template_part( 'content', 'single-product' ); e sostituirlo con il seguente script:

 $terms = wp_get_post_terms($post->ID, 'product_cat');
				$categorie = wp_list_pluck($termini, 'lumaca');
			
				if ( in_array( 'poster', $categories ) ) {
					wc_get_template_part( 'contenuto', 'poster-prodotto singolo');
				} altro {
					wc_get_template_part('contenuto', 'prodotto singolo');
				}

Nota che stiamo usando i prodotti di esempio forniti da WooCommerce, quindi esiste una categoria chiamata " Poster " che stiamo usando per questo esempio. Sostituisci semplicemente " poster " con una categoria di prodotti esistente del tuo sito web.

Ricorda che puoi trovare lo slug di tutte le tue categorie di prodotti nella dashboard principale di WordPress > Prodotti > Categorie .

2.2.2) Creare un nuovo file content-single-product.php

Ora dobbiamo creare un nuovo file che sovrascriverà quello predefinito content-single-product.php . Questo file avrà la categoria slug nel suo nome.

Dai un'occhiata all'esempio sopra per vedere come viene chiamato il file content-single-product-posters.php . Questo è importante perché il nome del file deve corrispondere al codice nel passaggio precedente, quindi il tuo file dovrebbe essere chiamato content-single-product-/*YOURCATEGORYSLUG*/.php .

In questo modo, wc_get_template_part( 'content', 'single-product-YOURCATEGORY' ) attiverà il file content-single-product-YOURCATEGORY.php e sovrascriverà il file modello WooCommerce predefinito.

Basta incollare il file predefinito content-single-product.php nella cartella WooCommerce del tuo tema figlio, rinominarlo seguendo le istruzioni spiegate sopra e creare alcune edizioni per testarlo.

2.2.3) Crea un modello personalizzato modificando il tuo nuovo file content-single-product.php

Questa è una pagina di prodotto di esempio che verrà visualizzata solo quando il prodotto corrente appartiene alla categoria " poster ". Vedrai che abbiamo aggiunto alcuni contenuti, aggiunto e rimosso elementi, riordinato ed eseguito alcuni shortcode.

Nonostante sia un esempio di base, ti darà un'idea di cosa puoi fare su una pagina modello e ti permetterà di esplorare nuove possibilità.

 // rimuove gli elementi di riepilogo del prodotto
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );
remove_action('woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20);
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_price', 10 );
	
		// Contenuto personalizzato
		printf('<h1>Questo è il <b>'.$post->nome_post.' </b>poster</h1>');
		printf('<h4>Una pagina di prodotto completamente personalizzata per i prodotti della categoria "poster"</h4>');
		// Descrizione
		printf('<h5>'.$post->post_excerpt.'</h5>');
		//miniatura
		do_action( 'woocommerce_before_single_product_summary' );
				
		//aggiungi meta
		do_action( 'woocommerce_single_product_summary');
		// codici brevi
		echo do_shortcode(' [ add_to_cart show_price="false" class="my-addtocart" ] '); echo "<h3>Contatto:</h3>".do_shortcode('[wpforms]'); echo "<h3>Altri poster:</h3>".do_shortcode(' [ product_category category="poster" orderby="desc" limit="4" ] ');

Ora se controlliamo il frontend, vedremo quanto segue: Come modificare la pagina del prodotto WooCommerce in modo programmatico - Modello di pagina del prodotto per una tassonomia specifica Nota che stiamo usando l'oggetto post globale. var_dump($post); per mostrarti tutte le informazioni disponibili relative al prodotto attuale. Puoi utilizzare qualsiasi suo dato proprio come abbiamo fatto nello script di esempio con la descrizione del prodotto: $post->post_excerpt .

3) Personalizza la pagina del prodotto con lo script CSS

Un altro modo pratico e semplice per modificare la pagina del prodotto WooCommerce (e qualsiasi altra pagina) in modo programmatico è utilizzare il codice CSS . Questo ti aiuterà a dare uno stile alla pagina del prodotto e a dargli l'aspetto della tua attività.

    1. Innanzitutto, devi creare un nuovo file nel tuo tema figlio con l'estensione .css in modo da poter aggiungere lì i tuoi script CSS. Ti consigliamo di denominarlo single-product.css o qualcosa di simile in modo che sia facile da trovare.
    2. Quindi, posiziona il file nella cartella principale del tema figlio allo stesso livello dei file functions.php e style.css .
    3. Successivamente, incolla il seguente script nel file functions.php del tuo tema figlio e sostituisci il nome del tuo file CSS se necessario.
 add_action( 'wp_enqueue_scripts', 'load_custom_product_style' );
      funzione load_custom_product_style() {
        se ( è_prodotto() ){
        wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all');
          wp_enqueue_style('product_css');
        }
	  }

Il condizionale if(is_product()) verificherà se la pagina corrente è una pagina di prodotto. Ciò impedisce di caricare inutilmente il file CSS quando non è una pagina di prodotto.

4. Dopo aver aggiunto questo snippet, dovresti essere in grado di modificare lo stile delle pagine dei prodotti aggiungendo le tue regole CSS personalizzate al tuo file CSS.

Anche se questo metodo è abbastanza semplice e ti fornirà una soluzione facile e veloce, potrebbe non essere l'ideale per alcuni casi. Poiché i CSS possono essere modificati dal frontend, se un utente sa come utilizzare gli strumenti di sviluppo del browser, potrebbe facilmente rendere visibile qualsiasi elemento nascosto modificando il CSS.

Modifica la pagina del singolo prodotto WooCommerce con CSS

Vediamo alcuni altri esempi di modifiche che puoi apportare alla pagina del prodotto usando un po' di CSS.

Per applicare i seguenti script, nella dashboard di WordPress, vai su Aspetto > Personalizza > CSS aggiuntivo.

Modifica la dimensione del carattere del titolo

Questo cambierà la dimensione del carattere dei titoli dei prodotti della tua pagina a 32. Basta regolare il codice per selezionare la dimensione desiderata.

 .woocommerce div.product .product_title { 
        dimensione del carattere: 32px; 
}
Cambia il colore del titolo

Puoi anche personalizzare il colore del titolo della pagina del tuo prodotto. Per farlo, usa semplicemente il codice seguente e regola il colore. Per questo esempio, utilizziamo l'arancione. Ti consigliamo di utilizzare un selettore di codici esadecimali come questo per scegliere il colore che desideri.

 .woocommerce div.product .product_title { 
            colore: #FFA500; 
}
Cambia il colore del pulsante Acquista ora

Allo stesso modo, puoi cambiare il colore del pulsante Acquista ora. In questo esempio, stiamo usando il blu dodger, ma puoi scegliere qualsiasi altro colore che desideri regolando il codice.

 .woocommerce div.product .button { 
        sfondo: #1E90FF; 
}

Conclusione

In sintesi, personalizzare il tuo negozio online è la chiave per distinguerti dalla concorrenza. Le pagine dei prodotti sono alcune delle pagine più importanti di qualsiasi negozio e puoi fare molto per migliorare l'esperienza del cliente e aumentare le vendite.

Anche se puoi utilizzare i plug-in per questo, ti consigliamo di modificare la pagina del prodotto WooCommerce in modo programmatico se hai alcune capacità di programmazione. Ti offre molta flessibilità per personalizzare qualsiasi elemento del tuo negozio senza la necessità di installare strumenti aggiuntivi. In questa guida abbiamo visto come personalizzare la pagina del prodotto in tre modi diversi:

  • Utilizzo di ganci
  • Sovrascrivere i modelli WooCommerce
  • Con script CSS

Quando possibile, dovresti provare a utilizzare gli hook di WooCommerce invece di sovrascrivere i file modello. È una delle migliori pratiche consigliate da WordPress ed è meno rischiosa. Tuttavia, per attività complesse che includono funzioni o oggetti, potrebbe essere necessario modificare i file modello. Se riesci a combinare entrambe le tecniche, sarai in grado di personalizzare tutto ciò che desideri nel tuo negozio.

Infine, dai un'occhiata al tema figlio completo che include tutti gli script di esempio che abbiamo utilizzato in questo tutorial. Per ulteriori informazioni su come personalizzare il tuo negozio, consulta le seguenti guide:

  • Impara a personalizzare i file modello WooCommerce
  • Come personalizzare la pagina del negozio WooCommerce
  • Personalizza il pulsante Aggiungi al carrello in WooCommerce
  • Come rimuovere i prodotti correlati a WooCommerce
  • Come modificare il WooCommerce Checkout (codifica e plugin)

Hai avuto problemi con il nostro tutorial? Facci sapere nella sezione commenti qui sotto e faremo del nostro meglio per aiutarti.