كيفية تخصيص معرض منتجات WooCommerce

نشرت: 2022-01-25

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

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

لماذا تخصيص معرض المنتجات في WooCommerce؟

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

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

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

كيفية تخصيص معرض منتجات WooCommerce؟

يمكنك تخصيص معرض المنتجات في WooCommerce باستخدام طريقتين :

  1. من لوحة تحكم WooCommerce
  2. باستخدام البرنامج المساعد

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

1. تخصيص معرض المنتجات من WooCommerce Dashboard

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

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

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

ثم ، انقر فوق تحرير للمنتج حيث تريد تخصيص معرض المنتج.

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

1.1 أضف معرض منتجات في WooCommerce

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

تخصيص معرض منتجات woocommerce إضافة معرض

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

يمكنك تحديد منتجات فردية أو متعددة لإضافتها إلى معرض المنتجات. ما عليك سوى تحديد الصور التي تريد إضافتها إلى المعرض والنقر فوق " إضافة إلى المعرض ".

قم بتخصيص معرض منتجات woocommerce أضف إلى المعرض

بمجرد الانتهاء من إضافة معرض المنتج ، انطلق وقم بتحديث صفحة المنتج.

عندما تقوم بتحديث صفحة المنتج ، ستتمكن من رؤية معرض منتجاتك الجديد.

تخصيص-معرض-المنتج-من-woocommerce-dashboard

1.2 إعادة ترتيب المنتجات في المعرض

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

تخصيص معرض إعادة ترتيب معرض منتجات woocommerce

أخيرًا ، انقر فوق الزر تحديث بمجرد إعادة ترتيب المنتجات.

1.3 إزالة المنتجات من المعرض

يمكنك أيضًا إزالة المنتجات من المعرض بنقرة واحدة على الماوس. ما عليك سوى الانتقال إلى الصور المصغرة للصور في صفحة تحرير المنتج من لوحة القيادة مرة أخرى.

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

تخصيص معرض إزالة معرض منتجات woocommerce

ومع ذلك ، إذا كنت ترغب في إزالة معرض المنتج بالكامل ، فسيتعين عليك إزالة جميع المنتجات من المعرض واحدًا تلو الآخر.

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

2. تخصيص معرض منتجات WooCommerce باستخدام البرنامج المساعد

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

ومع ذلك ، إذا كنت تريد تخصيصات إضافية لمعرض المنتج ، فيمكننا استخدام بعض الإضافات الرائعة لتصفية المنتج.

قمنا هنا بإدراج بعض المكونات الإضافية لتخصيص معرض المنتجات في WooCommerce. كل واحد منهم لديه ميزة فريدة ووظائف.

شريط تمرير معرض المنتجات لـ WooCommerce

يعد Product Gallery Slider لـ WooCommerce أفضل مكون إضافي مجاني. كما يوحي الاسم ، يتيح لك هذا المكون الإضافي إضافة دائرة في قسم معرض WooCommerce. يوفر أكثر من 10 خيارات تخصيص ويعمل هذا المكون الإضافي مع معظم سمات WordPress.

بالإضافة إلى ذلك ، يدعم هذا المكون الإضافي منشئ صفحات Elementor و Visual Composer الذي يمنحك التحكم الكامل في تصميم موقع WooCommerce الخاص بك. يمكنك أيضًا الحصول على وحدة Lightbox التي تتيح لك إضافة تأثيرات الشرائح ، وتكبير الصور وعرض الصور المصغرة لجذب العملاء.

دلائل الميزات

  • تتوفر 3 مخططات معرض مختلفة
  • يدعم الفيديو في معرض المنتج
  • يدعم لغة RTL
  • الرمز القصير جاهز

السعر

يعد Product Gallery Slider for WooCommerce مكونًا إضافيًا مجانيًا يكلفك 39 دولارًا أمريكيًا سنويًا.

معرض فيديو منتج WooCommerce

معرض الفيديو woocoomerce-product

بمساعدة معرض فيديو منتج WooCommerce ، يمكنك تضمين مقاطع فيديو في معرض المنتج مع الصور. وهو يدعم مقاطع فيديو Youtube و Vimeo وكذلك مقاطع الفيديو بتنسيقات MP4 و WebM و Ogg. يحتوي على واجهة رائعة سهلة الاستخدام لتضمين الفيديو على موقع WooCommerce.

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

دلائل الميزات

  • تخطيط شريط التمرير الرأسي والأفقي
  • تكييف الارتفاع بناءً على الصور
  • الرمز القصير جاهز
  • متوافق مع Elementor و Divi builder

السعر

معرض فيديو منتج WooCommerce هو أداة مجانية. لديها نسخة مجانية مع الميزات الأساسية و 3 خطط متميزة تبدأ من 25 دولارًا أمريكيًا في السنة.

