يبحث أصحاب المتاجر الإلكترونية دائمًا عن طرق لتحسين تجربة الشراء وزيادة المبيعات. من بين الحلول الفعالة التي طبقتها على متجري كانت ميزة مقارنة المنتجات في ووكومرس، والتي ساعدت العملاء على اتخاذ قرارات الشراء بثقة وسرعة. إذ تتيح هذه الميزة عرض الفروقات بين المنتجات بطريقة منظمة وواضحة، مما يقلل من تردد العميل ويزيد من احتمالية إتمام الطلب.
في هذا المقال أشارك تجربتي العملية في تفعيل ميزة المقارنة، وكيف ساهمت في تحسين تجربة المستخدم ورفع معدل التحويل داخل المتجر.
كيف فعلت ميزة مقارنة المنتجات على متجري؟
اعتمدت في تفعيل هذه الميزة على متجري على إضافة YITH WooCommerce Compare، إذ توفر الإضافة تحكمًا كاملًا في عناصر المقارنة مثل السعر، المواصفات، نسبة الخصم وغيرها. كما تتيح تخصيص مظهر جداول المقارنة بشكل مرن ليتوافق تمامًا مع هوية المتجر.
يجدر بالذكر أن الإضافة تتوفر بإصدار مجاني وآخر مدفوع. الإصدار المجاني يتيح خيارات المقارنة الأساسية بين المنتجات فقط، بينما يوفّر الإصدار المدفوع خيارات تحكم أوسع في عناصر المقارنة، مثل تحديد عدد المنتجات القابلة للمقارنة، وإظهار شريط المقارنة، بالإضافة إلى إمكانية تخصيص مظهر صفحة المقارنة وعناصرها بشكل كامل.
01- ثبت إضافة YITH WooCommerce Compare على متجري
في البداية، توجهت إلى متجر إضافات ووردبريس من خلال الانتقال إلى “إضافات” >> “أضف إضافة جديدة“. ثم بحثت عن إضافة YITH WooCommerce Compare وثبّتها على متجري.
انتظرت حتى اكتمال تثبيت الإضافة، ثم فعّلتها على المتجر. بعدها ستلاحظ ظهور تبويب Yith في قائمة ووردبريس الجانبية، والذي سنعتمد عليه في إدارة كافة خيارات المقارنة في الخطوات التالية.
02- ضبط إعدادات المقارنة الرئيسية
الآن، توجهت إلى إعدادات إضافة YITH WooCommerce Compare من خلال الانتقال إلى تبويب “YITH” >> “Compare“. بعد ذلك، اخترت “Settings” من القائمة العلوية كما هو موضح في الصورة التالية:
بعد ذلك، ضبطت إعدادات المقارنة الأساسية على متجري كما يلي:
- في خيار Link or Button، اخترت Button ليظهر خيار المقارنة على هيئة زر في صفحات المتجر.
- وفي خيار Page or Popup، فضّلت اختيار Popup حتى تظهر نافذة المقارنة كنافذة منبثقة دون تحويل العميل إلى صفحة منفصلة.
- أما في خيار Choose Compare Page، فتأكدت من اختيار صفحة المقارنة التلقائية التي أنشأتها الإضافة، وهي صفحة Compare.
- بعدها عدّلت نص زر المقارنة من خيار Link/Button text.
- ثم عدّلت نص الزر الذي يظهر للزائر عند إضافة أكثر من عنصر إلى المقارنة من خيار Link/Button text for products already in compare.
بعد ذلك، فعلت الخيارات الآتية:
- Show button in single product page ليظهر زر المقارنة في صفحة المنتج.
- Show button in products list ليظهر زر المقارنة أيضًا في صفحة كتالوج المنتجات.
- Open lightbox automatically ليظهر مربع يوضح للعميل المنتجات داخل جدول المقارنة عند إضافة منتجات للمقارنة.
03- تحديد عناصر المقارنة الرئيسية على المتجر
في هذه المرحلة، انتقلت إلى تبويب Comparison Table من القائمة العلوية، وبدأت بالتعديل على عنوان جدول المقارنة في المتجر من خيار “Table title“.
بعد ذلك، فعّلت الخيارات المهمة الآتية:
- Dynamic Attribute fields، ليظهر المتغيرات في المقارنة بين المنتجات مثل الألوان، الحجم، وغيرها.
- Add product custom attributes، ليتم عرض العناصر المخصصة للمقارنة بين المنتجات ضمن الجداول (والتي اعتمدت عليها في تأسيس جداول المقارنة في متجري كما سأوضح في الفقرة التالية).
بعد ذلك، حدّدت عناصر المقارنة الأساسية بين المنتجات من قسم Fields to show، مثل السعر، التقييم، الوصف، المخزون، وغيرها من العناصر بحسب طبيعة منتجات المتجر.
ثم فعّلت خيار Repeat “Add to cart” field ليظهر زر الإضافة إلى السلة داخل جداول المقارنة، مما يسهّل على العميل شراء المنتج المناسب بسرعة.
كما فعّلت خيار Highlight different values لتسليط الضوء على العناصر المختلفة بين المنتجات في الجدول، مثل التقييمات، المخزون، السعر، وما إلى ذلك.
بعد ذلك، عدّلت بعض إعدادات المقارنة على النحو الآتي:
- من خيار Number of fixed columns، حدّدت الحد الأدنى للأعمدة الثابتة في جداول المقارنة.
- وفي خيار Limit compared products، حدّدت الحد الأقصى للمنتجات المعروضة في الجدول.
- ثم فعّلت زر Show “Clear All” button ليظهر زر مسح عناصر المقارنة أسفل الجدول، مع إمكانية تعديل نص الزر بسهولة من خيار “Clear All” button label.
بعد الانتهاء من الإعدادات السابقة، ضغطت على زر Save Changes لتطبيق التعديلات على المتجر.
04- تعديل مظهر جداول المقارنة على المتجر
بعد الانتهاء من الخطوات السابقة، انتقلت إلى تبويب “Style” للتحكم في مظهر جداول المقارنة. في القسم الأول، يمكن تعديل عناوين الأقسام، الألوان، الروابط، الأزرار، الخلفية، الإطارات، وغيرها من الخيارات المتعددة.
وبالمثل، يمكن تعديل أقسام ومظهر الجدول من حيث خلفيات الخلايا، الصفوف، العناوين البارزة، الأزرار، الخطوط، وغيرها من العناصر التي تضمن توافق الهوية البصرية تمامًا مع مظهر المتجر.
بعد الانتهاء من تخصيص مظهر الجدول بما يتوافق مع هوية المتجر، ضغطت على زر Save Changes لتطبيق التعديلات على متجري.
05- تنظيم متغيرات المنتجات إلى المتجر
الآن أصبحت قادرًا على المقارنة بين المنتجات في المتجر، لكن هذه المقارنة تظل سطحية وتشمل السعر، التقييم، الوصف، المخزون، وغيرها من العناصر الأساسية. لكن في متجري، أحتجت إلى مقارنة تفصيلية وعملية تتناسب مع تخصص المتجر (الهواتف)، مثل المقارنة بين مساحة التخزين، ذاكرة الوصول العشوائي، حجم الشاشة، وما إلى ذلك.
هنا تظهر أهمية خيار Add product custom attributes الذي فعّلته في الخطوات السابقة. لذلك، انتقلت إلى سمات المنتجات على ووكومرس من تبويب “المنتجات” >> “السمات“.
بعد ذلك، أضفت سمات المنتجات المميزة التي سأعتمد عليها في المقارنة. على سبيل المثال: الرام (RAM)، ثم ضغطت على زر “إضافة سمة“.
وبالمثل، أضفت جميع سمات المنتجات في متجري كما هو موضح في الصورة التالية:
بعد ذلك، أضفت متغيرات السمات بهدف تنظيم المنتجات في المتجر وتنظيم جدول المقارنة بعناصر ثابتة. للتعرف أكثر إلى طريقة التعامل مع السمات وتنظيم المنتجات على ووكومرس، راجع دليلنا عن كيفية تنظيم المنتجات في متجرك على ووكومرس.
الآن، عند إضافة المنتجات إلى المتجر، انتقلت إلى قسم “السمات” ثم قسّمت المنتج إلى السمات التي أضفتها في الخطوة السابقة. على سبيل المثال، بدأت بسمة حجم الشاشة (Display) وعيّنت القيمة المناسبة كما هو موضح في الصورة التالية:
وبالمثل، أضفت سمات الهاتف الأخرى مثل البطارية، الكاميرات، المعالج، وما إلى ذلك.
بهذا أصبح المنتج جاهزًا للمقارنة بناءً على السمات المميزة، وإذا كان لديك منتجات سابقة، فيلزم تعديلها يدويًا وفقًا للسمات المٌضافة حتى تكون المقارنة دقيقة على متجرك.
06- اختبار المقارنة وتجربة المستخدم على المتجر
الآن أصبحت خاصية المقارنة بين المنتجات جاهزة على المتجر. لذلك، توجهت إلى صفحات المتجر لاختبار تجربة المستخدم والنتيجة النهائية. وجدت زر المقارنة (Compare) يظهر في صفحة المنتجات كما هو موضح في الصورة التالية:
وعند الانتقال إلى صفحة المنتج الداخلية، وجدت زر المقارنة يظهر أيضًا بجوار زر الإضافة إلى السلة، كما هو ظاهر في الصورة التالية:
كذلك، عند ضغط العميل على زر “Compare” لأكثر من منتج، تظهر له نافذة منبثقة تُجري مقارنة بين المنتجين بناءً على السمات المتغيرة، كما هو واضح في الصورة التالية:
بهذا تم تفعيل ميزة مقارنة المنتجات على متجري بشكل ناجح وفعّال. وتُعد هذه خطوة مهمة في تحسين تجربة الشراء داخل المتجر، إذ ساعدت على تبسيط قرارات الشراء للعملاء، وتقليل التردد، وزيادة معدل التحويل بشكل ملحوظ، مما يقود العميل بشكل أسرع نحو المنتج المناسب.
في الختام، أنصح بعدم المبالغة في عدد عناصر المقارنة داخل الجدول، والتركيز على السمات الأكثر تأثيرًا في قرار الشراء، لتجنب تشتيت الزائر والحفاظ على تجربة تصفح بسيطة وتجربة شراء فعّالة.
