كيفية إنشاء صفحة متجر WooCommerce جميلة (في 5 خطوات)

هل تبحث عن أسهل طريقة لتخصيص صفحة متجر WooCommerce؟

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

لذلك ، قد تتساءل عن كيفية استخدام هذه العناصر لإنشاء صفحة متجر WooCommerce تؤدي إلى التحويلات.

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

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

جدول المحتويات:

1. ضع كتلة كل المنتجات
2. إضافة كتل المنتجات المميزة و / أو المنتجات المختارة بعناية
3. تمكين البحث عن المنتج على صفحة المتجر
4. استخدم مجموعات الفئات المميزة
5. أضف خيارًا لتصفية المنتجات حسب السعر

كيفية تخصيص صفحة متجر WooCommerce باستخدام الكتل

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

1. ضع كتلة كل المنتجات

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

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

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

افتح هذه الصفحة في Block Editor ، وسترى شيئًا كالتالي:

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

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

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

2. أضف مجموعات المنتجات المميزة و / أو المنتجات المختارة بعناية

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

بمجرد وضع هذا الحظر على صفحتك ، ستحتاج إلى تحديد المنتج الذي تريد تمييزه والنقر فوق تم :

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

يمكنك بعد ذلك تخصيص هذه الكتلة حسب رغبتك. على سبيل المثال ، يمكنك تغيير الصورة وتعديل زر الحث على الشراء.

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

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

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

3. تمكين البحث عن المنتج على صفحة المتجر

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

عند إضافة كتلة بحث إلى صفحة متجرك ، سترغب في البحث عن خيار Product Search ، وليس كتلة بحث WordPress الافتراضية. سيحصر Product Search النتائج على منتجات WooCommerce ، بينما ستشمل كتلة البحث الأخرى جميع الصفحات الأخرى على موقعك.

إليك ما تبدو عليه وظيفة البحث WooCommerce:

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

4. استخدم مجموعات الفئات المميزة

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

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

إليك ما ستبدو عليه كتلة الفئة المميزة :

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

نظرًا لأن كتلة فئة المنتج المميزة أساسية جدًا ، نوصيك بالبحث في المكونات الإضافية مثل Otter Blocks لمزيد من التخصيص.

باستخدام Otter Blocks ، يمكنك تعديل كتل WooCommerce عن طريق إضافة الرسوم المتحركة وإعدادات الرؤية الأخرى:

علاوة على ذلك ، تضيف Otter Blocks مجموعة متنوعة من الكتل الجديدة التي يمكنك استخدامها في متجرك عبر الإنترنت. يتضمن ذلك خيارات مثل النوافذ المنبثقة (التي تعتبر مثالية لجمع عمليات الاشتراك في البريد الإلكتروني) ومراجعات المنتجات.

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

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

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

قيم الأسعار غير قابلة للتعديل - فهي تعتمد على أسعار منتجاتك. يمكن للزوار إما كتابة القيم التي يريدونها أو استخدام شريط التمرير لتعديلها.

عند إجراء تغييرات على شريط تمرير السعر ، سيتم تحديث مجموعة جميع المنتجات لإظهار المنتجات التي تفي بالمعايير. يحدث هذا دون حاجة المستخدمين إلى إعادة تحميل الصفحة.

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

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

وهذا كل شيء إلى حد كبير! عند الانتهاء ، تأكد من حفظ التغييرات وستبدأ صفحة متجرك الجديدة في العمل على الفور.

قم بإعداد صفحة متجر WooCommerce الخاصة بك اليوم

هدفك النهائي هو إنشاء صفحة تزيد من التحويلات من خلال تزويد المستخدمين بجميع الخيارات التي يبحثون عنها في تخطيط وترتيب منطقي.

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

هل لديك أي أسئلة حول كيفية إنشاء صفحة متجر WooCommerce باستخدام الكتل؟ واسمحوا لنا أن نعرف في قسم التعليقات أدناه!