創建WooCommerce兌換產品頁面

鑰匙要點

• WooCommerce允許您創建客戶可以兌換產品的獨特優惠券代碼，這對於諸如會議之類的活動的預銷售項目特別有用。
>
• >可以通過複製您的頁面。此頁面將具有一個簡單的表格，客戶可以在其中輸入其優惠券代碼。
>可以通過AJAX功能來增強贖回過程，通過減少頁面加載的需求，可以使用戶交互更加順暢，更快。這是通過驗證優惠券代碼並自動將相應產品添加到購物車中以進行結帳來實現的。
智能優惠券插件可用於生成多個優惠券，跟踪使用情況，限制使用情況，設置到期日期，將優惠券應用於特定產品或類別，並啟用自動應用優惠券。
>在本文中，我們將探索一種獨特的方式，允許您的客戶輕鬆兌換他們可能已經在會議或其他類似活動中已經支付的產品或一組產品。

>

>讓我們更多地談論這個概念。假設您是擁有革命性新產品的商店老闆，並在會議上向成千上萬的人介紹了它。在演講結束時，那些願意嘗試您的產品的客戶可以提前付款。您甚至可能通過將您的價格降低給前500名客戶來吸引他們。 > 在這種情況下，您將在WooCommerce中做的是創建500張優惠券，產品折扣為100％。您可以使用智能優惠券插件來生成這500張優惠券，因此您不必手動創建它們。每個提前付款的客戶都會獲得優惠券代碼，但據客戶所知，這只是贖回產品的代碼。

>

創建優惠券代碼

>如果您對要約的認真程度，那麼您將嘗試使優惠券代碼看起來隨機，並且使用戶不可能提出有效的優惠券代碼。確保選擇哪些產品綁在此優惠券上，以便以後可以自動將其添加到購物車中。看看我創建的優惠券之一，請密切關注設置：>

創建WooCommerce贖回產品頁面

>您可以輕鬆地製作page.php的副本，然後將其轉換為頁面模板，以便您可以將其用於我們要發送這些客戶的頁面，以便他們可以兌換產品。命名類似於page-coupon-redeem.php

>以下標記是我們將使用該頁面上顯示給客戶的表單的格式。這只是一個帶有兩個字段的表格，一個用於輸入其代碼和實際提交按鈕。我們正在努力使客戶盡可能簡單。因此，我們將通過Ajax進行所有操作，因此頁面加載盡可能少。

>

<span><span><span><div</span> class<span>="redeem-coupon"</span>></span>
</span>	<span><span><span><form</span> id<span>="ajax-coupon-redeem"</span>></span>
</span>		<span><span><span><p</span>></span>
</span>			<span><span><span><input</span> type<span>="text"</span> name<span>="coupon"</span> id<span>="coupon"</span>/></span>
</span>			<span><span><span><input</span> type<span>="submit"</span> name<span>="redeem-coupon"</span> value<span>="Redeem Offer"</span> /></span>
</span>		<span><span><span></p</span>></span>
</span>		<span><span><span><p</span> class<span>="result"</span>></span><span><span></p</span>></span>
</span>	<span><span><span></form</span>></span><!-- #ajax-coupon-redeem -->
</span><span><span><span></div</span>></span><!-- .redeem-coupon --></span>

>用戶輸入代碼並鍵入提交按鈕時，在文本字段中輸入的值將進行驗證，如果恰好是有效的，則將將用戶重定向到“購物車”頁面，並且產品將會已經在那裡以$ 0的價格結帳。如果有任何偶然的代碼不正確，那麼我們將通知用戶出錯，並且輸入的代碼無效。

>

構建Ajax功能

如果您從未在WordPress中完成Ajax，請參閱我以前的文章，將AJAX添加到您的WordPress插件中，以簡要介紹WordPress中的Ajax。

>讓我們開始構建“贖回您的產品頁面”所需的AJAX功能，以如預期的那樣運行。主題的functions.php文件中的所有代碼均為

>

註冊我們的Ajax處理程序

第一次註冊我們的AJAX調用處理程序，通過掛接WP_AJAX_ $ ACTION和WP_AJAX_NOPRIV_ $ ACTION ACTION。

請注意，無論是否登錄，同一功能都在處理AJAX調用。

