كيفية إضافة شريط رمز القسيمة ديناميكيًا إلى صفحات منتج محددة باستخدام Divi

عندما تدير متجرًا عبر الإنترنت قمت بإنشائه باستخدام Divi و WooCommerce ، سترغب أحيانًا في إظهار رموز القسيمة على موقع الويب الخاص بك لزيادة الشعور بالإلحاح. عبر الويب ، ستلاحظ أن العديد من المتاجر عبر الإنترنت تشترك في رموز القسيمة في شريط عالق في أعلى الصفحة. الآن ، باستخدام Divi's Theme Builder ، يمكنك إضافة شريط رمز القسيمة هذا تلقائيًا إلى المنتجات المؤهلة للحصول على رمز القسيمة.

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

دعنا نذهب اليها!

معاينة

قبل الغوص في البرنامج التعليمي ، دعنا نلقي نظرة سريعة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

قم بتنزيل نموذج صفحة المنتج مجانًا

لوضع يديك على قالب صفحة المنتج ، ستحتاج أولاً إلى تنزيله باستخدام الزر أدناه. للوصول إلى التنزيل ، ستحتاج إلى الاشتراك في قائمة البريد الإلكتروني Divi Daily الخاصة بنا باستخدام النموذج أدناه. بصفتك مشتركًا جديدًا ، ستتلقى المزيد من مزايا Divi وحزمة Divi Layout المجانية كل يوم اثنين! إذا كنت موجودًا بالفعل في القائمة ، فما عليك سوى إدخال عنوان بريدك الإلكتروني أدناه والنقر فوق تنزيل. لن يتم "إعادة اشتراكك" ولن تتلقى رسائل بريد إلكتروني إضافية.

قم بتنزيل الملفات

تنزيل مجاني

انضم إلى رسالة Divi الإخبارية وسنرسل لك نسخة من حزمة Divi Landing Page Layout النهائية ، بالإضافة إلى الكثير من موارد ونصائح وحيل Divi المذهلة والمجانية الأخرى. تابع معنا وستكون سيد Divi في أي وقت من الأوقات. إذا كنت مشتركًا بالفعل ، فاكتب ببساطة عنوان بريدك الإلكتروني أدناه وانقر فوق تنزيل للوصول إلى حزمة التخطيط.

تحميل

لقد تم اشتراكك بنجاح. يرجى التحقق من عنوان بريدك الإلكتروني لتأكيد اشتراكك والحصول على حزم تخطيط Divi الأسبوعية المجانية!

نظرة عامة على البرنامج التعليمي

• تأكد من تثبيت Divi والمكوّن الإضافي WooCommerce على موقع الويب الخاص بك
• في الجزء الأول من البرنامج التعليمي ، سننشئ فئة منتجات مخفضة جديدة
• سنقوم بتعيين المنتجات المؤهلة لفئة المنتج الجديدة هذه
• بعد ذلك ، سننشئ رمز قسيمة جديدًا ونتأكد من تطبيق رمز القسيمة على فئة المنتج التي أنشأناها فقط
• داخل أداة إنشاء السمات ، سننشئ نموذجًا جديدًا لفئة المنتج المعينة هذه
• سنعيد استخدام نص صفحة المنتج العادي لهذا القالب ونضيف شريط رمز القسيمة العلوي باستخدام خيارات Divi المضمنة

1. إنشاء فئة منتج جديد للخصم

انتقل إلى فئات المنتجات وأضف فئة منتج خصم جديدة

ابدأ بتثبيت البرنامج المساعد WooCommerce على موقع WordPress الخاص بك وأضف فئة منتج جديدة مخصصة لجميع المنتجات المؤهلة للحصول على الخصم الجديد. إذا كنت تخطط لاستخدام رمز القسيمة في فئات المنتجات الحالية ، فيمكنك استخدامها بدلاً من ذلك.

2. تعيين المنتجات إلى فئة الخصم الجديدة

تحرير المنتج

بعد ذلك ، افتح المنتجات التي تريد تضمينها في البيع.

تعيين المنتجات إلى فئة الخصم الجديدة

وقم بتضمينها في فئة المنتجات المخفضة الجديدة.

3. أنشئ رمز قسيمة WooCommerce

اذهب إلى القسائم وأضف كوبون جديد

يتناول الجزء التالي من هذا البرنامج التعليمي إنشاء رمز قسيمة جديد. انتقل إلى لوحة معلومات WordPress الخاصة بك > القسائم> وانقر على "إنشاء قسيمتك الأولى" .

أضف رمز القسيمة وبيانات القسيمة

أضف رمز القسيمة في الأعلى وحدد الإعدادات العامة التي تريد تطبيقها على رمز القسيمة.

• كود الخصم: أضف كود الخصم
• نوع الخصم: نسبة الخصم
• مبلغ القسيمة: أضف نسبة مئوية
• تاريخ انتهاء القسيمة: اختر التاريخ

أضف قيود الاستخدام

بعد ذلك ، انتقل إلى قيود الاستخدام وتأكد من أن رمز القسيمة يعمل على المنتجات الموجودة داخل فئة منتج الخصم فقط.

• فئات المنتجات: الخصم

4. إضافة قالب جديد لفئة الخصم

أضف قالب جديد

بمجرد إنشاء رمز القسيمة ، حان الوقت لإدراجه في صفحات المنتج ذات الصلة! للقيام بذلك ، انتقل إلى Divi Theme Builder وأضف قالبًا جديدًا.

استخدام على

استخدم هذا القالب الجديد في فئة منتج الخصم.

