關於 WooCommerce 感謝頁面的所有信息

已發表: 2022-09-19

在任何形式的業務中，一旦客戶進行購買，說“謝謝”總是很重要的。 在電子商務中，使用感謝頁面可以促進這一點。

電子商務中的感謝頁面非常重要，因為它使您能夠與客戶建立聯繫，並且從長遠來看可以幫助增加銷售額。 之所以如此，是因為對購買感到滿意的客戶將來可能會從商店進行另一次購買，甚至向其他潛在客戶推薦產品。

在本文中，我們將研究 WooCommerce 感謝頁面以及如何自定義頁面。

目錄

什麼是 WooCommerce 感謝頁面

自定義默認 WooCommerce 感謝頁面

  1. 自定義默認 WooCommerce 感謝頁面的重要性
  2. 如何自定義 WooCommerce 感謝頁面
    • 使用插件
    • 使用鉤子
    • 手動模板覆蓋

結論

什麼是 WooCommerce 感謝頁面

WooCommerce 感謝頁面是在網站下訂單後立即顯示給客戶的頁面。 它也被稱為“購買確認頁面”或“訂單接收頁面”。

訪問感謝頁面後，URL 格式將為 yourdomain/checkout/order-received/2554/?key=wc_order_WCS88FJQkkjI9。

以下是該頁面的示例屏幕截圖：

如上面的屏幕截圖所示，感謝頁面中有各種組件。 其中一些包括：

感謝信息：這只是一條信息，用於感謝您的客戶購買該商品。 如上面的截圖所示，它被表示為：“謝謝。 您的訂單已收到。”

一般訂單信息：此部分主要包含有關特定訂單的一般詳細信息。 這些詳細信息包括訂單號、日期、總額、購買時使用的電子郵件和付款方式。

訂單詳細信息：在本節中，我們有訂單詳細信息的表格格式表示。 這些詳細信息包括產品名稱、產品價格、小計、總價、付款方式、運費（如果啟用）。

地址：此部分將包含客戶地址的詳細信息（帳單地址和送貨地址，如果啟用）。

自定義默認 WooCommerce 感謝頁面

從上面討論的組件中，我們可以看到感謝頁面仍然有改進的餘地，考慮到這在購買過程中非常重要。

在本節中，我們將研究自定義默認 WooCommerce 感謝頁面的重要性，以及如何進行自定義。

自定義默認 WooCommerce 感謝頁面的重要性

客戶購買產品並到達感謝頁面後，不應將其視為購買過程的最後一步。 實際上可以做更多的工作來增加與客戶的互動以及灌輸信心。

因此，該頁面可以在其中提供更多功能。 其中一些包括：

  1. 創造出色的入職體驗：感謝頁面可用於在適用的情況下向剛剛購買產品的客戶分享入職材料。 此類材料可能包括文檔、產品視頻和任何其他可能對最終客戶有幫助的材料。
    此信息使客戶能夠在嘗試弄清楚如何使用產品上花費很少的時間來深入了解產品的使用情況。
  2. 創造出色的售後體驗：與默認的感謝頁面相比，精心設計和定制的感謝頁面給客戶留下了深刻的印象。 這反過來又轉化為網站內的良好客戶體驗。
  3. 產生信任：有時，一旦客戶進行購買，尤其是購買新產品，他們可能會懷疑產品是否按預期工作。 但是，如果“感謝”頁面被定制為包含正面評價或推薦等內容，則這些內容可以使此類客戶放心，從而消除此類疑慮。 客戶也可能基於此在網站內進行進一步的操作。
  4. 作為一種營銷策略：例如，如果客戶通過社交分享按鈕到達感謝您，並且這樣的客戶已經信任該產品，他們可能會在可用的社交網站中分享他們的購買。 這些股票可能會為您的網站帶來潛在客戶。
    您還可以在頁面上顯示優惠，從而營銷您可能擁有的其他產品。
  5. 獨特性：精心設計的感謝頁面使您的網站脫穎而出，從而為客戶帶來整體不同的體驗。

如何自定義 WooCommerce 感謝頁面

WooCommerce 不為感謝頁面提供廣泛的自定義選項。 然而，有許多方法可以自定義頁面。 在本節中，我們將研究一些您可以自定義“感謝頁面”的方法。

使用插件

有許多插件可用於自定義 WooCommerce 感謝頁面。 其中一些包括：

  • 自定義感謝頁面擴展
  • NextMove Lite – 感謝 WooCommerce 的頁面
  • WooCommerce 的 YITH 自定義感謝頁面

在本指南中，我們將研究其中一個插件，即免費的 NextMove Lite – 感謝 WooCommerce 插件的頁面。

安裝 NextMove Lite – 感謝 WooCommerce 頁面

為了安裝插件，請導航到插件 > 添加新部分並蒐索“NextMove Lite – 感謝 WooCommerce 頁面”。

接下來，單擊插件旁邊的“立即安裝”按鈕。

完成後，激活插件。

默認的 NextMove 感謝頁面

激活 NextMove 插件後，插件會生成一個默認的感謝頁面。 這可以在WooCommerce > 設置 > NextMove Lite：XLPlugins部分中找到。

您可以根據自己的喜好自定義此感謝頁面或添加新頁面。 要添加新的感謝頁面，您需要單擊以下部分中所示的“添加新”按鈕：

感謝頁面定制器

可以通過首先單擊“組件”鏈接訪問感謝頁面定制器，如下面的屏幕截圖所示：

這樣做後，您將被重定向到感謝頁面定制器部分：

