3 طرق لتخصيص صفحات متجر ووكوميرس باستخدام محرر الالمنتور

3 طرق لتخصيص صفحات متجر ووكوميرس باستخدام محرر الالمنتور
هنالك ثلاثة طرق يمكنني من خلالها تخصيص متجر ووكوميرس باستخدام الالمنتور . و يمكن ذلك بكل بسرعة و بساطة .
فيما يعتبر الووكوميرس أفضل إضافة في الووردربريس لإنشاء المتاجر  . لكن المشكلة الوحيدة بالرغم من أنها أنها تعطيك السيطرة على غالبية جيدة من إعدادات المتجر ، و تبسط عملية إنشاء المنتج ، فإنها تقيد الكثير من عمليات التخصيص فيما يتعلق بموضوع التصميم .
هناك عدد من الطرق تتم من خلالها عملية التخصيص باستخدام Elementor Pro :
  • الأولى : بإستخدام سمات المنتور
  • الثانية : تخصيص صفحات ووكوميرس معدة مسبقاً باستخدام ويدجات المنتور
  • الثالثة : إنشاء صفحات WooCommerce مخصصة باستخدام باني القوالب
  1. تسوق
  2. المنتج
  3. السلة
  4. الدفع
  5. حسابي
بينما توفر العديد من السمات الأساسية لوكوميرس حلاً بسيطا لهذه المشكلة .و ضمن كل ثيم في المنتور ستجد عروض توضيحية لموقع الويب أو قوالب صفحات , و تقدم خيارات تخطيط متعددة لصفحات التجارة الخاصة بك .
و كالمثال على ذلك ، يأتي MyDecor مع تسعة تخطيطات للمنتج للاختيار من أجل
متجر ووكوميرس
إذا لم تكن بحاجة إلى تخصيص صفحات ووكوميرس أو كنت تريد إهدار مزيداً من الوقت في تخصيصها ، فتلك الطريقة المناسبة لذلك .
بعد أن تقوم بتحميل الثيمات إلى WordPress و إستعراض العرض التوضيحي المفضل، يمكن إستخدام المنتور أو باني الصفحة لتعديل التصميمات و التخطيطات.بالتالي الحصول على أفضل النتائج بإستخدام ويدجات Elementor Pro .
وبالمناسبة، إذا كنت فضوليا بشأن أي من المواضيع المتوافقة مع Elementor هي الأفضل للاستخدام، تحقق من بعض توصياتنا :
متجر ووكوميرس

الطريقة الثانية : تخصيص صفحات متجر ووكوميرس معدة مسبقاً باستخدام ويدجات المنتور

و بشكل تلقائي سيقوم ووكوميرس بتوليد ثلاث صفحات لك بعد تثبيت هذه الإضافة :
  • سلة التسوق
  • طرق الدفع
  • الحساب
إذ أن  غالبية إضافات ووردبريس و سماته تقوم بذات الشيء .
عندما تقوم باستعراض هذه الصفحات ، فسترى كود قصير بدلا من المكان الذي يجب أن يكون فيه المحتوى :
cart
افتح معاينة هذه الصفحة وستجد صفحة سلة أساسية :
تخصيص
إذ لا يوجد خطأ في هذا التصميم .
ومع ذلك، ماذا إذا كنت ترغب في إعادة الهيكلة بإسلوبك الخاص فلا ضير في ذلك ( مثل إضافة شريط جانبي إلى الجانب الأيمن من الصفحة ؟ أو ماذا لو أردت إضافة مقطع يحتوي على عناصر زائدة أو قائمة انتظار أسفل السلة؟ و ما إلى ذلك )
ثم إن الطريقة الوحيدة لتخصيص صفحات الووكوميرس الثلاث هي نزع الكود القصير و تحريره في الالمنتور .
بالتالي يتعين عليك القيام بالعملية التالية و بعدة خطوات :
  • الخطوة 1 : تحديد موقع صفحة الووكوميرس لتحريرها

انتقل إلى “الصفحات” وابحث عن صفحة ووكوميرس التي تم إعدادها مسبقا و التي تريد تحريرها :
ووكوميرس
حدد الصفحة التي تريد تحريرها .و لتكن صفحة الدفع .
  • الخطوة 2 : قم بحذف رمز الاختصار

