كيفية بناء متجر باستخدام WooCommerce Builder لـ Elementor

أنت تبحث عن مُنشئ WooCommerce لـ Elementor بحيث يمكنك إنشاء متجرك وتخصيصه باستخدام أداة إنشاء مرئية قوية من Elementor.

باستخدام ShopReady ، يمكنك إنشاء وتخصيص متجر WooCommerce بالكامل باستخدام Elementor - حتى إذا كنت تستخدم الإصدار المجاني من Elementor!

إذا كنت ترغب في معرفة المزيد عن ShopReady ، يمكنك التحقق من مراجعة ShopReady الكاملة.

على الرغم من ذلك ، في هذه المقالة ، نركز بشكل أكبر على كيفية استخدام ShopReady كمنشئ WooCommerce لـ Elementor.

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

ستتمكن من إنشاء متجر يشبه هذا:

وستكون قادرًا على تخصيص كل شيء باستخدام Elementor ، بما في ذلك منتجك وعربة التسوق وصفحات الخروج ( بالإضافة إلى الكثير ):

كيفية استخدام ShopReady كمنشئ WooCommerce لـ Elementor

بدون مزيد من اللغط ، دعنا ننتقل مباشرة إلى البرنامج التعليمي خطوة بخطوة.

مرة أخرى ، إذا كنت تريد معرفة المزيد حول الميزات العديدة في ShopReady قبل القفز إلى البرنامج التعليمي ، يمكنك قراءة مراجعة ShopReady الكاملة.

وكلما اخترت تجربته ، يمكنك الحصول على خصم 30٪ باستخدام رمز القسيمة الحصري WPMayor30 عند الخروج.

1. قم بإنشاء متجر WooCommerce الأساسي الخاص بك وقم بتثبيت Elementor

إذا لم تكن قد قمت بذلك بالفعل ، فإن خطوتك الأولى هي إعداد متجر WooCommerce الأساسي.

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

إذا كنت بحاجة إلى بعض المساعدة هنا ، فيمكنك الاطلاع على دليلنا لإعداد متجر WooCommerce.

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

بمجرد القيام بذلك ، سترغب أيضًا في تثبيت المكون الإضافي Elementor.

مع ShopReady ، يمكنك استخدام الإصدار المجاني فقط من Elementor.

أو ، إذا كان لديك بالفعل Elementor Pro ، فيمكنك أيضًا تثبيت ذلك - يعمل ShopReady بشكل جيد مع كلا الإصدارين.

2. تثبيت ShopReady وتمكين كل شيء

بمجرد إعداد متجر WooCommerce الأساسي وتثبيت Elementor ، فأنت جاهز لتثبيت ShopReady WooCommerce builder لـ Elementor.

هناك إصدار مجاني من ShopReady متاح على WordPress.org ، بالإضافة إلى إصدار متميز يضيف المزيد من الميزات بدءًا من 75 دولارًا.

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

بمجرد تنشيط المكون الإضافي ، ستحصل على قائمة ShopReady جديدة في لوحة معلومات WordPress الخاصة بك.

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

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

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

من المهم بشكل خاص تمكين وحدة Demo Importer ، حيث سيسمح لك ذلك بالوصول إلى قوالب متجر ShopReady المعدة مسبقًا ( على الرغم من أنه يمكنك دائمًا تخصيص كل شيء من البداية ).

بمجرد تمكين وحدة Demo Importer ، ستطالبك بتثبيت البرنامج المساعد Demo Importer المصاحب ، وهو ما يجب عليك القيام به.

بمجرد القيام بذلك ، انتقل إلى منطقة Unyson الجديدة في لوحة معلومات WordPress الخاصة بك وقم بتمكين ملحق Backup & Demo Content بحيث يمكنك استيراد قوالب ShopReady.

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

3. استيراد قالب ليكون بمثابة قاعدة متجرك

الآن ، يمكنك التوجه إلى Tools → Demo Content Install لتثبيت أحد مواقع ShopReady التجريبية المعدة مسبقًا.

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

