كيفية تخصيص صفحة منتج WooCommerce الخاصة بك
نشرت: 2022-10-18يتم طلب صفحات المنتج على أي موقع ويب للتجارة الإلكترونية باعتبارها الجزء الأكثر أهمية. لأنه يحتوي على جميع التفاصيل المتعلقة بمنتج بطريقة منظمة مع معلومات إضافية مثل المنتجات ذات الصلة ، إلخ.
تعد صفحة منتج WooCommerce الافتراضية مناسبة للعرض السريع للمنتج الأساسي والإضافة إلى عربة التسوق والوظائف الأساسية الأخرى ، ولكن هذا ببساطة لا يكفي في بيئة التجارة الإلكترونية التنافسية الحديثة. تلعب صفحة المنتج وظيفة مهمة في أي منصة أعمال مبنية من WooCommerce باعتبارها واحدة من أهم الصفحات. ومع ذلك ، فإن الصفحة الافتراضية فقط لا تقطعها.
لا يمكن المبالغة في أهمية تخصيص صفحات المنتج.
من خلال تخصيص صفحات منتجك ، فإنك تقدم لعملائك تجربة تسوق فريدة ، وهو أمر مهم أيضًا للاحتفاظ بالزائرين وزيادة عدد المبيعات.
في هذا المنشور ، سنوجهك خلال عملية كيفية استخدام محرر صفحة منتج WooCommerce وعناصر واجهة مستخدم WooCommerce المخصصة لإنشاء صفحات منتجات جذابة والمزيد.
جدول المحتويات
الأدوات المطلوبة لتخصيص صفحة منتج WooCommerce؟
أولاً وقبل كل شيء ، يجب أن يكون لديك أحدث إصدار من WordPress مثبتًا على الخادم الخاص بك ، علاوة على ذلك ، يجب تثبيت المكون الإضافي WooCommerce لاستيعاب جميع وظائف صفحة المتجر / المتجر.
أنت أيضًا بحاجة إلى سمة WordPress للتجارة الإلكترونية تعتمد على الوظائف ، وأخيرًا وليس آخرًا ، ستحتاج إلى مكون إضافي WooCommerce Elementor Shop Builder . باستخدام المكون الإضافي Elementor shop builder ، ستتمكن من التحكم الكامل في صفحات المتاجر الفردية وتخصيصها وشبكة منتجات السوق وقائمة المنتجات وكتل مقارنة المنتجات وما إلى ذلك.
كيفية تخصيص صفحة منتج WooCommerce
نأمل أن يكون لديك تثبيت فعال لـ WordPress وموضوع تجارة إلكترونية فعال مثبت بالفعل على الخادم الخاص بك. الآن ، دعنا ننتقل إلى العملية خطوة بخطوة لتخصيص صفحة المنتج بدءًا من موارد وأدوات WordPress الإضافية المطلوبة.
الخطوة 1: تثبيت البرنامج الإضافي Elementor WooCommerce الإضافي
في هذا المثال المباشر لتخصيص صفحة منتج WooCommerce مع عناصر مختلفة وحوامل أشكال منتجات WooCommerce التي يجب تقديم صفحة منتج حديثة للعملاء ، سنستخدم شيئًا مشابهًا للملحن المرئي لمنشئ صفحة منتج WooCommerce - يسمى ShopReady.
يعد منشئ متجر ShopReady Elementor أداة مجمعة مذهلة وشاملة لإنشاء مواقع ويب قوية لمتاجر التجارة الإلكترونية. يأتي المكون الإضافي مزودًا بأكثر من 105 من عناصر واجهة المستخدم المصممة باحتراف مع وظائف وأدوات خاصة بحالة الاستخدام. على سبيل المثال ، باستخدام هذا المكون الإضافي للتجارة الإلكترونية ، يمكنك إنشاء عامل تصفية منتج WooCommerce وظيفي قادر على تصفية المنتجات بالتسعير والحجم والوزن واللون والتصنيف والشحن وما إلى ذلك.
لبدء استخدام هذا المكون الإضافي WooCommerce ، ابدأ بتنزيله. للقيام بذلك ، قم بتسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك ، وتوجه إلى وانقر على زر التثبيت .
انتظر حتى التثبيت الناجح للمكوِّن الإضافي وانقر فوق تنشيط .
ستظهر قائمة ShopReady في لوحة معلومات WordPress الخاصة بك. من هنا ، ستتمكن من الوصول إلى جميع عناصر واجهة المستخدم والوحدات النمطية والمحتوى المحدد مسبقًا المقدم من المكوِّن الإضافي لمخصص صفحة المتجر.
من هذه القائمة البسيطة ، يمكنك تمكين / تعطيل عناصر واجهة المستخدم ، وإنشاء قوالب ، وإدراج مفاتيح API لوظائف مختلفة.
ميزة أخرى رائعة لهذا البرنامج المساعد هي محوّل العملات لقدرة WooCommerce. لتمكين هذه الوظيفة ، ستحتاج إلى اتباع التعليمات الموضحة أدناه.
لإضافة مفتاح API الخاص بالعملة الذي أنشأته Exchangerate ، انقر فوق علامة التبويب API.
قم بتسجيل الدخول إلى لوحة معلومات حساب Exchangerate وانسخ مفتاح API للحصول عليه. بعد لصق مفتاح API الخاص بك ، انتقل إلى لوحة معلومات WordPress الخاصة بك> ShopReady> API وانقر فوق الخطوة 2: استخدم قالب صفحة منتج محدد مسبقًا ، أو أنشئ قالبًا من الصفر
الخطوة التالية هي البدء في العمل على صفحة منتج ، ولكن قبل ذلك ، ستحتاج إلى إضافة منتجات إلى موقع WooCommerce الخاص بك. إذا كنت لا تعرف كيفية القيام بذلك ، فيمكنك اتباع هذا الدليل حول - كيفية إضافة منتج WooCommerce سريعًا .
الآن لبدء تخصيص صفحة لعرض منتج ، استخدم ShopReady - WooCommerce Builder لإنشاء صفحة منتج بسيطة بالانتقال إلى لوحة معلومات البرنامج المساعد والنقر فوق علامة التبويب القوالب . قم بتمكين فئة نموذج المنتج وابحث عن إعداد منتج واحد. انقر الآن على أيقونة التحرير.
وستتم إعادة توجيهك إلى شاشة محرر Elementor . الآن لبدء تخصيص الصفحة ، انقر فوق رمز علامة الجمع لإضافة أقسام Elementor. هناك أنواع مختلفة من أقسام Elementor التي يمكنك إضافتها إلى صفحتك اعتمادًا على الطريقة التي تريد أن تظهر بها صفحتك والأدوات التي ترغب في استخدامها.
الخطوة 3: تخصيص صفحة منتج WooCommerce باستخدام Elementor Widgets
- إضافة عنوان المنتج
الآن بما أنك وضعت هيكل قسم Elementor أساسي لصفحة منتج WooCommerce ، يمكنك البدء بإضافة عنوان منتج. للقيام بذلك ، ستحتاج إلى سحب وإفلات أداة عنوان المنتج على صفحة المنتج.
ولعرض عنوان المنتج المناسب ، انقر فوق علامة التبويب " المحتوى " ، وتحت ذلك ستجد خيارات تحديث المحرر . حدد عنوان المنتج المناسب من خيار المنتج التجريبي .
يجب عليك إضافة أو تحرير معلومات المنتج المناسبة من WooCommerce Product Dashboard حتى تُظهر هذه البيانات عنوان المنتج المناسب.
- إضافة صورة مميزة إلى صفحة المنتج
بعد ذلك ، ستحتاج إلى معرض صور المنتج الخاص بك وصورة مميزة لمنتجك. لهذا الغرض ، يمكنك استخدام أي واحدة من أدوات واجهة المستخدم المتعددة للصور التي يوفرها الملحق الكل في واحد Elementor للتجارة الإلكترونية.
في هذا المثال ، سنستخدم ShopReady Thumbnail مع أداة Zoom ، فهو يفعل ما يوحي به عنوانه. باستخدام هذه الأداة ، يمكنك إظهار عملائك على إصدار WooCommerce لتكبير / تصغير صورة منتجك عندما يحومون فوق صورة منتجك.
كما كان من قبل ، يمكنك تحديد صورة المنتج الصحيحة من خيار المنتج التجريبي ، علامة التبويب المحتوى .
- إضافة كتلة لأداة التسعير
عنصر آخر مهم يجب أن يكون على صفحة منتج التجارة الإلكترونية الخاص بك هو كتلة تسعير المنتج. لهذا ، ستحتاج إلى تحديث سمات منتج WooCommerce بالتحديثات الصحيحة ، واستخدام أداة ShopReady Price ، والتي يجب وضعها تحت عنوان المنتج.
لعرض السعر الصحيح ، حدد عنوان المنتج من خيار المنتج التجريبي ، ضمن علامة التبويب المحتوى .
- إضافة وصف المنتج
لديك أيضًا القدرة على إضافة أوصاف منتجات قابلة للتخصيص بدرجة كبيرة باستخدام عنصر واجهة مستخدم وصف المنتج لوظائف WooCommerce الإضافية . من علامة تبويب النمط ، سيكون لديك خيار تخصيص كيفية ظهور وصف المنتج للجماهير.
- إضافة وظيفة إضافة إلى عربة التسوق
تعد الإضافة إلى عربة التسوق ميزة أخرى مهمة للغاية ، مما يسمح لعملائك بالحصول على منتجات متعددة على صفحة عربة التسوق الخاصة بهم قبل المتابعة إلى صفحة الخروج.
للحصول على وظيفة "إضافة إلى عربة التسوق " القوية على صفحة متجر التجارة الإلكترونية ، يمكنك استخدام أداة ShopReady Add to Cart. باستخدام هذه الأداة ، يمكنك السماح لعملائك بزيادة كمية منتجات سلة التسوق وتقليلها مباشرةً من كتلة إضافة إلى عربة التسوق.
يمكنك أيضًا تخصيص زر إضافة إلى عربة Elementor من طباعة علامة تبويب WooCommerce ، واللون ، والخلفية ، والهامش ، والحشو ، وما إلى ذلك.
- إضافة البيانات الوصفية إلى صفحة المنتج
لتوفير تجربة تسوق أفضل لعملائك ، يجب عليك تنفيذ عامل تصفية منتج WooCommerce باستخدام البيانات الوصفية وسمات المنتج التي أضفتها أثناء إضافة منتجات إلى WooCommerce .
لعرض هذه البيانات على صفحة منتجك ، ابحث عن أداة ShopReady Meta وقم بإفلاتها تحت زر إضافة إلى عربة التسوق.
يجب أن تظهر علامات المنتج والبيانات الوصفية بشكل صحيح عند تحديد عنوان المنتج الصحيح من خيار المنتج التجريبي ، ضمن علامة التبويب المحتوى .
- إضافة أزرار مشاركة الوسائط الاجتماعية إلى صفحة المنتج
يمكن لعملائك أيضًا مشاركة منشورات منتجك على وسائل التواصل الاجتماعي مباشرةً من صفحة منتج WooCommerce الخاصة بك باستخدام كتلة زر مشاركة وسائط اجتماعية بسيطة. والتي يمكنك إنشاؤها ببساطة باستخدام أداة السحب والإفلات Elementor Social Share.
يمكن تخصيص الكتلة مع أي رموز وسائط اجتماعية ونصوص وروابط قابلة للمشاركة مباشرة من علامة تبويب المحتوى . ويمكن أيضًا تخصيصها لتغيير مظهر كتل المشاركة الاجتماعية من علامة التبويب Elementor Style .
وقد انتهيت من أساسيات تخصيص صفحة منتج WooCommerce.
الخطوة 4: إضافة منتجات ذات صلة إلى صفحة منتج WooCommerce
هناك طريقة رائعة لزيادة المبيعات عبر الإنترنت وهي عرض المنتجات ذات الصلة على صفحة المنتج الخاصة بك باستخدام أداة WooCommerce للإضافات الخاصة بمنتج المنتجات ذات الصلة. باستخدام عنصر واجهة المستخدم ShopReady Related Products ، يمكنك إنشاء كتلة شريط تمرير منتج مذهلة في أقسام.
لاستخدام الأداة ، تحتاج فقط إلى سحب الأداة وإفلاتها ضمن كتلة منتج واحد وتحديد كل منتج على حدة ترغب في عرضه ضمن صفحة المنتج الفردية الخاصة بك.
ختاماً
نأمل أن يساعدك هذا الدليل الإعلامي في الحصول على فهم أوسع لتخصيص قالب صفحة منتج WooCommerce وكيف يمكنك الاستفادة من هذه الأدوات المذهلة لإضفاء الحيوية على موقع التجارة الإلكترونية الخاص بك بوظائف أفضل.
مع تفاصيل منتج WooCommerce المنبثقة إلى جدول مقارنة المنتج ، كل ما يتطلبه سوق التجارة الإلكترونية ، يمكن لـ ShopReady تقديمه. إذا كانت لديك أي أسئلة بخصوص هذا الموضوع ، فلا تتردد في التواصل معنا في قسم التعليقات أدناه.