في محرر الووردبريس حيث يمكنك تحديد كتلة الشفرة القصيرة .ثم يتوجب عليك النقر فوق الزر “خيارات”  ( بشكل ثلاث نقاط عمودية ) .
ثم خيار “إزالة رمز مختصر” لحذف هذا الكود من الصفحة .
حذف الكود متجر ووكوميرس
قم بتحديث الصفحة. ثم انقر فوق الزر الأزرق “تحرير باستخدام Elementor” في الجزء العلوي لفتح المحرر .
  • الخطوة 3 : تخصيص صفحة متجر ووكوميرس في المنتور

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

يقوم الدفع بإنشاء صفحة دفع بـ :

  1. نموذج الفوترة المفصلة
  2. حقل إشعار الأمر
  3. مربع الملخص
  4. قسم القسيمة
  5. زر الشراء (مع إتفاقية شروط الخدمة)

تنشئ السلة صفحة بها :

  1. تفاصيل السلة
  2. حقل القسيمة
  3. إجمالي الشراء بحسابات الشحن

يقوم “حسابي” بإنشاء صفحة حساب مستخدم ذات علامات تبويب ل:

  • لوحة التحكم
  • الأوامر
  • التنزيلات
  • العناوين
  • تفاصيل الحساب
  • تسجيل الخروج
عن طريق هذه الودجات سيكون لدينا القدرة على تخصيص كيفية ظهور كل قسم و كذلك تصميم الصفحة بأكملها .
في بعض الحالات ، يمكنك تعطيل بعض الميزات ( مثل كود القسيمة ) عندما لا تكون بحاجة اليها .
بالمناسبة أيضاً ، يمكنك إضافة ويدجات واجهة مستخدم أخرى إلى صفحات الووكوميرس .
إذ إن الإضافة Pro Widgets لها العديد من السمات Breadcrumbs، Upsell ، Product Categories، و غير ذلك .
  • الخطوة 4 : إعداد الصفحة الجديدة

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

الطريقة الثالثة و الأخيرة : إنشاء صفحات متجر ووكوميرس مخصصة باستخدام مُنشئ القوالب

نستخدم هذه الطريقة لإنشاء صفحات WooCommerce Shop و المنتج باستخدام  Elementor Pro.

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

  • اذهب إلى القوالب و منشئ القوالب

من لوحة معلومات الووردبريس ، نحدد موقع قائمة القوالب . ثم حدد  Theme Builder :

خطوة3

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

لإنشاء صفحة ل Shop، قم بالمرور فوق المنتجات” و انقر فوق الزر “اشارة زائد”.
و ذلك لإنشاء صفحة للمنتجات الفردية، قم بالمرور فوق “منتج واحد” و انقر فوق الزر “اشارة زائد”.
على سبيل المثال ، سننشئ مخططا عالميا لمنتجاتنا.
  • إختار قالبا

بعد النقر فوق علامة  الزائد ، سيأخذك العنصر إلى داخل المنشئ ويزودك بقوالب الكتل التي تتطابق مع ما تحاول إنشاءه :
ووكوميرس 3
حتى لو لم تكن التخطيطات المصنوعة مسبقا ما كنت تتصوره بالضبط ، فاختر التخطيطات الأقرب إلى ما تريد القيام به .
يمكن البدء من قالب و ذلك لتوفير الوقت حيث يمكنك ترك الأساس ثم تركيز طاقتك على تحرير المحتوى . لإدراج القالب في الصفحة، انقر فوق الزر “إدراج الذي يظهر أعلى يمين الصفحة.
ملاحظة :
يمكنك إستخدام القوالب الخارجية هنا أيضا. لذلك، إذا كان لديك قالب منتج أو صفحة متجر ترغب في تعديله، فهناك حل بديل له.
احفظ صفحة المنتج أو المتجر كمسودة ثم عد إلى لوحة معلومات الووردبريس . ثم الانتقال إلى القوالب والقوالب المحفوظة.
بعدها انقر فوق “إستيراد القوالب” لاستيراده من ملف التصميم الخارجي :
قوالب متجر ووكوميرس
المنتور يسألك ما هو نوع الصفحة . سينقلك بعد ذلك إلى محرر العناصر حيث يمكنك تخصيصه .
لن تحتاج إلى العودة إلى “منشئ القالب “ إذا كان هذا هو المسار الذي تسلكه.
فقط عليك التأكد من إعداد الخطوتين 4 و 5 بنجاح حتى تتمكن من برمجة قالب الصفحة لإظهاره كتصميم صفحة عمومي.
  • تخصيص التصميم

