カスタムオーダー受信ページWooCommerceを作成する方法

公開: 2021-04-11

WooCommerceカスタムオーダー受領ページ WooCommerceストアにカスタムのありがとうページを追加しますか？ ありがとうページは、WooCommerceストアで最も重要なページの1つです。 受注ページとも呼ばれます。

WooCommerceは、thankyou.phpテンプレートのThankYouページのコンテンツを表示します。 このテンプレートは、 woocommerce / templates / checkout /フォルダーにあります。 説明のために、ストアフロントテーマを使用します。 thankyou.phpは、 wp-content / plugins / woocommerce / checkout /フォルダーにコピーする必要があります。

この投稿では、thankyou.phpファイルを同様のフォルダー構造のテーマのフォルダーにコピーすることで、独自のテンプレートを作成する方法を紹介します。

この方法を使用して注文受付ページをカスタマイズする場合は、コーディングの知識が必要です。

受注ページをカスタマイズする方法を見てみましょう。

WooCommerceカスタムオーダー受領ページ

まず、「woocommerce」と「checkout」の2つのフォルダを作成する必要があります。 注文詳細テーブルと顧客詳細（ログイン時）に表示されるデータを変更することをお勧めします。

ファイルが表示されない場合、WooCommerceはwoocommerce_thankyouフックに接続されている関数woocommerce_order_details_table（）を使用します。 関数woocommerce_order_details_table（）は、includes /wc-template-functions.phpファイルで定義されています。

WooCommerceテンプレートを上書きして受注ページをカスタマイズする

ありがとうページは、実際には4つの異なるテンプレートファイルのコレクションです。

  • テンプレート/チェックアウト/thankyou.php
  • テンプレート/注文/注文-details.php
  • テンプレート/注文/注文-詳細-item.php
  • テンプレート/注文/注文-詳細-顧客.php

受注ページの表示方法は次のとおりです。 ご注文承りました

次回の購入のためにクーポンコードを顧客に追加し、上部のセクションから支払い方法を削除します。

注文の詳細セクションの上に追加します。

したがって、サンキューページテンプレートに次のコードを追加します。 

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

以下は私のテーマのthankyou.phpテンプレートです。 

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

これが結果です： セクション

どのテンプレートからどのデータが取得されているかがわかったら、適切なテンプレートをプラグインのフォルダーにコピーするだけでよいことに注意してください。

結論

この投稿では、受注したテンプレートを上書きする方法を学びました。 同じ方法を使用して、他のテンプレートをカスタマイズできます。 問題がある場合は、資格のあるWordPress開発者に相談してください。

同様の記事

  1. ログアウト後のWooCommerceリダイレクト[究極のガイド]
  2. 100以上のヒント、コツ、スニペットUltimate WooCommerce Hide Guide
  3. チェックアウト後のWooCommerceリダイレクト：カスタムサンキューページにリダイレクト
  4. 製品カテゴリのタイトルを削除する方法WooCommerce
  5. プラグインなしでWordPressページをリダイレクトする方法は？
  6. プライマリメニューストアフロントWooCommerceを移動する方法
  7. WooCommerceで注文を自動承認する方法
  8. メールフッターテキストを削除する方法「WooCommerceで構築」
  9. 特定の条件で配送方法を非表示にする方法
  10. WooCommerceでログアウト時にカートをクリアする方法
  11. WooCommerceチェックアウトページテンプレートを編集する方法
  12. チェックアウトページで注文IDを取得する方法WooCommerce
  13. WordPressでカスタムウィジェットエリアを作成する方法ステップバイステップ
  14. ユーザーがWordPressにログインしているかどうかを確認する方法
  15. WooCommerceチェックアウト最適化クイックガイド
  16. WooCommerceで現在の製品カテゴリ名を取得する方法
  17. WooCommerceで支払い方法を取得する方法»コード例
  18. WooCommerceで安全なチェックアウトを強制する方法
  19. WooCommerceでクーポンを作成する方法
  20. WooCommerceチェックアウトページのタイトルを変更する方法