Come modificare la pagina di pagamento di WooCommerce

Pubblicato: 2021-07-21

Modifica la pagina di pagamento di WooCommerce

Vuoi modificare la pagina di pagamento del tuo negozio WooCommerce? Continua a leggere, poiché ti forniremo una soluzione.

È importante notare che la pagina di pagamento è dove i clienti pagano per il prodotto o servizio che offri nel tuo negozio. Pertanto, devi farlo nel modo giusto.

Tuttavia, WooCommerce ti fornisce una configurazione predefinita, ma potrebbe essere necessario personalizzarla per necessità perché non ha un aspetto professionale. Questo ti aiuterà ad aumentare i tuoi tassi di conversione.

Come modificare la pagina di pagamento di WooCommerce

Esistono due modi per personalizzare la pagina:

Modello di pagamento personalizzato : la documentazione di WooCommerce afferma chiaramente che puoi copiare il modello di pagamento sul tuo tema in una struttura di cartelle come questa: woocommerce/checkout/form-checkout.php. Ciò significa che puoi personalizzare form-checkout.php in base alle tue esigenze.
Plugin : sono disponibili una varietà di estensioni per personalizzare la pagina di pagamento. Alcuni di essi sono disponibili gratuitamente, mentre altri sono estensioni a pagamento.
Codice personalizzato : questo metodo è un po' complicato e richiede alcune conoscenze tecniche per implementare le soluzioni. Tuttavia, questa è una soluzione perfetta se vuoi apportare solo una piccola modifica e non vuoi acquistare un plug-in. Useremo questo metodo in questo tutorial.

Passaggi per modificare la pagina di pagamento di WooCommerce

Prima di iniziare, vale la pena ricordare che WooCommerce ha hook di azione su ogni pagina. Gli action hook possono essere utilizzati per aggiungere o rimuovere elementi dalla pagina di pagamento. Ci sono 9 action hook nella pagina di pagamento:

woocommerce_before_checkout_form
woocommerce_checkout_before_customer_details
woocommerce_checkout_billing
woocommerce_checkout_shipping
woocommerce_checkout_after_customer_details
woocommerce_checkout_before_order_review
woocommerce_checkout_order_review
woocommerce_checkout_after_order_review
woocommerce_after_checkout_form

Inoltre, potrebbero essere disponibili 7 ganci aggiuntivi, a seconda del layout del tema. Puoi verificarli qui.

Abbiamo deciso di condividere alcuni esempi per aiutarti. Ecco i passaggi che devi seguire:

Accedi al tuo sito WordPress e accedi alla Dashboard come utente amministratore.
Dal menu Dashboard, fai clic su Menu Aspetto > Menu Editor temi . Quando viene aperta la pagina dell'editor del tema, cerca il file delle funzioni del tema in cui aggiungeremo la funzione che aggiungerà un messaggio al cliente sui dettagli di spedizione .
Aggiungi il seguente codice al file php :

add_action( 'woocommerce_before_checkout_shipping_form', function() {

echo 'Don\'t forget to include your unit number in the address!';

});

Questo è il risultato:
Se vuoi manipolare qualsiasi campo, puoi usare il filtro woocommerce_checkout_fields. Ad esempio, per rimuovere il campo del numero di telefono di fatturazione, aggiungi il seguente codice allo stesso file:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

unset($fields['billing']['billing_phone']); return $fields; }

Per aggiungere un campo del numero di telefono di spedizione, aggiungi il seguente codice:

// Hook in

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

$fields['shipping']['shipping_phone'] = array(

'label'   =&gt; __('Phone', 'woocommerce'),

'placeholder'=&gt;  _x('Phone', 'placeholder', 'woocommerce'),

'required' =&gt; false,

'class'    =&gt; array('form-row-wide'),

'clear'    =&gt; true

);

return $fields;

}

/**

* Display field value on the order edit page

*/

add_action( 'woocommerce_admin_order_data_after_shipping_address', 'njengah_custom_checkout_field_display_admin_order_meta', 10, 1 );

function njengah_custom_checkout_field_display_admin_order_meta($order){

global $post_id;

$order = new WC_Order( $post_id );

echo '&lt;p&gt;&lt;strong&gt;'.__('Field Value').':&lt;/strong&gt; ' . get_post_meta($order-&gt;get_id(), '_shipping_field_value', true ) . '&lt;/p&gt;';

}

Per modificare il segnaposto del campo CAP o CAP, aggiungere il seguente codice:

add_filter( 'woocommerce_checkout_fields' , 'njengah_override_checkout_fields' );

// Our hooked in function - $fields is passed via the filter!

function njengah_override_checkout_fields( $fields ) {

$fields['billing']['billing_postcode']['placeholder'] = 'Postal Code';

return $fields;

}

Conclusione

In sintesi, abbiamo condiviso come utilizzare gli action hook di WooCommerce per modificare la pagina di pagamento. È importante notare che puoi visualizzare la documentazione di WooCommerce qui.

Se non hai familiarità con la codifica, ti consigliamo di utilizzare un plug-in. Puoi anche consultare uno sviluppatore WordPress qualificato.

Ci auguriamo che questo tutorial ti abbia aiutato a trovare una soluzione al tuo problema.

Come modificare la pagina di pagamento di WooCommerce

Come modificare la pagina di pagamento di WooCommerce

Passaggi per modificare la pagina di pagamento di WooCommerce

Conclusione

Articoli simili