قم بإدراج المنتجات في Elementor باستخدام جدول منتجات WooCommerce

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قم بتنظيف العلامات غير المتقنة بفضل أدوات تنظيم HTML وCSS وJavaScript المجانية عبر الإنترنت!

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

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

هانسون ف.

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

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

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

6 يناير 2022

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

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

2 يناير 2022

مقارنة موضوع أخبار WordPress: Newspaper vs. Astra

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

25 أكتوبر 2021

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

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

18 أكتوبر 2021

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

عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. هو - هي…

4 أكتوبر 2021

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

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

21 سبتمبر 2021