Jak utworzyć stronę otrzymanych zamówień niestandardowych WooCommerce

Opublikowany: 2021-04-11

Strona otrzymanego zamówienia niestandardowego WooCommerce Czy chcesz dodać niestandardową stronę z podziękowaniem w swoim sklepie WooCommerce? Strona z podziękowaniami jest jedną z najważniejszych stron w każdym sklepie WooCommerce. nazywana jest również stroną otrzymanego zamówienia.

WooCommerce pokazuje zawartość strony z podziękowaniem z szablonu thankyou.php. Ten szablon znajduje się w folderze woocommerce/templates/checkout/ . W celach ilustracyjnych użyjemy motywu Storefront. Thankyou.php należy skopiować do: wp-content/plugins/woocommerce/checkout/ folder .

W tym poście pokażemy Ci, jak możesz stworzyć własny szablon, kopiując plik thankyou.php do folderu Twojego motywu w podobnej strukturze folderów.

Musisz mieć pewną wiedzę na temat kodowania, jeśli chcesz użyć tej metody, aby dostosować stronę otrzymanych zamówień.

Przyjrzyjmy się, jak dostosować stronę otrzymanych zamówień.

Strona otrzymanego zamówienia niestandardowego WooCommerce

Najpierw musisz utworzyć 2 foldery, „woocommerce” i „checkout”. Zalecamy zmianę danych wyświetlanych w tabeli Szczegóły zamówienia i danych klienta (po zalogowaniu).

Jeśli nie widzisz pliku, WooCommerce używa funkcji woocommerce_order_details_table(), która jest dołączona do haka woocommerce_thankyou. Funkcja woocommerce_order_details_table() jest zdefiniowana w pliku include/wc-template-functions.php.

Dostosowywanie strony otrzymanego zamówienia poprzez nadpisywanie szablonów WooCommerce

Strona z podziękowaniami jest w rzeczywistości zbiorem 4 różnych plików szablonów:

  • szablony/do kasy/dziękuję.php
  • szablony/zamówienie/szczegóły-zamówienia.php
  • szablony/zamówienie/szczegóły-zamówienia.php
  • szablony/zamówienie/szczegóły-zamówienia-customer.php

W ten sposób wyświetlana jest strona otrzymanego zamówienia: zamówienie przyjęte

Chcemy dodać klientowi kod kuponu na następny zakup i usunąć metodę płatności z górnej sekcji.

Chcemy go dodać nad sekcją szczegółów zamówienia.

Dlatego dodamy następujący kod w szablonie strony z podziękowaniami : 

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

Poniżej znajduje się szablon thankyou.php z mojego motywu: 

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

Oto wynik: Sekcja

Ważne jest, aby pamiętać, że gdy już wiesz, jakie dane pochodzą z jakiego szablonu, wystarczy skopiować odpowiedni szablon do folderu wtyczki.

Wniosek

W tym poście dowiedziałeś się, jak nadpisać szablon otrzymanego zamówienia. Możesz użyć tej samej metody, aby dostosować inne szablony. Jeśli masz jakiekolwiek problemy, skonsultuj się z wykwalifikowanym programistą WordPress.

Podobne artykuły

  1. Przekierowanie WooCommerce po wylogowaniu [Najlepszy przewodnik]
  2. Ponad 100 porad, sztuczek i fragmentów Kompletny przewodnik po ukryciu WooCommerce
  3. Przekierowanie WooCommerce po realizacji transakcji: Przekierowanie na niestandardową stronę z podziękowaniami
  4. Jak usunąć tytuł kategorii produktu WooCommerce
  5. Jak przekierować stronę WordPress bez wtyczek?
  6. Jak przenieść główne menu Storefront WooCommerce
  7. Jak automatycznie zatwierdzać zamówienia w WooCommerce
  8. Jak usunąć tekst stopki wiadomości e-mail „Zbudowany za pomocą WooCommerce”
  9. Jak ukryć metody wysyłki w określonych warunkach?
  10. Jak wyczyścić koszyk przy wylogowaniu w WooCommerce
  11. Jak edytować szablon strony kasy WooCommerce
  12. Jak uzyskać identyfikator zamówienia na stronie kasy WooCommerce?
  13. Jak utworzyć niestandardowy obszar widżetów w WordPressie krok po kroku
  14. Jak sprawdzić, czy użytkownik jest zalogowany w WordPress
  15. Szybki przewodnik po optymalizacji kasy WooCommerce
  16. Jak uzyskać aktualną nazwę kategorii produktu w WooCommerce?
  17. Jak uzyskać metody płatności w WooCommerce » Przykład kodu
  18. Jak wymusić bezpieczną realizację transakcji w WooCommerce?
  19. Jak stworzyć kupon w WooCommerce
  20. Jak zmienić tytuł strony kasy WooCommerce?