كيفية إنشاء تجارة إلكترونية باستخدام Avada WooCommerce builder

عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. من السهل جدًا إنشاء متجر عبر الإنترنت والبدء في بيع منتجاتك بمجرد الانتهاء. توفر Avada دعمًا شاملاً وتكاملًا في التصميم لـ WooCommerce، مما يسمح لك بإنشاء متجر أحلامك مع ضمان ظهوره تمامًا في الإطار الذي تفكر فيه.  

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

  • تمتلك WooCommerce لوحة خيارات Avada Global الخاصة بها، وهي منفصلة عن لوحة خيارات Avada Global الرئيسية.
  • تتوفر خيارات صفحة Avada لكل منتج.
  • يتيح لك Avada Builder إنشاء تصميمات لصفحات المنتج عن طريق سحب العناصر وإسقاطها.

لبناء موقع التجارة الإلكترونية الخاص بك مع Avada. 

أولاً، يجب علينا تثبيت wooCommerce في Avada.

تثبيت WooCommerce – تعليمات خطوة بخطوة

انتقل إلى Avada > Plugin / Add-ons وابحث عن plugin ، كما هو موضح في لقطة الشاشة أدناه.

الخطوة 1 plugin WooCommerce .

الخطوة 2 - حدد "تثبيت" من القائمة المنسدلة.

سيتم تثبيت plugin وتفعيله تلقائيا.

الخطوة 3 – بعد ذلك، يجب أن يتم عرض معالج إعداد WooCommerce. إذا كنت تستورد أحد عروض Woo التجريبية، مثل Modern Shop أو Classic Shop، فيمكنك تخطي هذه الخطوة دون التعرض لخطر فقدان بياناتك. للتخطي للأمام، حدد "ليس الآن" من القائمة المنسدلة. إذا لم تكن تستورد أحد عروض Woo التجريبية، فانتقل إلى الخطوة التالية بالنقر فوق "Let's Go!" زر لبدء عملية الإعداد.

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

كيفية تعيين صفحة متجر لموقع الويب الخاص بك

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

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

يمكنك تعيين صفحة المتجر يدويًا بالانتقال إلى علامة تبويب المنتجات في إعدادات WooCommerce - WooCommerce > الإعدادات > المنتجات - وتحديد الصفحة التي ستكون صفحة المتجر الرئيسية من القائمة المنسدلة. ستعرض WooCommerce بعد ذلك منتجاتك على هذه الصفحة نتيجة لإجراءك.

يمكن تكوين الصفحات المتبقية في علامة التبويب "خيارات متقدمة"، الموجودة في WooCommerce > الإعدادات > خيارات متقدمة .

إنشاء منتجاتك

الخطوة 1 - في الشريط الجانبي لإدارة WordPress، انتقل إلى علامة التبويب "المنتجات" > "إضافة منتج".

الخطوة 2 – في الجزء العلوي من الصفحة، أدخل اسم المنتج الخاص بك.

الخطوة 3 – املأ حقل محتوى المنشور بالنص من وصف المنتج. سيتم عرض جميع معلومات المنتج في هذا القسم.

الخطوة 4 - املأ مربع " بيانات المنتج " بجميع معلومات المنتج. على سبيل المثال amp السعر وSKU والشحن كلها خيارات ممكنة.

الخطوة 5 - في مربع " الوصف المختصر للمنتج "، اكتب وصفًا موجزًا ​​لمنتجك الذي سيظهر بجانب صورك الرئيسية.

الخطوة 6 – يجب وضع الصورة المميزة الرئيسية ضمن مربع " صورة المنتج " على الجانب الأيمن من الصفحة؛ يجب إكمال هذا لكل منتج.

الخطوة 7 – أضف المزيد من الصور إلى مربع " معرض المنتجات " إذا كنت تريد استخدام معرض الصور بدلاً من صورة واحدة.

الخطوة 8 - في مربع " فئات المنتجات "، أدخل الفئات التي تنطبق على منتجاتك. بعد ذلك، املأ الفراغات بالعلامات المناسبة لمنتجك في مربع " علامات المنتج ".

الخطوة 9 - بمجرد إدخال جميع المعلومات الضرورية، انقر فوق الزر " نشر "، وسيظهر العنصر على صفحة واجهة المتجر الرئيسية.

