Come creare una pagina di ricezione dell'ordine personalizzato WooCommerce

Pubblicato: 2021-04-11

Pagina di ricezione dell'ordine personalizzato WooCommerce Vuoi aggiungere una pagina di ringraziamento personalizzata nel tuo negozio WooCommerce? La pagina di ringraziamento è una delle pagine più importanti in qualsiasi negozio WooCommerce. è anche chiamata pagina dell'ordine ricevuto.

WooCommerce mostra i contenuti della pagina di ringraziamento dal modello thanksyou.php. Questo modello si trova nella cartella woocommerce/templates/checkout/ . A scopo illustrativo, utilizzeremo il tema Storefront. Il thanksyou.php deve essere copiato in: wp-content/plugins/woocommerce/checkout/ folder .

In questo post, ti mostreremo come creare il nostro modello copiando il file thanksyou.php nella cartella del tuo tema in una struttura di cartelle simile.

È necessario disporre di alcune conoscenze di codifica se si desidera utilizzare questo metodo per personalizzare la pagina di ricezione dell'ordine.

Diamo un'occhiata a come personalizzare la pagina dell'ordine ricevuto.

Pagina di ricezione dell'ordine personalizzato WooCommerce

Innanzitutto, devi creare le 2 cartelle, "woocommerce" e "checkout". Ti consigliamo di modificare i dati mostrati nella tabella Dettagli dell'ordine e i dettagli del cliente (una volta effettuato l'accesso).

Se non vedi il file, WooCommerce usa una funzione woocommerce_order_details_table() che è collegata all'hook woocommerce_thankyou. La funzione woocommerce_order_details_table() è definita nel file include/wc-template-functions.php.

Personalizzazione della pagina dell'ordine ricevuto sovrascrivendo i modelli WooCommerce

La pagina di ringraziamento è in realtà una raccolta di 4 diversi file modello:

modelli/checkout/grazie.php
modelli/ordine/dettagli-ordine.php
templates/order/order-details-item.php
modelli/ordine/dettagli-ordine-cliente.php

Ecco come viene visualizzata la pagina dell'ordine ricevuto:

Vogliamo aggiungere un codice coupon al cliente per il suo prossimo acquisto e rimuovere il metodo di pagamento dalla sezione superiore.

Vogliamo aggiungerlo sopra la sezione dei dettagli dell'ordine.

Pertanto, aggiungeremo il seguente codice nel modello di pagina di ringraziamento :

<?php Since this is your first order, we are happy to extend a 15% discount on your next purchase. Use the coupon code &lt;strong&gt;WELCOME15&lt;/strong&gt; to avail the discount.

Di seguito è riportato il modello thanksyou.php dal mio tema:

<!--?php defined( 'ABSPATH' ) || exit; ?-->
<div class="woocommerce-order">

<!--?php     if ( $order ) : do_action( 'woocommerce_before_thankyou', $order->get_id() );</p> <p>                        ?-->

<!--?php if ( $order->has_status( 'failed' ) ) : ?-->

<a href="<?php echo esc_url( $order->get_checkout_payment_url() ); ?>" class="button pay"><?php esc_html_e( 'Pay', 'woocommerce' ); ?></a>

<?php if ( is_user_logged_in() ) : ?>

<a href="<?php echo esc_url( wc_get_page_permalink( 'myaccount' ) ); ?>" class="button pay"><?php esc_html_e( 'My account', 'woocommerce' ); ?></a>

<?php endif; ?>

</p>

<?php else : ?>

<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

<ul class="woocommerce-order-overview woocommerce-thankyou-order-details order_details">

<li class="woocommerce-order-overview__order order">

<?php esc_html_e( 'Order number:', 'woocommerce' ); ?>

<strong><?php echo $order->get_order_number(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>

</li>

<li class="woocommerce-order-overview__date date">

<?php esc_html_e( 'Date:', 'woocommerce' ); ?>

<strong><?php echo wc_format_datetime( $order->get_date_created() ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>

</li>

<?php if ( is_user_logged_in() && $order->get_user_id() === get_current_user_id() && $order->get_billing_email() ) : ?>

<li class="woocommerce-order-overview__email email">

<?php esc_html_e( 'Email:', 'woocommerce' ); ?>

<strong><?php echo $order->get_billing_email(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>

</li>

<?php endif; ?>

<li class="woocommerce-order-overview__total total">

<?php esc_html_e( 'Total:', 'woocommerce' ); ?>

<strong><?php echo $order->get_formatted_order_total(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></strong>

</li>

<?php if ( $order->get_payment_method_title() ) : ?>

<li class="woocommerce-order-overview__payment-method method">

<?php esc_html_e( 'Payment method:', 'woocommerce' ); ?>

<strong><?php echo wp_kses_post( $order->get_payment_method_title() ); ?></strong>

</li>

<?php endif; ?>

</ul>

<?php endif; ?>

<p>Since this is your first order, we are happy to extend a 15% discount on your next purchase. Use the coupon code <strong>WELCOME15</strong> to avail the discount.</p>

<?php do_action( 'woocommerce_thankyou_' . $order->get_payment_method(), $order->get_id() ); ?>

<?php do_action( 'woocommerce_thankyou', $order->get_id() ); ?>

<?php else : ?>

<p class="woocommerce-notice woocommerce-notice--success woocommerce-thankyou-order-received"><?php echo apply_filters( 'woocommerce_thankyou_order_received_text', esc_html__( 'Thank you. Your order has been received.', 'woocommerce' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p>

<?php endif; ?>

</div>

Questo è il risultato: sezione

È importante notare che una volta che sai quali dati provengono da quale modello, devi solo copiare il modello giusto nella cartella del tuo plug-in.

Conclusione

In questo post, hai imparato a sovrascrivere il modello dell'ordine ricevuto. Puoi utilizzare lo stesso metodo per personalizzare gli altri modelli. In caso di problemi, consultare uno sviluppatore WordPress qualificato.

Come creare una pagina di ricezione dell'ordine personalizzato WooCommerce

Pagina di ricezione dell'ordine personalizzato WooCommerce

Personalizzazione della pagina dell'ordine ricevuto sovrascrivendo i modelli WooCommerce

Conclusione

Articoli simili