WooCommerce: نقل / إزالة نموذج القسيمة @ سلة التسوق والدفع

القسائم: الخير والشر والقبيح. تعد أكواد قسيمة WooCommerce رائعة لتحويل المزيد من المبيعات – ولكن في بعض الأحيان تجعل المستخدمين يتوقفون مؤقتًا / يتوقفون عن تقديم الطلب حتى يعثروا على رمز قسيمة عبر الإنترنت (أعلم أنك فعلت ذلك أيضًا).

أحد الحلول الجيدة التي طبقها عمالقة الإنترنت مثل Amazon و eBay هو إخفاء نموذج القسيمة حتى يتم إدخال بريد إلكتروني ، أو بدلاً من ذلك نقل رمز القسيمة إلى أسفل صفحة سلة التسوق. هذه خطوة ذكية للغاية ، وتجعل المستخدم يركز على تفاصيل سلة التسوق / الخروج قبل الدخول أو البحث عن قسيمة.

إذن السؤال هو – كيفية نقل نموذج رمز القسيمة في صفحة سلة التسوق وإزالته من صفحة الخروج ؟ حسنًا ، كالعادة ، القليل من PHP يمكن أن يساعدنا. إليك كيف يتم ذلك!

نقل نموذج رمز القسيمة @ WooCommerce Cart

Snippet 1 (PHP + CSS): انقل نموذج الكوبون ضمن “متابعة الدفع” @ صفحة عربة WooCommerce

أولاً ، نريد عرض نموذج قسيمة جديد تمامًا أسفل الزر “متابعة عملية الشراء” في صفحة عربة التسوق. يمكن القيام بذلك بسهولة باستخدام الخطاف الصحيح (“woocommerce_proceed_to_checkout”) وعن طريق طباعة كود HTML للنموذج.

/**
 * @snippet       Display Coupon under Proceed to Checkout Button @ WooCommerce Cart
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=81542
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 */
 
add_action( 'woocommerce_proceed_to_checkout', 'bbloomer_display_coupon_form_below_proceed_checkout', 25 );
 
function bbloomer_display_coupon_form_below_proceed_checkout() {
   ?> 
      <form class="woocommerce-coupon-form" action="<?php echo esc_url( wc_get_cart_url() ); ?>" method="post">
         <?php if ( wc_coupons_enabled() ) { ?>
            <div class="coupon under-proceed">
               <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" style="width: 100%" /> 
               <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>" style="width: 100%"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
            </div>
         <?php } ?>
      </form>
   <?php
}

الآن إلى نموذج القسيمة الحالي … لسوء الحظ ، على عكس باقي عناصر WooCommerce الافتراضية ، يتم ترميز نموذج القسيمة بشكل ثابت في جدول سلة التسوق ، أي لا توجد وظيفة PHP يمكن “فك ارتباطها” عبر “remove_action”.

في اللغة الإنجليزية البسيطة ، لا توجد طريقة أخرى (حتى الآن) لإزالة رمز القسيمة عبر PHP ، لذلك يجب علينا استخدام بعض CSS المزعج. إليك ما يجب إضافته إلى style.css لإخفاء نموذج القسيمة الافتراضي:

/* Hide the default coupon form @ WooCommerce Cart table */
/* I hate to use display:none but there is no other solution */
 
div.coupon:not(.under-proceed) { 
display: none !important; 
}

Snippet 2 (PHP): أزل “هل لديك قسيمة؟” Form @ WooCommerce Checkout Page

/**
 * @snippet       Remove Coupon Form @ WooCommerce Checkout
 * @how-to        Get CustomizeWoo.com FREE
 * @sourcecode    https://businessbloomer.com/?p=81542
 * @author        Rodolfo Melogli
 * @compatible    WooCommerce 3.5.1
 */
 
remove_action( 'woocommerce_before_checkout_form', 'woocommerce_checkout_coupon_form', 10 );

المنشورات ذات الصلة:

WooCommerce: إخفاء أسعار الشحن في حالة توفر الشحن المجاني

WooCommerce: ترجمة “Shipping” @ Cart Totals

WooCommerce: إخفاء رمز القسيمة في صفحة السلة والدفع

WooCommerce: إخفاء سعر الشحن إذا كانت فئة الشحن @ سلة التسوق

WooCommerce: عرض إجمالي الخصم / التوفير في سلة التسوق والدفع

WooCommerce: العطلة / الإيقاف المؤقت / الوضع المغلق

WooCommerce: أعد التوجيه إلى Checkout على Add to Cart

WooCommerce: عرض الوزن الإجمالي في سلة التسوق والدفع

WooCommerce: إخفاء الشحن إذا تم تحديد الاستلام المحلي

WooCommerce: 10 مقتطفات سهلة لزيادة مبيعاتك

أين تضيف هذا المقتطف؟

يمكنك وضع مقتطفات PHP في الجزء السفلي من ملف function.php القالب الفرعي الخاص بك (احذف “؟>” إذا كان لديك هناك). من ناحية أخرى ، ينتقل CSS في ملف style.css الخاص بسمة الطفل. تأكد من أنك تعرف ما تفعله عند تحرير مثل هذه الملفات – إذا كنت بحاجة إلى مزيد من الإرشادات ، فيرجى إلقاء نظرة على الفيديو التعليمي المجاني الخاص بي “أين تضع تخصيص WooCommerce؟”

هل هذا المقتطف (لا يزال) يعمل؟

يرجى إعلامي في التعليقات إذا كان كل شيء يعمل كما هو متوقع. يسعدني مراجعة المقتطف إذا أبلغت بخلاف ذلك (يرجى تقديم لقطات شاشة). لقد اختبرت هذا الكود مع موضوع Storefront وإصدار WooCommerce المذكور أعلاه واستضافة صديقة لـ وورد بريس على PHP 7.3.

إذا كنت تعتقد أن هذا الرمز وفر لك الوقت والمال ، فلا تتردد في الانضمام إلى أكثر من 14000 مشترك في WooCommerce Weekly للحصول على تحديثات منشورات المدونة أو أكثر من 250 من مؤيدي Business Bloomer لمدة 365 يومًا من مزايا WooCommerce . شكرا لكم مقدما 🙂

هل تحتاج إلى مساعدة في WooCommerce؟

تحقق من دروس الفيديو المجانية هذه. يمكنك تعلم كيفية تخصيص WooCommerce بدون مكونات إضافية غير ضرورية ، وكيفية تكوين إعدادات البرنامج المساعد WooCommerce بشكل صحيح وحتى كيفية إتقان استكشاف أخطاء WooCommerce في حالة حدوث خطأ!