إنشاء تأثير تكبير المنتج

إذا كنت تستخدم Avada Layouts، فستحتاج إلى التأكد من تمكين خيار تكبير صور منتج WooCommerce في Avada > الخيارات > WooCommerce > خيار تكبير صور منتج WooCommerce العام > أو في علامة التبويب عنصر صور منتج Woo عام > قم بتكبير صور المنتج إذا كنت تستخدم تخطيطات WooCommerce.

عرض صور منتج WooCommerce - يجب أن يكون عرض الصورة الرئيسية (انظر الإعداد أدناه) والحجم الفعلي للصورة التي تم تحميلها أكبر من Avada > Options > WooCommerce > General WooCommerce > WooCommerce Product Images Width أو إعداد الحد الأقصى لعرض صور المنتج في عنصر صور منتج Woo. سيتم تحديد عرض عمود الحاوية لمعرض منتج واحد من خلال الإعدادات التي تختارها. بمجرد إجراء التعديلات اللازمة، ستكون جاهزًا لتعيين عرض صورة WooCommerce الرئيسية الخاصة بك.

عرض الصورة الرئيسية لـ WordPress - يمكن العثور على إعداد عرض الصورة الرئيسية لـ WooCommerce في أداة التخصيص بموقع WordPress الخاص بك. من لوحة تحكم WordPress، انتقل إلى المظهر > التخصيص > WooCommerce > صور المنتج ، حيث ستجد إعداد عرض الصورة الرئيسية؛ سيحدد هذا الحجم الفعلي للصورة المعروضة في المعرض.

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

تأكد من إعادة إنشاء الصور المصغرة الخاصة بك بعد تغيير أحجام صور WooCommerce؛ سيؤدي هذا إلى تطبيق أحجام صورك الجديدة على أي صور تم تحميلها بالفعل على موقع الويب الخاص بك. يمكنك استخدام plugin Regenerate Thumbnails لإنجاز هذا.

ضبط إعدادات حجم صورة المنتج في WooCommerce.

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

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

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

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

الخطوة 1 - في الشريط الجانبي للمشرف، انتقل إلى علامة التبويب " المظهر " ثم علامة التبويب " تخصيص " لبدء تخصيص موقعك.

الخطوة 2 - انتقل إلى علامة التبويب " WooCommerce " في أعلى الصفحة.

الخطوة 3 - يمكن العثور على إعداد الصور لصور المنتج الفردية ضمن علامة التبويب " صور المنتج " في نافذة التكوين.

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

الخطوة 5 – لإعادة إنشاء الصور المصغرة بعد تغيير أحجام الصور وحفظها، ستحتاج إلى استخدام plugin ، والذي يمكن العثور عليه في Plugin . plugin Regenerate Thumbnails ، ثم انتقل إلى WP Admin > Tools ، حيث يمكنك اختيار إعادة إنشاء الصور المصغرة لصورك، وإنشاء أحجام الصور الجديدة.

هانسون ف.

المشاركات الاخيرة

كيفية استخدام الرؤوس والتذييلات مع Elementor

تعد رؤوس وتذييلات موقع الويب عناصر أساسية. في معظم الحالات، يوفر الرأس إمكانية التنقل...

6 يناير 2022

مقارنة سمات WordPress: Astra vs OceanWP

اثنان من سمات WordPress الأكثر شيوعًا في السوق هما Astra وOceanWP. احترافي…

2 يناير 2022

مقارنة موضوع أخبار WordPress: الصحيفة مقابل الأخبار أسترا

إن إنشاء موقع إخباري ممتاز لا يتطلب منك أن تصبح مصمم ويب. نحن…

25 أكتوبر 2021

أنشئ موقعًا إلكترونيًا متعلقًا بالأخبار باستخدام موضوع الصحيفة

يعد موضوع Newspaper واحدًا من أهم سمات WordPress التي صممها tagDiv، وهو…

18 أكتوبر 2021

كيفية استخدام تأثيرات الرأس والتمرير اللاصقة مع Elementor

عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك،...

21 سبتمبر 2021

كيفية استخدام Avada Header، Footer، ومنشئ تخطيط الأعمدة

أداة إنشاء الصفحات الخاصة بنا، Avada Builder، متاحة الآن في واجهتين: Avada...

16 سبتمبر 2021