Technologie Gadgets, SEO Tipps, Geld Verdienen mit WEB!

Come spostare il campo coupon WooCommerce in Checkou…

Come spostare il campo coupon WooCommerce in Checkou...

Molti proprietari di negozi pensano che spostare il campo del coupon WooCommerce in fondo alla pagina (intorno alla sezione dei dettagli di pagamento) sia un’ottima idea. Questo campo si trova per impostazione predefinita nella parte superiore della pagina di pagamento. Se il cliente non ha effettuato l’accesso, questo campo si troverà proprio sotto l’avviso legale.

La cosa migliore è spostare il campo del coupon WooCommerce nella pagina di pagamento in una nuova posizione senza disturbare gli altri elementi del modello. In questo tutorial ti mostrerò come spostare il campo coupon WooCommerce nella pagina di pagamento Utilizzando un codice personalizzato.

Sgancia il coupon dalla posizione corrente

Innanzitutto, devi sganciare il modulo del coupon dalla sua posizione corrente (in alto nella pagina di pagamento). Questa attività potrebbe essere eseguita tramite una singola riga di codice. Si prega di vedere l’esempio qui sotto.

rimuovi_action(‘woocommerce_before_checkout_form’, ‘woocommerce_checkout_coupon_form’);

Questo snippet rimuoverà il campo del coupon dal modulo di pagamento.

Aggiungi il modulo coupon alla posizione target

Successivamente, dovrò aggiungerlo al modello nella posizione desiderata. In questo caso, aggiungerò il campo sotto il modulo di pagamento. Ricorda che il campo coupon WooCommerce non può essere nidificato all’interno del modulo di pagamento perché potrebbe influire sul pulsante Effettua ordine. Aggiungi il campo verso la fine del modulo tramite questo snippet:

add_action(‘woocommerce_after_checkout_form’, ‘woocommerce_checkout_coupon_form’);

Sposta il campo coupon nella pagina di pagamento

Per spostare il coupon WooCommerce nella pagina di pagamento, utilizzerò la libreria di dialogo dell’interfaccia utente jQuery per aiutarmi con la funzionalità della finestra di dialogo. In funzioni.phpaggiungi il seguente codice (nel caso in cui il tuo sito web non includa già la libreria di dialogo dell’interfaccia utente jQuery).

funzione cw_scripts() wp_enqueue_script(‘jquery-ui-dialog’); add_action(‘wp_enqueue_scripts’, ‘cw_scripts’);

Successivamente, crea un’istanza della finestra di dialogo del modello jQuery contenente tutto il contenuto del codice coupon. Posiziona la finestra di dialogo del modello, in modo che si ancori a un elemento HTML all’interno del modulo di pagamento. Utilizza i filtri (o le azioni) WooCommerce esistenti per posizionare l’elemento HTML nella posizione desiderata all’interno del modulo di pagamento.

Dal lancio alla personalizzazione dei tuoi negozi WooCommerce, DreamHost è al tuo servizio.

Che tu sia un principiante o un esperto, la Piattaforma DreamHost si basa sull’interfaccia utente, dove puoi creare e personalizzare il tuo negozio online in pochi secondi.

Nel funzioni.phpaggiungi il seguente codice:

function cw_show_coupon_js() wc_enqueue_js(‘$(“a.showcoupon”).parent().hide();’); wc_enqueue_js(‘dialog = $(“form.checkout_coupon”).dialog( autoOpen: false, larghezza: 500, minHeight: 0, modal: false, appendTo: “#coupon-anchor”, position: my: “left” , at: “left”, of: “#coupon-anchor”, draggable: false, resizable: false, dialogClass: “coupon-special”, closeText: “Close”, pulsanti: );’); wc_enqueue_js(‘$(“#show-coupon-form”).click( function() if (dialog.dialog(“isOpen”)) $(“.checkout_coupon”).hide(); dialog.dialog( ” close” ); else $(“.checkout_coupon”).show(); dialog.dialog( “open” ); return false;);’); add_action(‘woocommerce_before_checkout_form’, ‘cw_show_coupon_js’);

Successivamente, per mostrare il campo del coupon al momento del pagamento, aggiungi il collegamento “Fai clic qui per inserire il codice”. Questo codice collegherà le sezioni dei dettagli del cliente e dei dettagli dell’ordine. Per controllare altre posizioni per questo collegamento, puoi esaminare altre azioni e filtri WooCommerce nella pagina di pagamento (woocommerce_checkout_fields o woocommerce_before_checkout_billing_form). Se non riesci a trovare il filtro o il metodo giusto, puoi sovrascrivere il modello di pagina di pagamento WooCommerce predefinito e individuare il collegamento nella posizione desiderata.

funzione cw_show_coupon() globale $woocommerce; if ($woocommerce->cart->needs_payment()) echo ‘

Hai un coupon? Fai clic qui per inserire il codice coupon.

‘; add_action(‘woocommerce_checkout_after_customer_details’, ‘cw_show_coupon’);

Fare clic sul collegamento e inserire il codice coupon. Otterrai il seguente risultato.

Riepilogo

In questo articolo, ho discusso l’importante questione dello spostamento del campo del coupon WooCommerce nella pagina di pagamento nella posizione desiderata. Spesso potresti trovare un filtro o un’azione per individuare il collegamento. Tuttavia, potresti anche sovrascrivere il modello predefinito per individuare il collegamento. Se hai bisogno di ulteriore aiuto in questo senso, lascia un commento.

×

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

Grazie per esserti iscritto!