بمجرد استيراد العرض التوضيحي ، ستتمكن من تخصيص كل شيء بالكامل باستخدام Elementor.

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

في هذا البرنامج التعليمي ، سنستخدم الإصدار التجريبي 1 :

وبهذه الطريقة ، يجب أن يبدو متجرك تمامًا مثل العرض التوضيحي:

4. تخصيص قوالب متجرك باستخدام Elementor

الآن ، أنت جاهز لبدء استخدام WooCommerce builder لـ Elementor لتخصيص محتوى متجرك.

للوصول إلى جميع القوالب المختلفة لمتجرك ، انتقل إلى منطقة ShopReady في لوحة معلومات WordPress الخاصة بك ، ثم حدد علامة التبويب القوالب .

هنا ، سترى قائمة بجميع القوالب المختلفة المرتبطة بمتجرك. فيما يلي بعض أهم القوالب التي يجب وضعها في الاعتبار:

• المنتج - نموذج لصفحة منتج واحد.
• متجر - نموذج لصفحة المتجر الرئيسية.
• أرشيف المتجر - نموذج للصفحة التي تسرد جميع منتجاتك.
• عربة التسوق / عربة التسوق الفارغة - قوالب المراحل المختلفة لعربة التسوق الخاصة بك.
• الخروج - قالب لصفحة الخروج الخاصة بك.
• حسابي - نموذج لصفحة حساب الواجهة الأمامية للمتسوق.

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

لتحرير أي قالب وتشغيل Elementor ، ما عليك سوى تحديد القالب ذي الصلة ثم النقر فوق رمز Pencil .

يمكنك أيضًا إنشاء قوالب جديدة واستخدام قوالب متعددة في أجزاء مختلفة من متجرك:

ShopReady سيطلق الآن واجهة Elementor.

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

الاختلاف الرئيسي هو أن ShopReady سيمنحك أيضًا الكثير من الأدوات المصغّرة العامة وأدوات WooCommerce المخصصة التي يمكنك استخدامها في تصميماتك. يمكنك العثور عليها في مناطق Shop Ready المختلفة في واجهة Elementor:

سيكون لكل عنصر واجهة إعداداته الفريدة الخاصة به.

على سبيل المثال ، تتيح لك أداة Thumbnail With Zoom عرض صور المنتج بتخطيطات وإعدادات مختلفة:

عند الانتهاء ، تأكد من حفظ التغييرات.

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

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

5. تخصيص إعدادات الموقع

بالإضافة إلى السماح لك بتخصيص قوالب فردية باستخدام Elementor ، يضيف ShopReady أيضًا بعض الخيارات إلى قائمة Elementor Site Settings. يمكنك الوصول إلى إعدادات موقع Elementor بالنقر فوق رمز الهامبرغر في الزاوية العلوية اليسرى من واجهة Elementor وتحديد إعدادات الموقع .

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

في البداية ، يتم تقسيم الإعدادات إلى منطقتين - ShopReady و ShopReady General & PopUp.

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

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

يمكنك أيضًا التحكم في رأس الصفحة وتذييلها بالانتقال إلى ShopReady → Header Footer في لوحة معلومات WordPress الخاصة بك.

ابدأ في استخدام WooCommerce Builder لـ Elementor اليوم

يحب المستخدمون Elementor نظرًا لواجهة الإنشاء المرئية القوية بالسحب والإفلات.

باستخدام ShopReady ، يمكنك تسخير قوة هذا المنشئ لتصميم متجر WooCommerce وتخصيصه بالكامل ، حتى إذا كنت تستخدم الإصدار المجاني من Elementor فقط.

إذا كنت مستعدًا للبدء ، فاستخدم الزر أدناه لتنزيل ShopReady ثم اتبع هذا البرنامج التعليمي لإنشاء متجر WooCommerce الخاص بك.

المكافأة: احصل على خصم 30٪ على ShopReady باستخدام رمز القسيمة الحصري WPMayor30 عند الخروج!