• استخدم في: منتج في فئة منتج معين: خصم

5. إعادة استخدام نص صفحة المنتج العالمي لقالب جديد

اسحب نص قالب المنتج إلى نص القالب الجديد

يمكنك إعادة استخدام نص قالب صفحة المنتج العادي عن طريق سحبه إلى القالب الجديد. في هذا البرنامج التعليمي ، نستخدم تخطيط صفحة المنتج الغامق الذي أنشأناه في برنامج تعليمي آخر. يمكنك تنزيل ملف JSON الخاص بالتخطيط في منشور المدونة.

6. قم بإضافة شريط رمز القسيمة العلوي إلى نص القالب الجديد

أدخل محرر قالب الجسم

بمجرد إضافة نص صفحة المنتج إلى القالب الجديد ، يمكنك البدء في تحريره. ستظهر التغييرات التي تجريها على هذا النموذج فقط على صفحات المنتج التي تعد جزءًا من فئة منتج الخصم.

إضافة قسم جديد إلى الأعلى

داخل محرر القوالب ، أول شيء سنفعله هو إضافة قسم جديد إلى الأعلى.

لون الخلفية

افتح إعدادات القسم وقم بتغيير لون الخلفية.

• لون الخلفية: # e02b20

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

حيوية

أكمل إعدادات القسم بإضافة رسم متحرك.

• نمط الرسوم المتحركة: شريحة
• اتجاه الرسوم المتحركة: لأسفل
• مدة الرسوم المتحركة: 1500 مللي ثانية
• تأخير الرسوم المتحركة: 1000 مللي ثانية
• بدء تعتيم الرسوم المتحركة: 100٪
• منحنى سرعة الرسوم المتحركة: سهولة للداخل والخارج
• كرر الرسوم المتحركة: مرة واحدة

أضف صفًا جديدًا

هيكل العمود

تابع بإضافة صف جديد إلى القسم باستخدام بنية العمود التالية:

تحجيم

افتح إعدادات الصف واسمح للصف بأن يأخذ العرض الكامل لحاوية القسم.

• استخدام عرض مزراب مخصص: نعم
• عرض الحضيض: 1
• معادلة ارتفاعات العمود: نعم

تباعد

قم بإزالة جميع المساحة المتروكة الافتراضية العلوية والسفلية بعد ذلك.

• الحشوة العلوية: 0 بكسل
• الحشو السفلي: 0 بكسل

العمود 1

تباعد

بعد ذلك ، افتح إعدادات العمود 1 وأضف بعض المساحة المتروكة العلوية والسفلية.

• الحشوة العلوية: 25 بكسل
• الحشو السفلي: 25 بكسل

العمود 2

لون الخلفية

افتح إعدادات العمود 2 أيضًا وأضف لون خلفية أبيض.

• لون الخلفية: #ffffff

تباعد

أضف بعض المساحة المتروكة العلوية والسفلية المخصصة لهذا العمود أيضًا.

• الحشوة العلوية: 20 بكسل
• الحشو السفلي: 20 بكسل

الحدود

وقم بتضمين بعض نصف قطر الحد العلوي الأيمن والأيسر.

• أعلى اليسار + أعلى اليمين: 30 بكسل

أضف وحدة نصية إلى العمود 1

إضافة محتوى

الوحدة الأولى والوحيدة التي نحتاجها في العمود 1 هي وحدة نصية. أدخل نسخة من اختيارك.

إعدادات النص

انتقل إلى علامة تبويب تصميم الوحدة وقم بتغيير إعدادات النص وفقًا لذلك:

• خط النص: مونتسيرات
• لون النص: #ffffff
• حجم النص: 16 بكسل
• محاذاة النص: الوسط

أضف وحدة نصية إلى العمود 2

أضف رمز القسيمة إلى Content Box

في العمود الثاني ، أضف وحدة نصية أخرى برمز الخصم الذي أضفته في الجزء الأول من البرنامج التعليمي.

إعدادات النص

قم بتغيير إعدادات نص الوحدة كما يلي:

• خط النص: مونتسيرات
• وزن خط النص: ثقيل
• لون النص: # 000000
• حجم النص: 19 بكسل
• محاذاة النص: الوسط

تحجيم

بعد ذلك ، قم بتعديل إعدادات التحجيم.

• العرض: 50٪
• محاذاة الوحدة: المركز

تباعد

أضف بعض الحشو السفلي أيضًا.

• الحشو السفلي: 10 بكسل

الحدود

وأكمل إعدادات الوحدة بإضافة حد سفلي.

• عرض الحد السفلي: 1 بكسل
• لون الحد السفلي: # 333333

7. حفظ تغييرات منشئ السمات وعرض النتيجة

بمجرد الانتهاء من صفحة المنتج المعدلة ، يمكنك حفظ تغييرات القالب ، والخروج من Theme Builder وعرض النتيجة على صفحات منتج الخصم!

معاينة

الآن بعد أن انتهينا من جميع الخطوات ، دعنا نلقي نظرة أخيرة على النتيجة عبر أحجام الشاشات المختلفة.

سطح المكتب

متحرك

افكار اخيرة

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

إذا كنت حريصًا على معرفة المزيد عن Divi والحصول على المزيد من هدايا Divi المجانية ، فتأكد من الاشتراك في النشرة الإخبارية للبريد الإلكتروني وقناة YouTube حتى تكون دائمًا من أوائل الأشخاص الذين يعرفون هذا المحتوى المجاني ويحصلون عليه.