Cum se creează o pagină personalizată de comandă primită WooCommerce

Publicat: 2021-04-11

Pagina de comandă personalizată WooCommerce primită Doriți să adăugați o pagină personalizată de mulțumire în magazinul dvs. WooCommerce? Pagina de mulțumire este una dintre cele mai importante pagini din orice magazin WooCommerce. se mai numește și pagina comenzii primite.

WooCommerce arată conținutul paginii Mulțumiri din șablonul thankyou.php. Acest șablon se găsește în woocommerce/templates/checkout/ folder . În scop ilustrativ, vom folosi tema Storefront. Thankyou.php ar trebui copiat în: wp-content/plugins/woocommerce/checkout/ folder .

În această postare, vă vom arăta cum puteți să ne faceți propriul șablon prin copierea fișierului thankyou.php în folderul temei dvs. într-o structură de foldere similară.

Trebuie să aveți niște cunoștințe de codificare dacă doriți să utilizați această metodă pentru a vă personaliza pagina de primire a comenzii.

Să vedem cum puteți personaliza pagina comenzii primite.

Pagina de comandă personalizată WooCommerce primită

Mai întâi, trebuie să creați cele 2 foldere, „woocommerce” și „checkout”. Vă recomandăm să modificați datele afișate în tabelul cu detaliile comenzii și detaliile clientului (când sunteți autentificat).

Dacă nu vedeți fișierul, WooCommerce utilizează o funcție woocommerce_order_details_table() care este atașată la hook-ul woocommerce_thankyou. Funcția woocommerce_order_details_table() este definită în fișierul includes/wc-template-functions.php.

Personalizarea paginii de comandă primită prin suprascrierea șabloanelor WooCommerce

Pagina Mulțumiri este de fapt o colecție de 4 fișiere șablon diferite:

  • templates/checkout/thankyou.php
  • templates/order/order-details.php
  • templates/order/order-details-item.php
  • templates/comanda/detalii-comanda-client.php

Iată cum este afișată pagina comenzii primite: Comanda Primita

Dorim să adăugăm un cod de cupon clientului pentru următoarea lor achiziție și să eliminăm Metoda de plată din secțiunea de sus.

Dorim să-l adăugăm deasupra secțiunii cu detaliile comenzii.

Prin urmare, vom adăuga următorul cod în șablonul de pagină de mulțumire : 

<?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.

Mai jos este șablonul thankyou.php din tema mea: 

<!--?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>

Acesta este rezultatul: secțiune

Este important să rețineți că, odată ce știți ce date provin de la ce șablon, trebuie doar să copiați șablonul potrivit în folderul pluginului dvs.

Concluzie

În această postare, ați învățat cum să suprascrieți șablonul de comandă primită. Puteți folosi aceeași metodă pentru a personaliza celelalte șabloane. Dacă aveți probleme, vă rugăm să consultați un dezvoltator WordPress calificat.

Articole similare

  1. Redirecționare WooCommerce după deconectare [Ghid final]
  2. Peste 100 de sfaturi, trucuri și fragmente Ghid de ascundere final pentru WooCommerce
  3. Redirecționare WooCommerce după finalizare: Redirecționare către pagina personalizată de mulțumire
  4. Cum să eliminați titlul categoriei de produse WooCommerce
  5. Cum să redirecționezi o pagină WordPress fără pluginuri?
  6. Cum să mutați meniul principal Vitrina WooCommerce
  7. Cum să aprobi automat comenzile în WooCommerce
  8. Cum să eliminați textul subsolului de e-mail „Construit cu WooCommerce”
  9. Cum să ascundeți metodele de expediere pentru anumite condiții
  10. Cum să ștergeți coșul la deconectare în WooCommerce
  11. Cum să editați șablonul de pagină de plată WooCommerce
  12. Cum să obțineți ID-ul comenzii pe pagina de plată WooCommerce
  13. Cum să creați o zonă de widget personalizată în WordPress pas cu pas
  14. Cum să verificați dacă utilizatorul este autentificat în WordPress
  15. Ghid rapid pentru optimizarea plății WooCommerce
  16. Cum să obțineți numele curent al categoriei de produse în WooCommerce
  17. Cum să obțineți metode de plată în WooCommerce » Exemplu de cod
  18. Cum să forțați plata securizată în WooCommerce
  19. Cum se creează un cupon în WooCommerce
  20. Cum să schimbați titlul paginii de achiziție WooCommerce