يجب عليك تعديل صفحة المنتج الخاص بك لتمييز متجر التجارة الإلكترونية الخاص بك عن المنافسين وتزويد عملائك بتجربة فريدة من نوعها. علاوة على ذلك، يعد خيار تخصيص صفحة منتجك بشكل جمالي أمرًا بالغ الأهمية للحفاظ على تصميم مرئي متسق في جميع أنحاء متجرك عبر الإنترنت.
Elementor هو أحد منشئي مواقع WordPress الرائدين في السوق، ولكن هل تعلم أيضًا أنه يمكنك إنشاء متاجر WooCommerce باستخدامه؟
تسمح لك العديد من وحدات Elementor WooCommerce المضمنة بإدراج محتوى WooCommerce أو كتل وظيفية أو تصميمها باستخدام منشئ Elementor. عظيم جدا، أليس كذلك؟
كان تصميم وتخصيص WooCommerce يتطلب PHP وCSS لكل تغيير صغير، ولكن مع تحسن أدوات مثل Elementor وأصبحت أكثر تعقيدًا، أصبح المزيد والمزيد من الخيارات متاحة للتحكم في الطريقة التي يبدو بها متجرك ويعمل.
هيا بنا نبدأ.
الخطوة الأولى في الإجراء هي إنشاء قالب Elementor جديد من خلال الانتقال إلى القوالب في لوحة تحكم WordPress. انقر فوق "إنشاء جديد" ثم اختر منتجًا واحدًا باعتباره القالب الذي ترغب في إنشائه.
بينما نقوم بتطوير هذا القالب من الصفر، ليست هناك حاجة لوضع أي كتل؛ اخرج من المربع التالي حتى تصل إلى شاشة Elementor Builder المعتادة لصفحة جديدة.
يحتوي كل منتج من منتجات WooCommerce على صورة منتج أو معرض صور يعرض صور المنتج للعملاء. يوفر Elementor وحدة صور المنتج المضمنة التي تسمح لنا بإدراجها في القالب الخاص بنا.
قم بإنشاء صف بسيط من عمودين وأدخل وحدة صور المنتج في العمود الأيسر؛ يبدو هذا عمليًا ويؤدي المهمة، ولكن دعنا نخصص شارة المبيعات لتتناسب مع سمة Elementor Hello المستخدمة في هذه المقالة. للقيام بذلك، نحتاج إلى تطبيق سطر صغير من CSS المخصص، والذي يمكن تقديمه عن طريق التوجه إلى Advanced > Custom CSS ولصق الكود أدناه.
محدد .onsale { \sbackground-color: #cc3366 ; \س}
سنضيف وحدات Elementor لعنوان المنتج وسعر المنتج والإضافة إلى سلة التسوق في العمود الأيمن.
ابحث عن هذه الوحدات الثلاث في منشئ Elementor، ثم اسحبها وأسقطها لترتيبها بالتسلسل المذكور أعلاه؛ هذا يعمل بكامل طاقته، ولكننا نريد تخصيصه ليتناسب مع التصميم مثل القسم أعلاه لموضوع Hello Elementor. يعد تصميم الوحدات النمطية باستخدام Elementor أمرًا سهلاً، كل ما عليك فعله هو النقر على الوحدة، ويجب على المحرر فتح خيارات التصميم على اليسار.
محتوى هذه الوحدات ممتاز. وبالتالي، سنعمل ضمن علامة التبويب "النمط" أولاً، دعنا نقوم بتحديث خط ولون عنوان المنتج ليتوافق مع تلك المستخدمة في سمة Hello Elementor.
نحتاج بعد ذلك إلى القيام بنفس الشيء بالنسبة لوحدات سعر المنتج والإضافة إلى السلة من خلال النقر على كل وحدة وتعديل لون النص. بالنسبة لسعر المنتج، سأستخدم اللون الرمادي الداكن للتباين مع العنوان الرئيسي، لذا اكتب هذا الرمز السداسي إذا كنت تتابع – #54595f
بعد ذلك، في وحدة "إضافة إلى سلة التسوق"، سنقوم بتحديث بعض الأشياء. لون خلفية الزر ونصف قطر حدود الزر باستخدام الإعدادات التالية:
لقد قمت بتغيير نصف قطر حدود محدد المبلغ إلى 0، وهو ما يمكنك القيام به ضمن علامة التبويب "النمط" الخاصة بالكمية.
يجب أن يعرض كل منتج بعض المعلومات الأساسية مثل وصف المنتج ومراجعاته إذا كانت متوفرة؛ يتم التعامل مع هذا عادةً من خلال علامات تبويب المنتج.
الرجاء إنشاء صف جديد أسفل القسم العلوي وسحب وحدة علامات تبويب بيانات المنتج من منشئ Elementor إلى الصف لإدراجه. ليس هناك الكثير من التصميم المطلوب هنا لأنه يرث بعض الأنماط من سمة Hello Elementor. ومع ذلك، دعونا نعدل نمط زر إرسال المراجعة.
للقيام بذلك، سنحتاج إلى القليل من CSS المخصص مرة أخرى. ابدأ في تحرير علامات تبويب بيانات المنتج، ثم انقر فوق علامة التبويب "خيارات متقدمة" وانتقل لأسفل إلى Custom CSS. أدخل ملف CSS أدناه، ويمكنك تعديل الألوان وفقًا لتصميمك.
.woocommerce #مراجعة النموذج #reply .form-submit input { لون الخلفية: #cc3366؛ اللون: #ففف؛ نصف قطر الحدود: 0px؛ }
حسنًا، لدينا تصميم لائق وبسيط المظهر حتى الآن، ولكنه يبدو متناثرًا بعض الشيء. يمكن أن تساعد إضافة وحدة الوصف المختصر للمنتج إلى الجزء العلوي في توضيح ذلك وإضافة المزيد من السياق.
برجاء البحث عن وحدة الوصف المختصر لـ WooCommerce، ثم قم بسحبها وإسقاطها أسفل سعر المنتج وفوق وحدة الإضافة إلى سلة التسوق.
لا يوجد تصميم مطلوب هنا حتى الآن لأنه ورث الأنماط من Hello Elementor.
تعد زيادة متوسط قيمة السلة أمرًا بالغ الأهمية لكل موقع من مواقع WooCommerce، ولهذا السبب من الجيد أن يتضمن Elementor وحدة Product Upsells لتتمكن من دمج التخصيص في متجرك بسهولة.
يرجى البحث عن وحدة Upsells للمنتج في منشئ Elementor وإدراجها في صف جديد خلف علامات تبويب بيانات المنتج.
كما ترون، يتطلب هذا القليل من التعديل لاستكمال بقية أسلوبنا. ابدأ بتعديل الوحدة وقم بإجراء التغييرات التالية:
سيبدو المنتج النهائي كما هو موضح أعلاه. يمكنك ضبط الكود السداسي للون حسب ما تراه مناسبًا إذا كنت تستخدم هذا الدليل كنقطة انطلاق للقالب الخاص بك.
بمجرد الانتهاء من ذلك، يمكنك نشر القالب الخاص بك. في النافذة التالية، سترى السؤال "أين تريد عرض القالب الخاص بك؟". انقر فوق "إضافة شرط" لتحديد متى يجب استخدام هذا القالب. يمكنك تحديد "جميع المنتجات" لاستخدام القالب في جميع صفحات منتجك. يمكنك أيضًا اختيار استخدام هذا القالب فقط للمنتجات التي تندرج ضمن فئة معينة أو التي لها علامة معينة مرتبطة بها.
قد يواجه بعض المستخدمين صعوبات في عرض إعدادات التصميم المخصصة الخاصة بهم، مثل لون الخط والطباعة، عند استخدام Elementor. قد يتأثر مظهر متجر WooCommerce الخاص بك إذا كنت تستخدم قالب WordPress الذي يمكنه التحكم في مظهر متجرك. إذا واجهت هذه المشكلة، فضع في اعتبارك أن مقالتك قد تتجاوز إعدادات صفحتك المخصصة في بعض الحالات.
يمكنك أيضًا اختيار صفحة فارغة وإنشاء صفحة من الألف إلى الياء باستخدام أدوات المنتج للحصول على مظهر مخصص بالكامل. استخدم صفحة فارغة، وأغلق النافذة المنبثقة لمكتبة النماذج عند ظهورها وابدأ في البناء على الصفحة التي تم إنشاؤها حديثًا. يعد الزر المخصص "أضف إلى سلة التسوق" و"سعر المنتج" و"صورة المنتج" و"عنوان المنتج ووصفه" مجرد عدد قليل من أدوات WooCommerce التي يمكنك استخدامها لتخصيص صفحة منتجك. يمكنك الاطلاع على جميع الأدوات المختلفة المتوفرة حاليًا من خلال زيارة هذه الصفحة. إذا كنت تفضل ذلك، يمكنك ترتيب الأدوات أينما تريد في تخطيط الصفحة وتخصيص أنماطها لتتناسب مع المظهر المطلوب.
يجب عليك تعديل صفحة منتجك لتمييز متجر التجارة الإلكترونية الخاص بك عن المنافسين وتزويد عملائك بتجربة فريدة من نوعها. علاوة على ذلك، يعد خيار تخصيص صفحة منتجك بشكل جمالي أمرًا بالغ الأهمية للحفاظ على تصميم مرئي متسق في جميع أنحاء متجرك عبر الإنترنت. Elementor هي أداة رائعة لتخصيص صفحات متجر WooCommerce الخاص بك، وهي موصى بها بشدة. بالإضافة إلى كونه سهل الاستخدام، يتضمن منشئ الصفحات جميع عناصر واجهة المستخدم وخيارات التصميم الضرورية لمساعدتك في إنشاء صفحات منتج مخصصة. نأمل أن تجد هذا البرنامج التعليمي مفيدًا وتزويدك بالمعلومات التي تحتاجها لتخصيص منتج WooCommerce وصفحات أرشيف المنتج باستخدام Elementor. هل استخدمت Elementor لإنشاء صفحات WooCommerce في الماضي؟ انكم مدعوون لمشاركة أفكارك في قسم التعليقات. سنكون سعداء لإلقاء نظرة.
تعد رؤوس وتذييلات موقع الويب عناصر أساسية. في معظم الحالات، يوفر الرأس إمكانية التنقل...
اثنان من سمات WordPress الأكثر شيوعًا في السوق هما Astra وOceanWP. احترافي…
إن إنشاء موقع إخباري ممتاز لا يتطلب منك أن تصبح مصمم ويب. نحن…
يعد موضوع Newspaper واحدًا من أهم سمات WordPress التي صممها tagDiv، وهو…
عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. هو - هي…
عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك،...
تعليقات عرض
هل تريد تخصيص الصفحة، هل تريد ربط منتج التجارة؟
مرحبًا، يتم هذا الإعداد عندما تقوم بحفظ تصميم صفحتك لأول مرة أو باستخدام السهم الصغير أعلى زر حفظ Elementor