الآن بعد أن قمنا بإدراج خيارين ، دعنا نمضي قدمًا ونثبت أحدها لتخصيص معرض المنتجات في WooCommerce.

في هذا العرض التوضيحي ، سنستخدم Product Gallery Slider لـ WooCommerce التي طورتها Codeixer. هذا مكون إضافي مجاني يضمن عرض منتجاتك بأسلوب جميل.

2.1. قم بتثبيت البرنامج المساعد

لتثبيت المكون الإضافي ، انتقل إلى WP Admin Dashboard وانتقل إلى الإضافات> إضافة جديد.

ابحث عن الكلمات الأساسية في Product Slider للمكوِّن الإضافي WooCommerce ثم ، انقر فوق الزر " تثبيت الآن " لتثبيت المكون الإضافي. أخيرًا ، قم بتنشيطه بعد اكتمال التثبيت.

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

2.2. تخصيص معرض المنتجات

بعد تنشيط المكون الإضافي ، يمكنك البدء في استخدامه لتخصيص معرض المنتج. ما عليك سوى الانتقال إلى Codeixer> Gallery Options من لوحة معلومات WordPress الخاصة بك.

يجب أن تكون قادرًا على رؤية إعدادين هنا ، الخيارات العامة وخيارات العرض المبسط .

في حين أن جميع الخيارات غير متوفرة في الإصدار المجاني من المكون الإضافي ، فإنه يوفر لك ما يكفي لتخصيص كل شيء وفقًا لاحتياجاتك.

2.2.1. خيارات عامة

تتضمن الخيارات العامة جميع التخصيصات الأساسية التي يمكنك إجراؤها لمعرض المنتج.

أضف شريط تمرير دائري

في الخيارات العامة ، ستتمكن من رؤية Slider Autoplay . حدد نعم من القائمة المنسدلة لإضافة شريط تمرير دائري تلقائيًا بدون أي تعديلات إضافية.

تكبير صورة المنتج

يتيح وجود ميزة التكبير / التصغير لمنتجك لعميلك رؤية عرض تفصيلي لبضائعك ويعطي عرضًا مرئيًا أفضل أيضًا.

لتمكين ميزة التكبير / التصغير لمنتجاتك في معرض المنتجات ، ما عليك سوى تحديد نعم في القائمة المنسدلة من خيار تكبير الصورة .

سهام المنزلق والزر

يمكنك أيضًا تخصيص أسهم وأزرار شريط التمرير عن طريق تغيير لونها لتتناسب مع موقع WooCommerce الإلكتروني الخاص بك.

للقيام بذلك ، ستجد Icon Color ضمن الخيار "عام". اختر أي لون من اختيارك من منتقي الألوان.

تخصيص المنزلق الأسهم

بمجرد تحديد اللون ، تأكد من حفظ التغييرات .

بالإضافة إلى ذلك ، يمكنك أيضًا ضبط ما يلي في الإعدادات العامة:

  • تمكين / تعطيل رمز التنقل
  • عدد الصور المصغرة التي سيتم عرضها
  • حرك المنتج بلا حدود
  • حرك الصورة بالماوس السحب

2.2.2. خيارات العرض المبسط

في علامة التبويب lightbox ، يوجد إعدادان في الإصدار المجاني.

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

خيارات العرض المبسط

يمكنك رؤية كل هذه التغييرات في معرض المنتج بعد معاينة صفحة المنتج.

تخصيص-woocommerce-product-gallery-with-plugin

أحسنت! هذه هي الطريقة التي تقوم بها بتخصيص معرض المنتجات في WooCommerce.

المكافأة: أضف أحجام صور مخصصة في WordPress

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

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

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

حجم الصورة المصغرة: 150 × 150 بكسل

الحجم المتوسط: 300 × 300 بكسل

أكبر حجم: 1024 × 1024 بكسل

الحجم الكامل: الإعداد الافتراضي للحجم الأصلي للصورة التي تم تحميلها.

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

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

كيفية تغيير حجم الصور وتعديلها في WordPress

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

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

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

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

استنتاج

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

للتلخيص ، يمكنك تخصيص معرض المنتجات في WooCommerce باستخدام طريقتين رئيسيتين:

  • من WooCommerce Dashboard
  • باستخدام البرنامج المساعد

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

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

نأمل أن تتمكن من تخصيص معرض منتجات WooCommerce بسهولة. إذا وجدت هذا الدليل مفيدًا ، فإليك بعض المقالات الأخرى التي قد تكون ممتعة بالنسبة لك:

  • كيفية تخصيص صفحة منتج WooCommerce
  • أفضل الإضافات لتخصيص صفحة منتج WooCommerce
  • كيفية تخصيص قالب صفحة منتج WooCommerce

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