العنصر: كيفية إنشاء صفحة مخصصة لـ WooCommerce

هل ترغب في معرفة كيفية إنشاء صفحة متجر مخصصة؟ WooCommerce مع Elementor؟

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

انظر أيضا: كيفية تثبيت Elementor على WordPress

في وقت كتابة هذه المقالة ، يمكنك إنشاء صفحات مخصصة لصفحة المتجر وصفحة المنتج وصفحات أرشيف المنتج (العلامات والفئات). قريبًا ستتمكن أيضًا من إنشاء صفحات مخصصة لصفحة الخروج وصفحة عربة التسوق.

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

تعد صفحة المتجر نفسها إحدى الصفحات الافتراضية في WooCommerce. هذه الصفحة بمثابة واجهة لعرض منتجاتك. يمكنك الوصول إلى هذه الصفحة بالذهاب إلى yoursite.com/store. بشكل افتراضي ، تعرض صفحة متجر WooCommerce منتجات WooCommerce فقط.

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

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

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

في هذا المثال ، نستخدم الأخير.

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

اقرأ أيضا: كيفية استيراد أو تصدير النماذج في Elementor

يرجى ملاحظة أنه لا يمكنك العثور على أداة المنتجات إلا عند تثبيت المكون الإضافي WooCommerce وتنشيطه.

لبدء إنشاء صفحة متجر WooCommerce مخصصة باستخدام Elementor Pro ، انتقل إلى أولا à القوالب -> مُنشئ القوالب على لوحة تحكم WordPress الخاصة بك. انقر فوق علامة التبويب المنتجات أرشيف في صفحة Theme Builder ، ثم انقر فوق الزر ajouter أرشيف المنتجات.

قم بتسمية النموذج الخاص بك وانقر فوق الزر إنشاء نموذج.

هناك ثلاثة قوالب مخصصة لصفحة المتجر يمكنك الاختيار من بينها في حالة رغبتك في إنشاء صفحة متجر مخصصة من قالب. إذا كنت ترغب في إنشاء صفحة متجر مخصصة من البداية ، يمكنك فقط إغلاق مكتبة القوالب.

انظر أيضا: كيفية استخدام Color Sampler في Elementor

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

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

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

• الاستعلام الحالي - الاستعلام الحالي
• أحدث المنتجات - أحدث المنتجات
• بيع - بيع
• مميز - مميز
• التحديد اليدوي - التحديد اليدوي

يمكنك أيضًا تعيين الترتيب الذي يتم عرض المنتجات به أو استبعاد بعض المنتجات

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

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

اقرأ أيضا: كيفية استخدام منتقي الألوان في Elementor

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

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

لقد نجحت حتى الآن في إنشاء صفحة متجر WooCommerce المخصصة باستخدام Elementor Pro. يمكنك الذهاب في your site.com/store للتحقق من النتيجة.

تخصيص عنصر واجهة المنتجات

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

• المنتجات

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

• صندوق

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

• ترقيم الصفحات

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

يمكنك أيضًا تحديد معلمات مختلفة في كل حالة (عادي ، مؤشر ونشط).

• وميض قذر

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

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

في النهاية

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

اقرأ أيضا: كيفية إضافة فاصل لإنشاء قسم في Elementor

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

احصل على Elementor Pro الآن!

وفي الختام

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

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

ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.

...