Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Come aggiungere una pagina di prodotto singolo personalizzata in WooCom…

Come aggiungere una pagina di prodotto singolo personalizzata in WooCom...

La pagina del prodotto WooCommerce ha una struttura predeterminata che mostra i dettagli del prodotto in un ordine fisso. In generale, i temi del negozio WooCommerce cambiano leggermente questa situazione modificando l’ordine delle Informazioni, ma le cose rimangono più o meno le stesse.

Il problema è che l’ordine di riepilogo dei prodotti è predefinito e nessun tema potrebbe fare abbastanza per dare un nuovo ordine al riepilogo. Fortunatamente, la soluzione a questo problema (personalizzare la pagina del prodotto WooCommerce) è semplice: modificare l’ordine della pagina di riepilogo del prodotto tramite gli hook WooCommerce. Ricorda che il codice andrà in Functions.php (situato nel tema principale o nel tema figlio).

Hosting WooCommerce gestito a partire da $ 10 al mese.

Crea, gestisci e personalizza il tuo negozio WooCommerce in completa libertà.

Ganci del singolo prodotto WooCommerce

Il contenuto del riepilogo del singolo prodotto WooCommerce viene visualizzato attraverso l’azione dei seguenti hook. Questi hook vengono eseguiti in ‘woocommerce/includes/wc-template-hooks.php’

Ogni gancio mostra un dettaglio del prodotto. Noterai che a ciascun gancio è associato un numero. Questo numero imposta la priorità dell’hook e determina l’ordine di esecuzione dell’hook. In questo caso, più alto è il numero, minore sarà la priorità di esecuzione. Ad esempio, l’ordine di esecuzione di “woocommerce_single_product_summary” sarebbe titolo del prodotto, prezzo, estratto, aggiunta al carrello, meta e collegamenti di condivisione:

add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_title’, 5); add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_rating’, 10); add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_price’, 10); add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20); add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_meta’, 40); add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_sharing’, 50);

Ora per cambiare l’ordine degli elementi basta cambiare la priorità associata e WordPress cambierà l’ordine di visualizzazione. Per questo, basta rimuovere prima l’hook e poi aggiungerlo nuovamente con la priorità modificata. Controlla il seguente snippet di codice per l’implementazione di questo processo:

/** modifica della posizione dell’estratto **/remove_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 20 ); add_action(‘woocommerce_single_product_summary’, ‘woocommerce_template_single_excerpt’, 31);

Vuoi testare le tue modifiche sugli URL di staging gratuiti?

Prova l’hosting WooCommerce gestito da DreamHost per un’Esperienza senza problemi.

Crea e mostra campi personalizzati

Usa il Plug-in avanzato per campi personalizzati per aggiungere un tipo di post personalizzato WooCommerce “Prodotti”. Questo viene quindi utilizzato per aggiungere dati personalizzati.

Ora per visualizzare i dati personalizzati nella pagina di riepilogo del prodotto, utilizzerò una funzione che aggancia i campi a un’azione WooCommerce (con la priorità desiderata). Nel seguente esempio di codice, visualizzerò i campi personalizzati dopo l’estratto del prodotto ma prima dell’aggiunta al carrello:

function cw_add_custom_fields() echo ‘PERSONALIZZA CONTENUTO’.get_post_meta(get_the_ID(), “PERSONALIZZA CONTENUTO”, true); echo ‘PERSONALIZZA CAMPO’.get_field(“PERSONALIZZA CAMPO”); add_action( ‘woocommerce_single_product_summary’, ‘cw_add_custom_fields’, 21 );

Conclusione

In questo tutorial, ho discusso come personalizzare la pagina del prodotto WooCommerce. Questo è un ottimo modo per personalizzare la pagina del prodotto WooCommerce attraverso una struttura personalizzata. Se hai bisogno di aiuto, lascia un commento qui sotto.

×

Ricevi la nostra newsletter
Sii il primo a ricevere gli ultimi aggiornamenti e tutorial.

Grazie per esserti iscritto!