<span>add_action( 'wp_ajax_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );
</span><span>add_action( 'wp_ajax_nopriv_spyr_coupon_redeem_handler', 'spyr_coupon_redeem_handler' );</span>

>

接下來，我們將開始構建我們的邏輯以說明以下可能的方案：>

>代碼文本字段為空

代碼無效，含義不是有效的優惠券代碼
成功提供有效的優惠券
• 處理優惠券邏輯

>現在我們已經註冊了操作，並且知道該怎麼做，我們需要編寫可以處理我們可能場景的實際功能。

>

>用jQuery

處理表單提交

<span><span><?php
</span></span><span><span>function spyr_coupon_redeem_handler() {
</span></span><span>
</span><span>	<span>// Get the value of the coupon code
</span></span><span>	<span>$code = $_REQUEST['coupon_code'];
</span></span><span>
</span><span>	<span>// Check coupon code to make sure is not empty
</span></span><span>	<span>if( empty( $code ) || !isset( $code ) ) {
</span></span><span>		<span>// Build our response
</span></span><span>		<span>$response = array(
</span></span><span>			<span>'result'    => 'error',
</span></span><span>			<span>'message'   => 'Code text field can not be empty.'
</span></span><span>		<span>);
</span></span><span>
</span><span>		<span>header( 'Content-Type: application/json' );
</span></span><span>		<span>echo json_encode( $response );
</span></span><span>
</span><span>		<span>// Always exit when doing ajax
</span></span><span>		<span>exit();
</span></span><span>	<span>}
</span></span><span>
</span><span>	<span>// Create an instance of WC_Coupon with our code
</span></span><span>	<span>$coupon = new WC_Coupon( $code );
</span></span><span>
</span><span>	<span>// Check coupon to make determine if its valid or not
</span></span><span>	<span>if( ! $coupon->id && ! isset( $coupon->id ) ) {
</span></span><span>		<span>// Build our response
</span></span><span>		<span>$response = array(
</span></span><span>			<span>'result'    => 'error',
</span></span><span>			<span>'message'   => 'Invalid code entered. Please try again.'
</span></span><span>		<span>);
</span></span><span>
</span><span>		<span>header( 'Content-Type: application/json' );
</span></span><span>		<span>echo json_encode( $response );
</span></span><span>
</span><span>		<span>// Always exit when doing ajax
</span></span><span>		<span>exit();
</span></span><span>
</span><span>	<span>} else {
</span></span><span>		<span>// Coupon must be valid so we must
</span></span><span>		<span>// populate the cart with the attached products
</span></span><span>		<span>foreach( $coupon->product_ids as $prod_id ) {
</span></span><span>			<span>WC()->cart->add_to_cart( $prod_id );
</span></span><span>		<span>}
</span></span><span>
</span><span>		<span>// Build our response
</span></span><span>		<span>$response = array(
</span></span><span>			<span>'result'    => 'success',
</span></span><span>			<span>'href'      => WC()->cart->get_cart_url()
</span></span><span>		<span>);
</span></span><span>
</span><span>		<span>header( 'Content-Type: application/json' );
</span></span><span>		<span>echo json_encode( $response );
</span></span><span>
</span><span>		<span>// Always exit when doing ajax
</span></span><span>		<span>exit();
</span></span><span>	<span>}
</span></span><span><span>}</span></span>

>現在剩下要做的就是構建jQuery代碼，以將優惠券代碼提交給WordPress進行處理和處理返回的JSON數據。

最終結果

>表格的樣式完全取決於您。我已經使用了默認的20個主題和WooCommerce的虛擬數據，並且使用了幾個CSS規則，這就是我下面的內容。

<span>jQuery( document ).ready( function() {
</span>       <span>jQuery( '#ajax-coupon-redeem input[type="submit"]').click( function( ev ) {
</span>
        <span>// Get the coupon code
</span>        <span>var code = jQuery( 'input#coupon').val();
</span>
        <span>// We are going to send this for processing
</span>        data <span>= {
</span>            <span>action: 'spyr_coupon_redeem_handler',
</span>            <span>coupon_code: code
</span>        <span>}
</span>
        <span>// Send it over to WordPress.
</span>        jQuery<span>.post( woocommerce_params.ajax_url, data, function( returned_data ) {
</span>            <span>if( returned_data.result == 'error' ) {
</span>                <span>jQuery( 'p.result' ).html( returned_data.message );
</span>            <span>} else {
</span>                <span>// Hijack the browser and redirect user to cart page
</span>                <span>window.location.href = returned_data.href;
</span>            <span>}
</span>        <span>})
</span>
        <span>// Prevent the form from submitting
</span>        ev<span>.preventDefault();
</span>    <span>}); 
</span><span>});</span>

>

空字段錯誤消息

>無效的代碼錯誤消息

>有效的代碼/卡車填充

結論

>即使這種情況可能不適用於那裡的每個商店，WooCommerce也可以通過其API為我們提供一組工具，以便我們幾乎可以完成任何想法。將WordPress添加到混音中，您將獲得一個完整的電子商務解決方案，這是首屈一指的。

>

>我希望通過本文，我對優惠券如何在WooCommerce中的工作提供了一些見解，並且您在下一個項目中使用它會更加自在。

>

>創建WooCommerce贖回優惠券頁面的常見問題（常見問題解答）

>如何在WooCommerce中創建唯一的優惠券代碼？

>在WooCommerce中創建唯一的優惠券代碼是一個簡單的過程。首先，導航到WordPress儀表板的WooCommerce部分。單擊“營銷”選項卡下的“優惠券”。單擊“添加優惠券”，您將被指向新頁面，您可以在其中創建唯一的優惠券代碼。您可以根據需要自定義優惠券代碼，折扣類型，優惠券金額和其他設置。請記住要單擊“發布”以保存您的新優惠券代碼。

我可以為我的WooCommerce優惠券設置到期日期嗎？在創建或編輯優惠券時，您會在“常規”選項卡下找到“優惠券到期日期”選項。在這裡，您可以選擇要優惠券到期的日期。設置日期後，請記住單擊“發布”或“更新”以保存更改。

我如何限制WooCommerce優惠券的使用？

woocommerce允許您限制用法您的優惠券。在創建或編輯優惠券時，在“使用限制”選項卡下，您可以設置優惠券的次數，可以應用的項目數，或者單個用戶可以使用的次數優惠券。設置限制後，請記住單擊“發布”或“ Update”以保存您的更改。

我可以將優惠券應用於特定產品或類別嗎？特定產品或類別的優惠券。在創建或編輯優惠券時的“用法限制”選項卡下，您可以選擇優惠券將適用的特定產品或類別。您還可以從優惠券的折扣中排除某些產品或類別。設置限制後，請記住單擊“發布”或“更新”以節省您的更改。 >

>我如何使客戶自動應用優惠券？

使客戶能夠自動應用優惠券，您需要使用諸如“ smart優惠券”之類的插件。安裝並激活後，導航到插件的設置。在這裡，您可以啟用“自動申請”選項，當客戶的購物車符合優惠券的條件時，它將自動應用優惠券的折扣。

>

我可以創建一個提供免費禮物的優惠券嗎？

​​

是的，您可以創建免費禮物的優惠券。您需要使用諸如“ WooCommerce的智能優惠券”之類的插件。安裝並激活後，導航到插件的設置。在這裡，您可以創建新的優惠券，並將折扣類型設置為“免費禮物”。然後，您可以在使用優惠券時選擇將作為免費禮物提供的產品。

>我如何與客戶共享我的WooCommerce Coupon？與客戶的優惠券。您可以在營銷電子郵件中包含優惠券代碼，在網站上顯示，或在社交媒體上共享。您還可以使用諸如``WooCommerce for WooCommerce for WooCommerce''之類的插件直接通過電子郵件將優惠券發送給客戶。

我可以跟踪我的WooCommerce優惠券的使用嗎？您的WooCommerce優惠券的使用。在WooCommerce儀表板的“報告”部分下，您可以查看有關優惠券使用情況的詳細報告。您可以看到每張優惠券已使用了多少次，給出的總折扣金額等等。

>我可以創建適用於運輸成本的優惠券嗎？適用於運輸成本的優惠券。在創建或編輯優惠券時，請在“折扣類型”下拉菜單下選擇“運輸折扣”。然後，您可以設置折扣金額。請記住要單擊“發布”或“更新”以保存您的更改。

我只能將優惠券限制在新客戶嗎？

是的，您只能將優惠券限制在新客戶身上。在創建或編輯優惠券時的“使用限制”選項卡下，您可以選中“僅允許新客戶”的框。這將確保只有首次購買的客戶才能使用優惠券。設置限制後，請記住單擊“發布”或“更新”以節省您的更改。 >

以上是創建WooCommerce兌換產品頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！