OpenByt - مصدرك النهائي لمعرفة ووردبريس مجانًا

قم بتحسين صفحات منتجات WooCommerce باستخدام علامات التبويب المخصصة في Elementor Pro: دليل خطوة بخطوة

تومسكم

مقدمة

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

دليل خطوة بخطوة لإضافة علامات تبويب مخصصة

الخطوة 1: تثبيت الإضافات المطلوبة وتفعيلها

للبدء، ستحتاج إلى تثبيت الإضافات التالية على موقع ووردبريس الخاص بك:

  1. WooCommerce: هذه هي الإضافة الأساسية لأي متجر للتجارة الإلكترونية على ووردبريس.
  2. إليمنتور برو: في حين أن النسخة التي يمكن الوصول إليها من إيليمنتور يوفر وظائف أساسية، بينما يوفر Elementor Pro أدوات متقدمة مثل أدوات WooCommerce، والتي تعتبر ضرورية لهذا البرنامج التعليمي.
  3. مدير علامات تبويبات المنتجات ل WooCommerce (اختياري): يمكن أن تكون هذه الإضافة مفيدة لإنشاء علامات تبويب مخصصة موحدة عبر جميع المنتجات أو إضافة ميزات متقدمة لإدارة علامات التبويب.

كيفية تثبيت الإضافات وتفعيلها:

الخطوة 2: افتح صفحة المنتج باستخدام Elementor

لبدء تخصيص صفحة منتجك، اتبع الخطوات التالية:

  1. انتقل إلى المنتجات > جميع المنتجات في لوحة تحكم ووردبريس.
  2. حدد المنتج الذي ترغب في تعديله وانقر فوق تحرير باستخدام Elementor. سيؤدي هذا إلى فتح صفحة المنتج في محرر Elementor، حيث يمكنك تعديل التخطيط بصريًا.

الخطوة 3: إضافة علامات تبويب إلى صفحة منتجك باستخدام Elementor

تتيح لك إضافة أداة علامات التبويب تنظيم معلومات المنتج في أقسام منفصلة:

  1. في محرر Elementor، انقر على إضافة قسم جديد. اختر البنية التي تريدها؛ على سبيل المثال، قد يكون التخطيط المكون من عمود واحد مناسبًا لعلامات التبويب.
  1. من اللوحة اليسرى، اسحب علامة علامات التبويب في القسم الذي تم إنشاؤه حديثًا.
  1. بشكل افتراضي، يوفر Elementor بعض علامات التبويب النموذجية التي تحمل اسم "علامة التبويب 1" و "علامة التبويب 2" وما إلى ذلك. يمكنك تعديلها لتناسب المحتوى الخاص بك.

الخطوة 4: تخصيص كل علامة تبويب بمعلومات المنتج

يمكنك تخصيص كل علامة تبويب لعرض تفاصيل منتج معين:

  1. انقر على عنوان علامة التبويب لإعادة تسميتها. على سبيل المثال، يمكنك إعادة تسمية علامات التبويب كـ "المواصفات", "إرشادات العناية" أو "الأسئلة الشائعة."
  1. في منطقة المحتوى، استخدم أدوات مثل محرر النصوص, الصورة, القائمةأو أكورديون لإضافة محتوى غني.
    • المواصفات: Add a list or text widget to detail technical specifications. For example, list details like battery capacity, dimensions, and weight if you’re selling electronics.
    • إرشادات العناية: استخدم النص widget to include instructions on how to care for the product. This could cover washing and drying methods if it’s a clothing item.
    • الأسئلة الشائعة: إضافة أكورديون widget to organize common questions and answers, such as “What is the warranty period?” or “How long does shipping take?”

أمثلة على الأسئلة الشائعة:

الخطوة 5: إضافة محتوى WooCommerce الديناميكي إلى علامات التبويب (اختياري)

لجعل علامات التبويب الخاصة بك أكثر تفاعلية، يمكنك دمج بيانات WooCommerce ديناميكيًا. إليك الطريقة:

  1. في منطقة محتوى علامة التبويب، انقر فوق العلامات الديناميكية أيقونة (التي تبدو ككومة من الصناديق الصغيرة)، على سبيل المثال, المواصفاتs.
  1. حدد محتوى WooCommerce الذي تريده، مثل وصف المنتج, سعر المنتجأو تقييم المنتج.
    • Example: In the “Specifications” tab, select وصف موجز للمنتج as the dynamic tag. This will ensure that any updates to the short description in WooCommerce are reflected automatically in the “المواصفات” tab.

الخطوة 6: تصميم علامات التبويب وتخصيصها

يوفر Elementor التصميم خيارات تسمح لك بتخصيص علامات التبويب الخاصة بك لتتماشى مع علامتك التجارية:

في لوحة Elementor، انتقل إلى الطراز علامة التبويب وضبط الطباعة والألوان والمسافات:

الخطوة 7: تحسين علامات التبويب للأجهزة المحمولة

يجعل Elementor من السهل معاينة تخطيطك وتعديله للأجهزة المختلفة:

  1. قم بالتبديل إلى الوضع المتجاوب في محرر Elementor وحدد الهاتف المحمول.
  2. اضبط تخطيط علامة التبويب، وحجم النص، والتباعد لتحسين الأجهزة المحمولة.
    • مثال على ذلك: يمكنك تكديس علامات التبويب عموديًا على الأجهزة المحمولة لتسهيل الوصول، خاصة على الشاشات الأصغر حجمًا حيث يمكن أن تكون التخطيطات الأفقية معقدة للتنقل.
https://www.openbyt.com/wp-content/uploads/2024/10/Action-2024-10-16-17-13-50.mp4

اختياري: استخدام مدير علامات تبويبات المنتجات ل WooCommerce للميزات المتقدمة

إن مدير علامات تبويبات المنتجات ل WooCommerce توفر الإضافة وظائف إضافية لإدارة علامات التبويب عبر منتجات متعددة:

الخاتمة

In conclusion, adding custom tabs to WooCommerce product pages using Elementor Pro offers a powerful way to enhance the user experience and make product information easily accessible. You can improve customer engagement and streamline navigation by organizing details like specifications, care instructions, and FAQs into visually appealing tabs. With Elementor’s flexible styling options and mobile optimization features, you can ensure that your tabs are attractive and functional across all devices. For advanced tab management, consider using the Product Tabs Manager plugin to create global, product-specific, and prioritized tabs, tailoring your product pages to meet your customers’ needs.

الأسئلة الشائعة

س: هل يمكنني استخدام هذه الطريقة مع النسخة التي يمكن الوصول إليها من Elementor؟

ج: مطلوب Elementor Pro للوصول إلى أدوات WooCommerce الخاصة بـ WooCommerce وميزات المحتوى الديناميكي. ومع ذلك، يمكنك إنشاء علامات تبويب ثابتة بسيطة باستخدام الإصدار المجاني.

سؤال: هل علامات التبويب المخصصة متوافقة مع الأجهزة المحمولة؟

ج: نعم، يتيح لك الوضع المتجاوب في Elementor معاينة علامات تبويب الهاتف المحمول وتخصيصها، مما يضمن ظهورها بشكل رائع على أي جهاز.

س: هل يمكن إضافة علامات تبويب عامة إلى جميع صفحات المنتجات؟

ج: نعم، تتيح لك إضافة WooCommerce Tab Manager إنشاء علامات تبويب عالمية تظهر عبر جميع صفحات المنتج، مما يوفر الوقت في التخصيص المتكرر.

الخروج من إصدار الهاتف المحمول