قائمة المنتجات في Elementor مع WooCommerce Product Table

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

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

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

نظرة عامة سريعة على جدول منتج WooCommerce وإطارات العمل

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

Elementor هو السابق amp جنيه من النوع الأول من التطبيق:

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

بينما يعد WooCommerce Product Table حلاً أكثر عمومية ، إلا أنه أكثر استهدافًا أيضًا:

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

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

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

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

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

لدمج WooCommerce Product Table في محرر نصوص أو عنصر واجهة مستخدم للرمز القصير ، اتبع الخطوات التالية:

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

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

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

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

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

[جدول المنتج]

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

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

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

ارجع إلى لوحة معلومات WordPress الخاصة بك وانتقل إلى WooCommerce> علامة التبويب الإعدادات لإكمال هذه المهمة. يمكن العثور على جداول المنتجات من خلال تحديد المنتجات أعلى الشاشة ثم جداول المنتج:

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

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

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

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

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

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

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

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

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

قم بتنظيف العلامات القذرة الخاصة بك بفضل منظمي HTML و CSS و JavaScript على الإنترنت مجانًا!

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

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

اترك تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *