WooCommerce: نموذج الاستفسار عن المنتج @ صفحة منتج واحد (CF7)

طلب أحد العملاء إظهار زر “استفسار عن المنتج” على صفحة منتج واحد والذي سيعرض ، عند النقر ، نموذج اتصال مع موضوع يتم ملؤه تلقائيًا ( يجب تثبيت البرنامج المساعد لنموذج الاتصال 7 بالطبع). إليك كيف فعلت ذلك!

اعرض نموذج الاستفسار عن المنتج على صفحة منتج واحد لـ WooCommerce

مقتطف PHP: أضف CF7 إلى صفحة منتج واحد – WooCommerce

/**
 * @snippet       Show CF7 Form @ WooCommerce Single Product
 * @how-to        Get CustomizeWoo.com FREE
 * @author        Rodolfo Melogli
 * @compatible    WC 5
 * @donate $9     https://businessbloomer.com/bloomer-armada/
 */
  
add_action( 'woocommerce_after_add_to_cart_form', 'bbloomer_woocommerce_cf7_single_product', 30 );
  
function bbloomer_woocommerce_cf7_single_product() {
   echo '<button type="submit" id="trigger_cf" class="single_add_to_cart_button button alt">Product Inquiry</button>';
   echo '<div id="product_inq" style="display:none">';
   echo do_shortcode('[paste_your_contact_form_7_shortcode_here]');
   echo '</div>';
   wc_enqueue_js( "
      $('#trigger_cf').on('click', function(){
         if ( $(this).text() == 'Product Inquiry' ) {
            $('#product_inq').css('display','block');
            $('input[name=\'your-subject\']').val('" . the_title() . "');
            $('#trigger_cf').html('Close');
         } else {
            $('#product_inq').hide();
            $('#trigger_cf').html('Product Inquiry');
         }
      });
   " );
}

هل هناك مكون إضافي لذلك؟

إذا كنت تحب البرمجة ولكنك لا تشعر بالثقة بنسبة 100٪ مع PHP ، فقد قررت البحث عن مكون إضافي موثوق به يحقق نفس النتيجة.

في الواقع ، في هذه الحالة ، كتبت تعليميًا كاملاً – يغطي العديد من بدائل المكونات الإضافية ويمنحك لقطات شاشة وروابط. ها هو: https://businessbloomer.com/enable-woocommerce-customers-request-quote/

ولكن في حال كنت تكره المكونات الإضافية وترغب في كتابة التعليمات البرمجية (أو ترغب في تجربة ذلك) ، فاستمر في القراءة 🙂

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

WooCommerce: POA / Call for Price @ Single Product

WooCommerce: كيفية تقصير عناوين المنتج

WooCommerce: عرض معرض المنتجات عموديًا (صفحة منتج واحدة)

WooCommerce: تعطيل نشر Jetpack للمنتجات

WooCommerce: تغيير عدد الصور المصغرة لكل صف @ معرض المنتج

WooCommerce: قم بتغيير كمية إضافة إلى عربة التسوق في قائمة اختيار المنسدلة

WooCommerce: تحرير عنوان URL لصورة المنتج الخارجية

WooCommerce: أضف حقلًا مخصصًا إلى تنويعات المنتج

WooCommerce: قم بالتمرير إلى علامة تبويب المنتج @ صفحة منتج واحد

WooCommerce: منتجات مخصصة ذات صلة

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

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

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

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

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

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

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