قم ببناء وتصميم صفحة منتج WooCommerce مذهلة باستخدام Elementor

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

Elementor هو أحد منشئي مواقع WordPress الرائدين في السوق، ولكن هل تعلم أيضًا أنه يمكنك إنشاء متاجر WooCommerce باستخدامه؟

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

كان تصميم وتخصيص WooCommerce يتطلب PHP وCSS لكل تغيير صغير، ولكن مع تحسن أدوات مثل Elementor وأصبحت أكثر تعقيدًا، أصبح المزيد والمزيد من الخيارات متاحة للتحكم في الطريقة التي يبدو بها متجرك ويعمل.

دعونا نبدأ.

• إنشاء قالب Elementor
• صورة أو معرض منتج Elementor
• عنوان منتج WooCommerce وسعره وإضافته إلى سلة التسوق
• إعداد علامات تبويب منتج Elementor
• وصف موجز لمنتج Elementor
• زيادة مبيعات منتجات Elementor وWooCommerce
• الخلاصة - منشئ صفحات منتج Elementor

إنشاء قالب Elementor

الخطوة الأولى في الإجراء هي إنشاء قالب Elementor جديد من خلال الانتقال إلى القوالب في لوحة تحكم WordPress. انقر فوق "إنشاء جديد" ثم اختر منتجًا واحدًا باعتباره القالب الذي ترغب في إنشائه.

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

صورة أو معرض منتج Elementor

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

قم بإنشاء صف بسيط من عمودين وأدخل وحدة صور المنتج في العمود الأيسر؛ يبدو هذا عمليًا ويؤدي المهمة، ولكن دعنا نخصص شارة المبيعات لتتناسب مع سمة Elementor Hello المستخدمة في هذه المقالة. للقيام بذلك، نحتاج إلى تطبيق سطر صغير من CSS المخصص، والذي يمكن تقديمه عن طريق التوجه إلى Advanced > Custom CSS ولصق الكود أدناه.

محدد .onsale { \sbackground-color: #cc3366 ; \s}

WooCommerce عنوان المنتج وسعره وإضافته إلى سلة التسوق

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

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

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

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

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

• اضبط المحتوى على "إضافة إلى سلة التسوق".
• اضبط لون الخلفية على "#cc3366"
• اضبط نصف قطر الحدود على 0

لقد قمت بتغيير نصف قطر حدود محدد المبلغ إلى 0، وهو ما يمكنك القيام به ضمن علامة التبويب "النمط" الخاصة بالكمية.

إعداد علامات تبويب منتج Elementor

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

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

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

.woocommerce #مراجعة النموذج #reply .form-submit input { لون الخلفية: #cc3366؛ اللون: #ففف؛ نصف قطر الحدود: 0px؛ }

وصف موجز للمنتج Elementor p

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

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

لا يوجد تصميم مطلوب هنا حتى الآن لأنه ورث الأنماط من Hello Elementor.

ترويج منتجات Elementor وWooCommerce

تعد زيادة متوسط ​​قيمة السلة أمرًا بالغ الأهمية لكل موقع من مواقع WooCommerce، ولهذا السبب من الجيد أن يتضمن Elementor وحدة Product Upsells لتتمكن من دمج التخصيص في متجرك بسهولة.

يرجى البحث عن وحدة Upsells للمنتج في منشئ Elementor وإدراجها في صف جديد خلف علامات تبويب بيانات المنتج.

كما ترون، يتطلب هذا القليل من التعديل لاستكمال بقية أسلوبنا. ابدأ بتعديل الوحدة وقم بإجراء التغييرات التالية:

• اضبط لون العنوان على – #cc3366
• اضبط لون العنوان على – #cc3366
• اضبط لون السعر على – #54595f
• اضبط لون خلفية الزر على – #cc3366
• اضبط لون الزر على - #fff
• قم بتعيين نصف قطر حدود الزر t0 – 0

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

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

الخلاصة - منشئ صفحات المنتج

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

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

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