So erstellen Sie eine benutzerdefinierte Bestelleingangsseite WooCommerce

Veröffentlicht: 2021-04-11

WooCommerce Custom Order Received-Seite Möchten Sie eine benutzerdefinierte Dankesseite in Ihrem WooCommerce-Shop hinzufügen? Die Dankesseite ist eine der wichtigsten Seiten in jedem WooCommerce-Shop. Sie wird auch als Bestelleingangsseite bezeichnet.

WooCommerce zeigt den Inhalt der Danke-Seite aus der Vorlage thankyou.php. Diese Vorlage befindet sich im Ordner woocommerce/templates/checkout/ . Zur Veranschaulichung verwenden wir das Storefront-Design. Die thankyou.php sollte kopiert werden in: wp-content/plugins/woocommerce/checkout/ folder .

In diesem Beitrag zeigen wir Ihnen, wie Sie unsere eigene Vorlage erstellen können, indem Sie die Datei thankyou.php in den Ordner Ihres Themes in einer ähnlichen Ordnerstruktur kopieren.

Sie müssen über Programmierkenntnisse verfügen, wenn Sie diese Methode zum Anpassen Ihrer Bestelleingangsseite verwenden möchten.

Sehen wir uns an, wie Sie die Seite „Bestellung erhalten“ anpassen können.

WooCommerce Custom Order Received-Seite

Zuerst müssen Sie die 2 Ordner „woocommerce“ & „checkout“ erstellen. Wir empfehlen Ihnen, die in der Tabelle Bestelldetails angezeigten Daten und die Kundendaten (im eingeloggten Zustand) zu ändern.

Wenn Sie die Datei nicht sehen, verwendet WooCommerce eine Funktion woocommerce_order_details_table(), die an den woocommerce_thankyou-Hook angehängt ist. Die Funktion woocommerce_order_details_table() ist in der Datei Includes/wc-template-functions.php definiert.

Anpassen der Seite „Bestellung erhalten“ durch Überschreiben von WooCommerce-Vorlagen

Die Danke-Seite ist eigentlich eine Sammlung von 4 verschiedenen Vorlagendateien:

templates/checkout/danke.php
templates/order/order-details.php
templates/order/order-details-item.php
templates/order/order-details-customer.php

So wird die Bestelleingangsseite angezeigt: Bestellung erhalten

Wir möchten dem Kunden einen Gutscheincode für seinen nächsten Einkauf hinzufügen und die Zahlungsmethode aus dem oberen Abschnitt entfernen.

Wir möchten es über dem Abschnitt mit den Bestelldetails hinzufügen.

Daher fügen wir den folgenden Code in die Vorlage für die Dankesseite ein :

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

Unten ist die Vorlage thankyou.php aus meinem Thema:

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

Das ist das Ergebnis: Sektion

Es ist wichtig zu beachten, dass Sie, sobald Sie wissen, welche Daten aus welcher Vorlage stammen, nur noch die richtige Vorlage in den Ordner Ihres Plugins kopieren müssen.

Fazit

In diesem Beitrag haben Sie gelernt, wie Sie die Auftragseingangsvorlage überschreiben. Sie können dieselbe Methode verwenden, um die anderen Vorlagen anzupassen. Wenden Sie sich bei Problemen bitte an einen qualifizierten WordPress-Entwickler.

So erstellen Sie eine benutzerdefinierte Bestelleingangsseite WooCommerce

WooCommerce Custom Order Received-Seite

Anpassen der Seite „Bestellung erhalten“ durch Überschreiben von WooCommerce-Vorlagen

Fazit

Ähnliche Artikel