كيفية استخدام WooCommerce Product Table مع Elementor

في هذا المنشور ، سنوضح لك كيفية استخدام Elementor و WC Product Table معًا لتحقيق موقع ووردبريس مخصص بشكل أفضل ، وزيادة مبيعات متجر WooCommerce.

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

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

لحسن الحظ ، هذا ليس هو الحال مع WooCommerce Product Table and Elementor. يمنحك كلا المكونين الإضافيين مستوى أعلى من التحكم في مظهر موقعك ووظائفه – ويمكن استخدامهما معًا لتحقيق تأثيرات أفضل.

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

مقدمة موجزة لجدول منتج Woocommerce والعنصر

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

Elementor هو مثال على الفئة السابقة:

elementor-website

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

من ناحية أخرى ، يعد WooCommerce Product Table حلاً أكثر استهدافًا:

WooCommerce-Product-Table

يساعدك هذا المكون الإضافي على إضافة جداول ديناميكية وقابلة للتخصيص تسرد منتجات WooCommerce الخاصة بك. يمكن استخدام هذه الجداول لمجموعة متنوعة من التطبيقات ، ولكن التكامل مع WooCommerce يجعلها مثالية لعرض المنتجات والخدمات بطريقة سهلة الاستخدام وجذابة. (إذا كنت ترغب في عرض شيء آخر غير المنتجات – مثل المنشورات أو الصفحات أو المستندات – فيمكنك استخدام المكون الإضافي الشقيق ، Posts Table Pro . يتكامل Posts Table Pro بشكل جيد مع Elementor ، ويسرد أي نوع محتوى ووردبريس في جدول بدلاً من ذلك لمنتجات WooCommerce فقط).

يعمل Elementor و WooCommerce Product Table معًا بسلاسة ويوفران وظائف مختلفة تمامًا. معًا ، يمكنك استخدامها لتحقيق بعض التأثيرات المفيدة للغاية التي ستزيد من مبيعات متجر WooCommerce.

جدول منتج Woocommerce والعنصر: دراسة حالة

بعد قليل ، سنوضح لك كيفية البدء في استخدام WooCommerce Product Table و Elementor معًا على موقعك الخاص. لكن أولاً ، دعنا نلقي نظرة على مثال من العالم الحقيقي لما يمكنك تحقيقه من خلال هذا التكامل.

موقع الويب المعني هو موقع بسيط لطلب الطعام لشركة مأكولات هندية نباتية تسمى OrderAmysFood.com :

موقع amys-food

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

amys-food-order-page

تحتوي هذه الصفحة على أربع علامات تبويب “أكورديون” قابلة للتوسيع ، مقدمة من Elementor. عند التوسيع ، تعرض كل علامة من علامات التبويب هذه نموذج طلب مصممًا باستخدام WooCommerce Product Table :

amys-food-order-table

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

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

كيفية استخدام Woocommerce Product Table جنبًا إلى جنب مع Elementor Page Builder (2 أمثلة)

الآن ، حان الوقت لتصبح عمليًا. في الأقسام القليلة التالية ، سنلقي نظرة على بعض الأمثلة حول كيفية استخدام WooCommerce Product Table و Elementor لتحقيق تأثيرات مثل تلك الموضحة أعلاه.

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

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

1. أضف Woocommerce Product Table إلى محرر نصوص أو أداة رمز قصير

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

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

وورد-محرر-elementor-button

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

وورد-elementor-blank-page

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

وورد-عنصر-منتج-رمز قصير

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

[product_table]

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

إذا كنت ترغب في استخدام عنصر للرمز نفسه فقط ، فيمكنك أيضًا استخدام أداة Shortcode :

عنصر ووردبريس القصير – عنصر واجهة المستخدم

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

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

المنتج-الجدول-إعدادات-الصفحة

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

سيتم تطبيق أي تغييرات تجريها هنا تلقائيًا على جدول المنتج الذي وضعته للتو باستخدام Elementor. بمجرد الانتهاء من تعديل الجدول ليناسب احتياجاتك ، احفظ الإعدادات ، وستكون جاهزًا للبدء!

2. تنظيم جداول منتجات متعددة باستخدام الأكورديونات أو علامات التبويب أو التبديل

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

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

للبدء ، اسحب أداة Accordion إلى منطقة التحرير اليمنى:

عنصر-أكورديان-القطعة

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

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

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

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

سيعتني منظمو HTML و CSS و JavaScript عبر الإنترنت بالترميز المتسخ!

استنتاج

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

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

هل لديك أي أسئلة حول كيفية عرض جداول منتجات WooCommerce باستخدام Elementor؟ اسأل بعيدا في قسم التعليقات أدناه!