Come personalizzare le pagine dei prodotti WooCommerce

Pubblicato: 2021-04-15

Personalizza le pagine dei prodotti WooCommerce Stai cercando dei modi per personalizzare le pagine dei tuoi prodotti? Il design e l'esperienza utente delle pagine dei tuoi prodotti possono avere un impatto positivo sulle tue vendite. Queste pagine mostrano i tuoi prodotti nella loro luce migliore, motivando gli acquirenti a premere il pulsante "Aggiungi al carrello".

Una buona pagina di prodotto dovrebbe essere informativa e dovrebbe avere un design ordinato. Questa pagina dovrebbe anche esprimere il tuo marchio unico.

Ci sono molti modi diversi per personalizzare la pagina del negozio. Puoi utilizzare le opzioni integrate, frammenti di codice personalizzati e plug-in.

Personalizza le pagine dei prodotti WooCommerce

Le due pagine principali in cui si verifica la maggior parte delle personalizzazioni in WooCommerce sono la pagina del negozio e la pagina dei prodotti. È necessario personalizzarli per aumentare le vendite e ottimizzare l'inizio del processo di acquisto.

Ti consigliamo di avere un design pulito incentrato sulla fornitura della migliore esperienza del cliente per migliorare i tassi di conversione.

In questo post, condivideremo alcune soluzioni per modificare la pagina del prodotto in modo programmatico.

Per prima cosa, diamo un'occhiata al layout della pagina del prodotto predefinito.

Layout della pagina del prodotto WooCommerce

Ecco come viene visualizzata la pagina del prodotto: impaginazione

Esistono 2 file WooCommerce principali responsabili dell'output della pagina del prodotto.

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

Puoi sovrascrivere i file modello utilizzando un tema figlio. Puoi anche utilizzare gli hook di WooCommerce invece di sovrascrivere i file modello, ove possibile. Questa è una delle migliori pratiche consigliate da WordPress.

Vediamo alcuni esempi pratici di come è possibile personalizzare la pagina del prodotto.

Modifica la pagina del prodotto WooCommerce utilizzando gli hook

In questa sezione utilizzeremo gli hook per personalizzare la pagina del prodotto.

1. Rimuovere gli elementi

Ci sono diversi ganci per rimuovere diversi elementi nella pagina dei prodotti. I ganci funzionano con elementi specifici.

Ciò significa che è necessario utilizzare il corretto hook, funzione e valore di priorità.

Ecco alcuni script per rimuovere diversi elementi e personalizzare la pagina del prodotto. Copialo e incollalo nel file functions.php:

// remove title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// remove  rating  stars

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// remove product meta

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// remove  description

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// remove images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// remove additional information tabs

remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

2.Aggiungi nuovi elementi

Puoi aggiungere nuovi contenuti alla pagina del prodotto creando la tua funzione. Dovresti copiarlo e incollarlo nel file functions.php:

 

add_action('woocommerce_after_single_product_summary','njengah_callback_function'); 

function njengah_callback_function(){    
    printf('     
    <h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>'); 
}

Questo è il risultato: aggiungi elemento

3. Modifica schede prodotto

Puoi utilizzare il gancio del filtro woocommerce_product_tabs per rimuovere, aggiungere, riordinare o aggiungere una nuova scheda nella sezione Informazioni aggiuntive.

Ecco un esempio di uno script che rimuoverà la scheda Descrizione e il suo contenuto, rinominerà la scheda Recensioni e cambierà la priorità di Informazioni aggiuntive al primo posto. Dovresti copiarlo e incollarlo nel file functions.php:

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

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );           // Remove the Description tab

    $tabs['reviews']['title'] = __( 'Ratings' );     // Rename the Reviews tab

    $tabs['additional_information']['priority'] = 5;       // Additional information at first

    return $tabs;

}

Questo è il risultato: modificare le schede dei prodotti

È possibile creare una nuova scheda utilizzando il codice seguente. Dovresti copiarlo e incollarlo nel file functions.php:

 

add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs['test_tab'] = array(

                        'title'    => __( 'New Tab Here!', 'woocommerce' ),

                        'priority'  => 50,

                        'callback'  => 'njengah_new_product_tab_content'

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';

}

Questo è il risultato: nuova scheda

Personalizza la pagina del prodotto sovrascrivendo i file modello WooCommerce

Puoi anche modificare la pagina del prodotto WooCommerce in modo programmatico sovrascrivendo i file modello.

Tuttavia, è importante notare che questo metodo è più rischioso del precedente. Pertanto, ti consigliamo di creare un backup completo del tuo sito prima di procedere.

Questo processo è simile all'override di qualsiasi altro file nel tema figlio.

Ti consigliamo di creare un tema figlio o un plug-in per apportare le modifiche.

1. Modifica le meta-informazioni

In questa sezione, modificheremo le meta-informazioni. Ciò significa che abbiamo il file modello responsabile per stampare i dati corrispondenti. È il file meta.php.

Questo file si trova nel plugin WooCommerce e segue questo percorso: woocommerce/templates/single-product/meta.php.

Il passaggio successivo è modificare la directory dei file del tema figlio e creare una cartella WooCommerce.

Crea un'altra cartella al suo interno chiamata single-product e incolla il file meta.php: Child_theme/woocommerce/single-product/meta.php

Questo ti permetterà 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

global $product;
?>

<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 = $product->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( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

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

</div>

Questo è il risultato: cambia la meta descrizione

2. Personalizza la pagina del prodotto con CSS Script

Puoi facilmente modificare la pagina del prodotto WooCommerce in modo programmatico utilizzando il codice CSS.

Ti aiuterà a dare uno stile alla pagina del prodotto e a dargli l'aspetto e la sensazione della tua attività.

La prima cosa che devi fare è creare un nuovo file nel tuo tema figlio con estensione .css in modo da poter aggiungere lì i tuoi script CSS. Puoi nominarlo single-product.css.

Posiziona il file nella cartella principale del tema figlio allo stesso livello dei file functions.php e style.css.

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', 'njengah_custom_product_style' );

function njengah_custom_product_style() {

if ( is_product() ){

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.

A questo punto dovresti essere in grado di modificare lo stile delle pagine dei prodotti utilizzando regole CSS personalizzate.

Conclusione

In questo post, abbiamo condiviso alcuni dei modi in cui puoi personalizzare la pagina del tuo prodotto. Tuttavia, prima di apportare modifiche, ti consigliamo di utilizzare uno strumento come Hotjar che ti fornisce dati su come i visitatori interagiscono con la tua pagina.

Puoi anche controllare cosa stanno facendo i rivenditori online come Amazon e Walmart. Puoi imitare il loro aspetto includendo caratteristiche comuni.

Se hai bisogno di aiuto per personalizzare questa pagina, contatta uno sviluppatore WordPress qualificato.