خلال عملي على تطوير المتاجر الإلكترونية باستخدام ووكومرس، لاحظت أن العملاء في كثير من الأحيان يحتاجون إلى طريقة سريعة لاستعراض تفاصيل المنتجات ومقارنتها دون الحاجة للانتقال من صفحة لأخرى. هذه الحاجة دفعتني لتجربة ميزة "العرض السريع للمنتجات"، والتي توفر طريقة عملية تتيح للمستخدمين التعرف على أبرز مواصفات المنتج وإضافته إلى السلة مباشرة من نفس الصفحة.
ساهمت هذه الميزة في تسهيل التصفح، تحسين تجربة المستخدم، وتقليل الوقت المستغرق لاتخاذ قرار الشراء، مما انعكس بشكل واضح على رفع معدل التحويل وزيادة المبيعات.
كيف فعلت ميزة العرض السريع في متجري ؟
توجد العديد من الإضافات الموثوقة التي تدعم تفعيل ميزة العرض السريع على ووكومرس، وأبرز الأمثلة الشائعة:
- Addonify – WooCommerce Quick View
- YITH WooCommerce Quick View
- WooCommerce Quick View by Xootix
وتوجد غيرها العديد من الخيارات، لذلك قمت بتجربة أغلب تلك الإضافات على متجري لاختيار الخيار الأكثر كفاءة. بعد الاختبار والتجربة، فضلت الاعتماد على إضافة Addonify، بفضل مرونتها في تخصيص مظهر نافذة العرض السريع والأيقونات لتتوافق تمامًا مع تجربة المستخدم التي تحتاج إليها وهوية متجرك.
1- تثبيت إضافة Addonify على المتجر
الخطوة الأولى، توجه إلى متجر إضافات ووردبريس عبر الانتقال إلى تبويب "إضافات" >> "أضف إضافة جديدة". ثم ابحث عن إضافة Addonify وثبتها على متجرك.
تثبيت إضافة Addonify على ووردبريس
فور تثبيت وتفعيل الإضافة على متجرك، ستلاحظ ظهور تبويب Addonify في قائمة ووردبريس الجانبية، وهو الذي ستعتمد عليه في إدارة خيارات العرض السريع على متجرك بالكامل.
2- تفعيل ميزة عرض المنتج السريع على المتجر
الآن انتقل إلى تبويب Addonify من قائمة ووردبريس الجانبية، ثم اختر تبويب General. بعد ذلك، فعّل خيار "Enable quick view" لتفعيل ميزة عرض المنتج السريع على المتجر.
كما يمكنك تفعيل خيار "Disable on mobile devices" لتعطيل هذه الميزة على الهواتف، لكن في متجري فضّلت الإبقاء عليها مفعّلة على الهاتف مع تفعيل ميزة الإغلاق السريع، والتي سنوضحها في الفقرات التالية، حتى لا تؤثر على تجربة المستخدم على الهاتف تمامًا.
تفعيل ميزة عرض المنتج السريع على المتجر
3- تخصيص مظهر زر عرض المنتج السريع على المتجر
بعد الانتهاء من الخطوات السابقة، انتقل إلى تبويب Button من القائمة الجانبية. ثم تحكم في مظهر زر عرض المنتج السريع كالآتي:
- حدد موقع الزر من خيار Button position؛ يمكن أن يكون قبل أو بعد زر الإضافة إلى السلة، أو فوق صورة المنتج نفسها.
- اكتب محتوى النص الظاهر على الزر من خيار Button label، مثل: معاينة المنتج.
التحكم في مظهر زر عرض المنتج السريع على المتجر
بعد ذلك، يمكنك تفعيل أيقونة تظهر بجوار نص الزر عبر تفعيل خيار "Enable icon in quick view button"، ثم اختيار مظهر الأيقونة المناسبة وموضع ظهورها بالنسبة للنص. وفي حالة أردت إظهار أيقونة فقط، يمكنك إزالة النص تمامًا من الخطوة السابقة والاعتماد على الأيقونة فقط.
اضافة أيقونة مخصصة لزر عرض المنتج السريع
بعدها، خصص مظهر الزر من قسم Button Style Options من حيث اللون، الخط، الحجم، المحاذاة، والإطار، حتى تضمن توافق مظهر الزر تمامًا مع هوية متجرك.
بعد الانتهاء من كافة الإعدادات، اضغط على زر "Save Options" لتطبيق التعديلات على متجرك.
تخصيص مظهر زر عرض المنتج السريع على المتجر
4- تخصيص طريقة عرض نافذة المنتج على المتجر
عندما يضغط الزائر على زر "عرض المنتج السريع"، تظهر له نافذة منبثقة تضم تفاصيل المنتج. يمكنك التحكم في محتوى ومظهر هذه النافذة عبر الانتقال إلى تبويب "Model Box" من القائمة الجانبية.
ثم حدد تفاصيل المنتج المطلوب عرضها في النافذة المنبثقة من خيار Content to display، مثل: الصورة، المحتوى المختصر، السعر، التقييم، زر الإضافة إلى السلة. ويفضل عدم تضمين الوصف التفصيلي للمنتج حتى لا تكون النافذة المنبثقة طويلة وتشتت الزائر عن الهدف الأساسي لها (الاطلاع السريع على تفاصيل المنتج).
كذلك حدد اتجاه عرض تفاصيل المنتج يمينًا أو يسارًا بناءً على لغة متجرك.
تحديد تفاصيل المنتج المطلوبة داخل النافذة المنبثقة
بعد ذلك، تحكم في خيارات الإغلاق السريع للنافذة التي تساعد على تحسين تجربة المستخدم عند التعامل مع العرض السريع كالآتي:
- أزل التفعيل عن خيار "Hide modal close button" حتى يظهر زر الإغلاق على نافذة المنتج المنبثقة.
- فعل خيار "Close modal if ESC key is pressed" حتى تُغلق النافذة المنبثقة تلقائيًا عند الضغط على زر ESC من لوحة المفاتيح.
- فعل خيار "Close modal if clicked outside" حتى تُغلق النافذة المنبثقة عند الضغط خارج حدودها.
ضبط خيارات الاغلاق السريع للنافذة المنبثقة
الخطوة التالية، تحكم في طريقة ظهور وإغلاق النافذة المنبثقة عبر تحديد نمط الفتح من خيار Modal opening animation، ونمط الإغلاق من خيار Modal closing animation.
التحكم في طريقة عرض النافذة المنبثقة على المتجر
ثم انتقل إلى تبويب Modal Box UI Options وتحكم في مظهر النافذة المنبثقة من حيث الخلفية، الإطار، المسافة بين الأعمدة، وغير ذلك، لتضمن توافق تصميم النافذة المنبثقة مع هوية متجرك.
تخصيص مظهر نافذة المنتج المنبثقة على المتجر
5- التحكم في خيارات عرض المنتج
الخطوة الأخيرة، انتقل إلى تبويب "Product" من القائمة الجانبية. ثم حدد طريقة عرض صور المنتج من خيار "Product Thumbnail"، سواء بعرض الصورة البارزة للمنتج فقط أو عرض جميع صور المنتج.
كذلك فعل خيار "Display view detail button" حتى يظهر زر "عرض تفاصيل المنتج" داخل نافذة العرض السريع، بما يساعد الزائر على الانتقال إلى صفحة المنتج بسهولة. ويمكنك تعديل نص الزر من خيار "View detail button label" كما هو موضح في الصورة التالية:
التحكم في طريقة عرض المنتج في النافذة المنبثقة
بعد ذلك، انتقل إلى قسم Product Content Options وتحكم في طريقة عرض عنوان ومحتوى المنتج من حيث اللون، الخط، الحجم، المسافات بين العناصر، وغيرها من الخيارات التي تساعدك على عرض تفاصيل المنتج بشكل واضح للزائر داخل المتجر.
تخصيص طريقة عرض عنوان ومحتوى المنتج في النافذة المنبثقة
بعد الانتهاء من الخطوات السابقة، يمكنك الآن معاينة ميزة العرض السريع على متجرك. انتقل إلى صفحات المنتجات على المتجر، ستلاحظ ظهور زر "معاينة المنتج" كما هو موضح في الصورة التالية:
مظهر خيارات العرض السريع على المتجر
وعندما يضغط الزائر على الزر "معاينة المنتج"، ستظهر له نافذة منبثقة تضم تفاصيل المنتج بناءً على إعدادات العرض التي خصصتها في الخطوات السابقة.
تفاصيل المنتج المختصرة داخل نافذة العرض السريع على المتجر
بهذا الشكل أتممت تفعيل ميزة عرض المنتج السريع في متجري بطريقة احترافية ومتوافقة مع هوية المتجر. ساعدت هذه الميزة في تسهيل تصفح المنتجات وتحسين تجربة الشراء، كما اختصرت الوقت الذي يستغرقه العميل لاتخاذ قرار الشراء، وهو ما ساهم بشكل ملحوظ في زيادة معدل التحويل وتحقيق مبيعات أعلى. إذا كنت تدير متجرًا على ووكومرس، أنصحك بتجربتها لتمنح عملاءك تجربة شراء أكثر سهولة وفاعلية.
أحمد عباس
10 يوليو، 2025