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

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

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

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

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

هيا بنا نبدأ.

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

إنشاء قالب Elementor

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

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

صورة المنتج أو معرض عنصر البناء

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

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

محدد .onsale {\ sbackground-color: # cc3366؛ \س}

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

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

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

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

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

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

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

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

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

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

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

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

.woocommerce #review form #reply .form-submit input {background-color: # cc3366؛ اللون: #fff ؛ نصف قطر الحدود: 0 بكسل ؛ }

Elementor ص وصف موجز roduct

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

يرجى البحث عن وحدة WooCommerce Short Description ، ثم اسحبها وأفلتها أسفل سعر المنتج وفوق وحدة Add To Cart Module.

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

Elementor وWooCommerce ص roduct upsells

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

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

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

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

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

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

الاستنتاج - منشئ صفحة العنصر p roduct

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

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

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