نبدأ بإزالة الودجات و الميزات التي لا نحتاج إليها . يجب أن تكون هذه عناصر لن تستبدلها بأي شيء آخر . و على سبيل المثال، عند تخصيص صفحة المنتج الخاصة بي، تركت عمود الصورة بشكل كامل
ومع ذلك، قمت بإزالة صورة الخلفية التي تم تعيينها لاسترداد صورة المنتج الأساسي . ثم قمت بسحب عنصر واجهة مستخدم “صور المنتجات” إلى العمود.
و هذا يسمح لي بإنشاء تجربة أكثر اكتمالا وتفاعلية لصورة المنتج.
فإذا قمت بتحميل أكثر من صورة منتج ، سيظهر المعرض بالكامل .
هذه الودجة تأتي مع ميزة تكبير/تصغير متحركة، والتي ستجعل الصور أكثر فائدة للمتسوقين لأنهم يستطيعون رؤية تفاصيل مقربة من المنتجات.
الآن، بعد أن قمت بإزالة الودجات والأقسام التي لا تحتاج إليها، امض قدما وأضف الودجات إلى اللوحة لمعرفة أي ميزات مفقودة.
فمن المحتمل أن تجدها ضمن فئات المنتج و التجارة.يمكنك إستخدام عناصر أو عناصر واجهة مستخدم أخرى إذا كانت هناك حاجة إليها أيضا.
و أخيرا تصفح كل جزء من الصفحة بغض النظر عن الوقت الذي تستغرقه فتخصيص محتوى و أسلوب هو كل ما يحتاج إليه . 
  • تعيين شروط للصفحة والنشر

عندما تنتهي من إنهاء تصميمك، انقر فوق السهم العلوي الموجود على يمين الزر “نشر “. ثم تحديد شروط العرض :
شروط المنتج في متجر ووكوميرس
في النافذة المنبثقة التالية ، انقر فوق الزر “إضافة شرط”. بشكل افتراضي ، ستنطبق صفحة المنتجات الفردية التي تنشئها على جميع صفحات المنتجات:
متجر ووكوميرس
فقط لعرض أنواع معينة من المنتجات ، و خذ خيار من القائمة المنسدلة “المنتجات” و حدد الفئة أو العلامة أو المواصفات الأخرى التي تريد تطبيق الشرط عليها
في حال كنت ترغب في عرض هذا التصميم لكافة المنتجات باستثناء فئة أو نوع  بحد ذاته ، خذ خيار “إضافة شرط” مرة أخرى و قم بإنشاء إعداد EXCLUDE.
بمجرد الانتهاء من من تطبيق تلك الشروط ، انقر فوق حفظ و إغلاق .
سيؤدي ذلك إلى حفظ شروطك  و تطبيق التصميم الجديد في الموقع التي ينطبق عليها بذات الوقت .
يمكنك تصفح موقعك و الانتقال إلى صفحة منتج ( أو صفحة المتجر، إذا قمت بتخصيص تلك الصفحة أولا ) .فسوف ترى التغييرات المطبقة عليه .
في الختام :
تعتبر الووكوميرس حلا رائعا لإنشاء متاجر إلكترونية . فجميع الأجزاء الأساسية التي تحتاج إليها لبدء بيع منتجاتك تم بناؤها مباشرة في المنصة .
ومع ذلك، فإنه لا يقدم الكثير في الخيارات في تخصيص التصميم .
حيث يقدم لنا Element Pro حلا لهذه المشكلة باستخدام أداة Theme Builder و Pro Gets.
هذا الإضافة الخاصة بمنشئ الصفحات المتميز تجعل من السهل بناء متجر الووكوميرس باستخدام الالمنتور ثم تخصيص الأجزاء التي لا تلمسها WooCommerce نفسها مثل المتجر و العربة و صفحات الدفع .
 
السابق
دليل المبتدئين: كيفية تحديث WordPress بأمان
التالي
كيفية السماح لمستخدمي المدونة بالإشراف على التعليقات في WordPress

اترك تعليقاً