如上面的屏幕截圖所示，定制器包含 4 個核心部分。 這些是：

  • 選擇組件：包含您可以在感謝頁面中使用的各種模塊或組件。 在此部分中，您可以選擇所需的組件。
  • 編輯組件：使您能夠自定義您選擇的組件。 您可以在此處更改各種內容，例如標題，還可以應用不同的樣式。
  • 選擇佈局：在此部分中，您可以定義您想要的感謝頁面佈局。 您可以選擇一列或兩列佈局。
  • 排列組件：排列組件部分使您可以將感謝頁面中的各種組件拖放到您想要的順序。

自定義感謝頁面

作為如何進行自定義的示例，在我們的示例中，我們將設置一個新的感謝頁面並向其中添加組件。

首先，單擊“添加新”按鈕

在下一個屏幕上，指定感謝頁面的標題，並將頁面優先級設置為 1，如下圖所示：

完成後，發布頁面。 然後，您將被重定向到感謝頁面定制器部分。 在這裡，您將意識到頁面中添加了一些默認組件：

這些是訂單確認、客戶詳細信息和訂單詳細信息。 您可以根據自己的喜好自定義這些組件的各個方面。

為了自定義它們中的每一個，您需要單擊“排列組件”部分中的特定組件。 然後該組件將在“編輯組件”部分中呈現，您可以在其中更改其各個方面。

在我們這裡的例子中，對於訂單確認，我們將自定義標題和副標題的字體大小、顏色，以及更改副標題。

至於 Customer details 組件，我們將更改邊框和背景，如下圖所示：

關於訂單詳情部分，我們將自定義標題和佈局，如下所示：

除了上述組件，我們還將添加兩個額外的組件。

i) 圖像文本

對於這個組件，我們將添加圖片以及一些促銷文字，以鼓勵客戶購買其他產品。

在組件中，我們還將啟用“繼續購物”按鈕的顯示，如下面的屏幕截圖所示。

ii) 視頻

在頁面中，我們還將包含一個視頻，提供有關商店產品的更多信息。 您可以在視頻源部分中包含 Youtube 或 Vimeo 視頻。

完成上述操作後，我們可以更改佈局並選擇“兩列佈局”。 然後，您可以在兩列中根據您的喜好對組件進行分組。

然後，您可以預覽感謝頁面以確保更改生效。 以下是上述更改的示例視圖：

使用鉤子

有許多 WooCommerce 鉤子可用於自定義“謝謝”頁面。 以下是此類鉤子的完整列表：動作和過濾器鉤子參考。

這些代碼自定義需要添加到您的子主題中的 functions.php 文件中。

例如，為了更改收到的訂單消息，您可以添加以下代碼：

 add_filter('woocommerce_thankyou_order_received_text', 'alter_order_received_text', 10, 2 ); function alter_order_received_text( $newstr, $neworder ) { $new_text = 'Thank You For Your Order. We are glad to have you as our customer.'; return $new_text; }

下面是示例輸出說明：

手動模板覆蓋

WooCommerce 感謝頁面也可以通過您的子主題中的模板覆蓋進行自定義。

為了實現這一目標，您需要：

i) 導航到 woocommerce > 模板 > 結帳目錄並複制thankyou.php文件

ii) 將您的子主題中的文件粘貼到 woocommerce > checkout 目錄路徑。 下面是一個說明：

完成此操作後，您可以根據自己的喜好自定義thankyou.php 代碼。

例如，為了在Thank You 頁面中包含訂單日期，您需要在thankyou.php 文件中添加以下代碼：

 <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p>

因此，文件中的完整代碼將例如讀取為：

 <?php /** * Thankyou page * * This template can be overridden by copying it to yourtheme/woocommerce/checkout/thankyou.php. * * HOWEVER, on occasion WooCommerce will need to update template files and you * (the theme developer) will need to copy the new files to your theme to * maintain compatibility. We try to do this as little as possible, but it does * happen. When this occurs the version of the template file will be bumped and * the readme will list any important changes. * * @see https://docs.woocommerce.com/document/template-structure/ * @package WooCommerce\Templates * @version 3.7.0 */ defined( 'ABSPATH' ) || exit; ?> <div class="woocommerce-order"> <?php if ( $order ) : do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?> <?php if ( $order->has_status( 'failed' ) ) : ?> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed"><?php esc_html_e( 'Unfortunately your order cannot be processed as the originating bank/merchant has declined your transaction. Please attempt your purchase again.', 'woocommerce' ); ?></p> <p class="woocommerce-notice woocommerce-notice--error woocommerce-thankyou-order-failed-actions"> <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 now.', 'woocommerce' ), $order ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <p class="woocommerce-order-date"> <?php _e( 'Order Date:', 'woocommerce' ); ?> <strong><?php echo date_i18n( get_option( 'date_format' ), $order->get_date_created() ); ?></strong> </p> <?php endif; ?> <?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 now.', 'woocommerce' ), null ); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p> <?php endif; ?> </div>

結論

購買產品後向客戶說聲“謝謝”可以增強整體良好的客戶體驗。 WooCommerce 通過提供感謝頁面使這成為可能。 然而，其中並沒有太多細節。

在本指南中，我們研究瞭如何自定義默認的 WooCommerce 感謝頁面。 要快速輕鬆地自定義感謝頁面，您可以使用插件方法。 另一方面，如果您沒有被代碼嚇倒，您可以使用其他兩種方法中的任何一種。

如果您有任何問題或任何貢獻，請隨時在下面的評論部分中分享。