كيفية إنشاء صفحات منتجات WooCommerce مخصصة باستخدام Elementor

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

ومع ذلك ، فإنه يوفر تصميمات مسبقة ، ولكن إذا كنت ترغب في إنشاء منشئ السحب والإفلات الخاص بـ Elementor ، فإن كل عملية تجعل كل عملية سهلة للغاية. لذلك هو وضع الفوز.

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

أثناء تصميم الموقع ، يمكنك إنشاء صفحات مخصصة لـ WooCommerce.

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

ما هي الأدوات التي نحتاجها لإنشاء صفحات منتجات WooCommerce مخصصة

في هذه المدونة ، سنحتاج إلى المكون الإضافي Elementor. بالإضافة إلى ذلك ، سنحتاج أيضًا إلى Elemento addons.

يجعل Elementor عملية بناء الصفحات سهلة ويساعد Elemento Addon على توسيع قوة Elementor عن طريق إضافة عناصر واجهة مستخدم ووظائف إضافية إلى العناصر المستخدمة.

لدى Elemento Addons بعض الأدوات المصغرة التي تشعر بأنها غير قانونية للاستخدام بسبب تشغيلها وسلعها.

لذلك دعونا نبدأ الآن ،

كيفية إنشاء صفحات منتجات WooCommerce مخصصة باستخدام Elementor

أولاً ، دعنا نثبت كلا المكونات الإضافية.

تثبيت المكون الإضافي Elementor

الخطوة 1) افتح لوحة القيادة الخاصة بك

تسجيل الدخول إلى لوحة معلومات WordPress الخاصة بك.

الخطوة 2) انتقل إلى الإضافات وانقر فوق إضافة مكون إضافي جديد

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

الخطوة 3) انتقل إلى شريط البحث وابحث عن Elementor

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

الخطوة 4) تثبيت وتفعيل العنصر

بعد البحث عن Elementor ، سيظهر في قائمة البرنامج المساعد. انقر فوق الزر "تثبيت" ، بعد التثبيت ، انقر فوق الزر "تنشيط" لتنشيط المكون الإضافي Elementor.

تحميل البرنامج المساعد Elemento Addons

أولاً ، قم بتنزيل Elemento Addons من ThinkingHunk.

انتقل إلى صفحة Elemento Addons وشراء المكون الإضافي. يمكنك مشاهدة هذا البرنامج التعليمي إذا كنت بحاجة إلى يد عون للحصول على ملحقات Elemento.

الخطوة 1) افتح لوحة القيادة الخاصة بك وانتقل إلى صفحة البرنامج المساعد

كرر نفس الخطوات والوصول إلى صفحة البرنامج المساعد.

الخطوة 2) انقر فوق "تحميل البرنامج المساعد"

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

الخطوة 3) قم بتحميل Elemento Addons

انقر على التثبيت الآن ثم قم بتنشيط البرنامج المساعد.

يتم تثبيت كلا المكونات الإضافية والآن يمكننا المضي قدمًا.

إنشاء صفحة منتج مخصصة WooCommerce

الخطوة 1) إنشاء صفحة جديدة

انتقل إلى لوحة القيادة وانقر على الصفحات ، ثم انقر فوق إضافة صفحة جديدة.

الخطوة 2) انقر فوق "تحرير مع Elementor"

في الشريط العلوي ، ستجد التعديل مع زر Elementor. انقر فوقه.

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

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

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

الآن اضبط صورة المنتج.

تعال الآن إلى الجانب الأيمن. لدخول العنوان ، ابحث عنه وأدخله في الحاوية الثانية.

أدخل اسم المنتج في العنوان.

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

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

حان الوقت الآن لإضافة زر العربة. هذه المرة سوف نستخدم عنصر واجهة عنصر Cart of Elemento Addons لأنه يحتوي على المزيد من الميزات والوظائف.

ابحث عن إضافة إلى عربة وأدخلها في الحاوية.

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

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

أحد الأجزاء المهمة في صفحة المنتج هو وجود أزرار مشاركة اجتماعية. يمكنك إضافة زر المشاركة الاجتماعية إلى هذه الصفحة أيضًا.

ابحث عن الرموز الاجتماعية ووضعها على الصفحة.

إذا كنت ترغب في إضافة المزيد من أزرار المقابض الاجتماعية ، فانقر فوق إضافة جديد وأضف الزر الجديد. يمكنك إجراء عدة تغييرات مثل تغيير الرمز وتحرير الرابط واللون.

بنفس الطريقة ، يمكنك إضافة الشيء الآخر هنا.

إذا كنت ترغب في إعطاء وصف رئيسي أيضًا ، فأضف محرر النص واكتب الوصف.

أضفت الوصف الرئيسي خارج الحاوية التي تبدو منظمة ومنهجية.

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

لذلك ، لإضافة المنتج ذي الصلة أولاً ، أضف عنوانًا وابحث عن منزلق المنتج في Elemento Addons.

هذه هي الطريقة التي يمكنك بها إضافة صفحة منتج WooCommerce المخصصة. حان الوقت الآن لرؤية معاينة الصفحة.

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

دعونا نرى كيف يتم ذلك.

استخدم صفحة المنتج المخصصة ذات الصلة

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

قم بالتمرير لأسفل واحصل على Elemento Addons .

ابحث عن المنتجات المتقدمة السمة ، وسحب القطعة ، وانزل على الصفحة.

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

ولكن إذا كنت ترغب في تغيير مظهر الموقع ، فانقر فوق النمط إلى جانب المحتوى.

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

بعد إجراء جميع التغييرات وإعداد الصفحة ، انقر فوق النشر.

الآن معاينة موقعك.

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

يتم عرض المنتجات على الصفحة. دعنا نعيش صفحة المنتج الواحد.

هذا كل شيء ، تم تصميم صفحة منتج WooCommerce المخصصة.

التعليمات

خاتمة

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

يحتوي Elemento Addons على العديد من الإضافات لبناء موقع الويب. إنه ليس معروفًا فقط بالعملاء ولكن أيضًا لميزات الأدوات.

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

آمل أن تساعدك هذه المدونة. ومع ذلك ، إذا كان لديك أي استفسارات أو اقتراحات ، فأخبرني في قسم التعليقات.
يمكنك الاشتراك في قناة YouTube الخاصة بنا ، ونقوم أيضًا بتحميل محتوى رائع هناك ، كما نتبعنا على Facebook و Twitter .

اكتشف المزيد من المقالات

• كيفية تغيير عنوان URL لتسجيل الدخول إلى WordPress (عنوان URL المخصص) في خطوات سهلة
• كيفية إنشاء صفحة خطأ 404 مخصصة في WordPress (دليل سهل)
• كيفية إضافة شريط بحث مخصص إلى WooCommerce لاكتشاف المنتج الأسهل