كيفية إنشاء أشرطة جانبية مفلترة لصفحات Divi WooCommerce الخاصة بك

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

السبب هو أن هذه الأدوات غير متوافقة مع أدوات إنشاء الصفحات. في هذه المقالة ، سننظر في طريقة سهلة لإنشاء أشرطة WooCommerce الجانبية المصفاة للصفحات التي تم إنشاؤها باستخدام Divi Builder أو أي منشئ صفحات آخر.

أشرطة WooCommerce الجانبية القياسية

يتضمن WooCommerce العديد من عناصر واجهة المستخدم القابلة للتصفية.

• تصفية المنتجات حسب السمة
• تصفية المنتجات حسب السعر
• تصفية المنتجات حسب التصنيف

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

ثيمات WordPress

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

إليك Divi تعرض صفحة متجر WooCommerce الافتراضية دون استخدام Divi Builder. يعرض أدوات التصفية تمامًا مثل أي موضوع عادي.

بناة WordPress

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

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

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

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

عرض مرشحات WooCommerce في Builder Sidebars

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

Themify - فلتر منتج WooCommerce

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

إنشاء مرشح منتج جديد

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

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

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

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

يفتح كل عنصر مجموعة جديدة من الميزات. يختلف كل واحد عن الآخر ، لكن لدى معظمه خيارات متشابهة. هنا نظرة على الفئة.

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

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

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

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

أضف أداة نصية إلى الشريط الجانبي والصق الرمز القصير.

تُعرض المرشحات الآن داخل صفحات المتجر التي تم إنشاؤها بواسطة البناة. ها هي الصفحة مع Divi Builder.

هذا هو المرشح الذي يظهر على الصفحة التي صنعت Beaver Builder في قالب Twenty Sixteen.

هذا هو المرشح مع Elementor في موضوع Twenty Seventeen. هذا واحد يستخدم تخطيط أفقي.

استخدام مرشح منتج Themify - WooCommerce مع تخطيطات Divi

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

هذا هو التخطيط العمودي. يتناسب بشكل جيد مع تصميم التخطيط.

لقد قمت بتعيين الأزرار لتتناسب مع تصميم التخطيط. لسوء الحظ ، لم أتمكن من ضبط زر البحث.

هذا هو التخطيط الأفقي. لا يزال هذا المثال يستخدم تخطيط العمود 3/2 الذي اخترته للمرشح الرأسي.

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

بالنسبة لهذا المرشح ، قمت بوضع المرشح أسفل وحدة المتجر.

ها هو المرشح فوق وحدة المتجر.

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

تصفية منتجات WooCommerce

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

نتائج البحث

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

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

خواطر ختامية

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

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

يعد Themify - WooCommerce Product Filter خيارًا رائعًا إذا كنت تريد مكونًا إضافيًا مجانيًا لإضافة مرشح منتج إلى صفحات Divi Builder الخاصة بك.

نريد أن نسمع منك. هل جربت المكون الإضافي Themify - WooCommerce Product Filter مع صفحات المتجر التي تم إنشاؤها باستخدام Divi Builder؟ أخبرنا عن تجربتك في التعليقات.

صورة مميزة عبر Max Griboedov / shutterstock.com