آموزش ایجاد فیلترهای پیشرفته فروشگاه آنلاین مثل دیجی کالا

وقتی یک سایت فروشگاهی تعداد محصولات زیادی داشته باشد، باعث سردرگمی کاربر می شود. بنابراین نه تنها فروش خوبی ندارد، بلکه این سردرگمی در نام برندش هم تأثیر منفی دارد. ولی خب راه حل برای فروشگاه هایی که از ووکامرس استفاده می کنند. بسیار ساده است. افزونه فیلتر محصولات ووکامرس چاره کار است. در این مقاله آموزش افزونه woof و آموزش افزونه فیلتر محصولات ووکامرس را بررسی خواهیم کرد.

افزونه woof – woocommerce products filter پرطرفدارترین ابزار برای ایجاد فیلترهای پیشرفته است. به کمک این پلاگین مشتریان شما راحت تر محصول دلخواه خود را پیدا می کنند. به این شیوه که با استفاده از فیلتر ها، لیست محصولاتی که روبرویش قرار گرفته را کمتر و نزدیک تر به سلیقه خود می کند. مثلا از بین 250 کت، با فیلترها 20 کت جین که مد نظر هست را زودتر و سریع تر پیدا می کند.

معرفی افزونه Woof

woof یا افزونه woocommerce product filter یکی از انواع افزونه فروشگاهی ووکامرس است. در حالت عادی فیلتر های موجود در ووکامرس ، به این صورت هستند که وقتی برند اپل انتخاب می شود، دیگر برندها از لیست فیلتر حذف می شوند. بنابراین امکان انتخاب وجود ندارد. مثلا اگر بخواهیم محصولات برند سامسونگ و اپل را با هم ببینیم امکان ندارد.

اما در افزونه woof – woocommerce products filter می توان فیلترها را به صورت چک باکس با امکان چند انتخابی قرار داد تا مثلا برندهای مختلف را بتوان انتخاب کرد. همچنین به کمک دکمه رادیویی امکان انتخاب تکی را می توان فراهم کرد. در واقع افزونه ای است که می توانید به مشتریان مثل سایت های فروشگاهی پیشرفته این امکان را بدهید تا محصولات را براساس ویژگی ها، برچسب های محصول، طبقه بندی ، قیمت فیلتر کنند.

نکته جذاب دیگر این است که با این پلاگین می توانید برای هر دسته فیلترهایی جداگانه می توانید تعریف کنید، به طوریکه در دسته بندی دیگر نشان داده نشود. مثلا اگر وب سایت شما برای فروش پوشاک باشد.؛ در دسته بندی های بزرگسالان می توانید فیلترهایی مشخص داشته باشید که در دسته بندی کودکان نشان داده نشود.

از دیگر ویژگی های آن باید به موارد زیر اشاره داشت.

• فیلتر ایجکس محصولات ووکامرس
• امکان استفاده از کد کوتاه و ابزارک
• دارای تنظیمات متنوع و بسیار پیشرفته
• قابلیت ایجاد انواع فیلترهای متنی، دکمه رادیویی،
• باکس، باکس رنگ تصویر، اسلایدر، چند انتخابی و …

آموزش افزونه woof و ایجاد فیلترهای پیشرفته

سخن کوتاه کرده و مستقیم به سراغ آموزش افزونه فیلتر محصولات ووکامرس می رویم. اولین قدم مثل دیگر افزونه های وردپرس، نصب محصول در سایت شماست. پس از دانلود افزونه woocommerce product filter فایل زیپی در اختیار شما قرار گرفته که از بخش افزونه های پنل مدیریت وردپرس اقدام به نصب آن کنید.

البته با استفاده از FTP هم می توان افزونه ها رو روی سایت نصب کرد. اگر به تازگی کار با وردپرس را شروع کرده اید، پیشنهاد می کنم آموزش نصب افزونه وردپرس ما را مطالعه کنید. فراموش نکنید در پایان نصب، افزونه را فعال کنید.

نکته: پیش از آنکه به اقدام به ایجاد فیلترهای پیشرفته در سایت کنید، مطمئن شوید که محصولات را به درستی و دقت با ویژگی های مورد نظر خود وارد کرده اید.

تنظیمات اولیه در آموزش افزونه فیلتر محصولات ووکامرس

پس از اینکه افزونه woof را نصب و فعال کردید، به بخش تنظیمات بخش افزونه ها مراجعه کنید. برای این کار، در پیشخوان وردپرس سایت خود، گزینه افزونه ها > افزونه های نصب شده، را کلیک کنید. به این صورت لیست افزونه ها را می بینید. از بین آنها افزونه فیلتر وردپرس را پیدا و زیر آن گزینه تنظیمات را انتخاب کنید. همانطور که در تصویر مشاهده می کنید، این پلاگین با عنوان “فیلتر محصولات ووکامرس- ووف” در لیست شما می آید.

البته راه دیگر دستیابی به این جا، پیشخوان وردپرس سایت خود > ووکامرس > پیکربندی > فیلتر محصولات است.

تنظیمات دارای 6 تب است. شامل ساختار، تنظیمات، طراحی، پیشرفته، meta data ، افزودنی ها و در نهایت اطلاعات.

تب ساختار تنظیمت افزونه woof

مواردی که در این صفحه قرار دارند، همگی عناصر فیلتر های سایت شما هستند. یکی یکی با هر کدام آشنایی مختصری خواهیم داشت. توجه داشته باشید که تنظیمات فیلتر ، اصلی ترین کاری است که برای ایجاد فیلترهای پیشرفته باید انجام دهید.

جستجو براساس قیمت

نمایش محصول براساس قیمت در این بخش تنظیم می شود. این فیلتر برای تقریبا تمام فروشگاه های آنلاین قابل استفاده است. البته با استفاده از گزینه “خیر” که در لیست کشویی قرار گرفته آن را غیرفعال کنید. مسلما بر حسب نیاز شما هر چیزی ممکن است. در لیست کشویی گزینه هایی مثل

• بصورت اسلایدر لیست ووف
• بصورت لیست بازشو
• بصورت دکمه رادیویی
• بصورت فیلد متن
• بصورت اسلایدر رنج قیمت

هم وجود دارند. مثلا در اینجا، قیمت روی “بصورت اسلایدر رنج ووف” تنظیم شده. در بخش زیر هم می بینیم که به صورت این انتخاب ما نمایش داده می شود. اگر بیشتر دقت کنید، متوجه می شوید که گزینه دیگری هم با عنوان “تنظیمات بیشتر ” در جلو هر سطر قرار دارد.

در تنظیمات فیلتر قیمت، وقتی تنظیمات بیشتر را باز می کنیم، موارد زیر قابل تنظیم هستند. در صورت نیاز می توانید اقدام کنید.

• نمایش دکمه: نمایش دکمه فیلتر قیمت ووکامرس در فرم جستجو
• متن عنوان: متن قبل از فیلتر اسلایدر رنج قیمت.
• Tooltip
• دکمه رادیویی یا لیست بازشو: تعیین محدودهای قیمت فیلتر در حالت دکمه رادیویی و لیست بازشو
• متن فیلتر قیمت کشویی: متن اولین انتخاب فیلتر قیمت حالت لیست بازشو
• اسلایدر رنج قیمت
• Taxes

برای دیگر فیلترها نیز با مثال قیمت می توانید پیش روید.

یک راه برای ساخت فیلتر محصولات محصولات ووکامرس این است که در بخش ویژگی های محصولاتدر زمان ثبت محصول، گزینه هایی را ثبت کرده بودید. در بخش بعد تنظیمات می توانید این ویژگی ها را به عنوان فیلتر مدیریت کنید.

در نهایت با این کار، تب ساختار که مهم ترین تنظیمات افزونه WooCommerce Products Filter است به پایان می رسد. به ادامه تنظیمات دیگر می پردازیم.

تب تنظیمات افزونه woof

در تب تنظیمات، گزینه های مختلفی وجود دارد که خلاصه ای از کاربرد هر یک را می آوریم.

• تنظیم فیلتر به صورت خودکار: فیلتر را به طور خودکار در صفحه فروشگاه تنظیم کنید.
• اعمال فیلتر بصورت خودکار: شروع جستجو ها تنها با تغییر ویژگی و بدون نیاز به کلیک کردن بر روی دکمه ای
• تعداد نمایش: نمایش تعداد هر ویژگی در کنار آن ها
• بروزرسانی خودکار تعداد: نمایش تعداد هر ویژگی در کنار آن ها
• عدم نمایش ویژگی های خالی: مخفی کردن ویژگی های خالی پس از بروزرسانی تعداد آن ها به صورت خودکار
• سیستم فیلترینگ ایجکس: اگر می خواهید فیلترینگ بصورت ایجکس باشد، بلی را انتخاب کنید. این ویژگی را قبل از استفاده امتحان کنید
• عدم نمایش فرزندان در چک باکس های و دکمه های رادیویی: در صورت علامت نزدن یک علامت + در کنار فیلدها برای نمایش فرزندان نشان داده می شود.
• فلیدهای علامت خورده و فیلتر شده در بالا: این فیلدها به بالای بقیه فیلد ها منتقل می شوند.
• متن دکمه فیلتر: این متن در فرم جستجو نمایش داده می شود.
• متن دکمه بازنشانی: اگر می خواهید مخفی باشد، “non” قرار دهید.

طراحی در آموزش افزونه فیلتر محصولات ووکامرس

در تب طراحی ویژگی های استایل را انتخاب می کنید که کاملا سلیقه ای است. در این جا نحوه نمایش دکمه های رادیویی و چک باکس ها را می توانی از گزینه هایی که به صورت دکمه کشویی هستند انتخاب کنید. توجه داشته باشید که اگر نمی خواهید از این گزینه ها برای کادرهای انتخابی خود استفاده کنید، گزینه non هم در دسترس است.  در بخش پوسته ها، سبک انیمیشنی که فیلتر روی آن صورت می گیرد را انتخاب کنید.

دیگر گزینه ها هم مثل پوسته اسلایدر فیلتر قیمت از منو کشویی انتخاب می شوند؛ یا مثل تصویر زیردسته ها حالت باز باید برایشان گزینه ای انتخاب شود.

تب پیشرفته

در تب پیشرفته، با دو بخش روبرو هستید کد ها و تنظیمات.

در کد ها ، css های مورد نظر یا کدهای جاوااسکریپت سفارشی پس از پایان ایجکس را می توان وارد کرد. ضمن اینکه اجرای افزونه در برگه های خاص را هم می توانید روی دکمه بله یا خیر تنظیم کنید.

در تنظیمات هم گزنیه های زیر را می توانید با بله، خیر تنظیم کنید.

• بهینه سازی بارگذاری فایل های جاوااسکریپت افزونه
• تعداد محصول در برگه
• مخفی کردن تعداد عناصر
• باکس کاتالوگ
• کش کردن نمایش داینامیک تعداد محصول
• کش کردن عناصر و …

خب تنظیمات ضروری در آموزش افزونه woof را همین جا تمام می کنیم. به سراغ فرانت اند یا ظاهر قضیه می رویم که ملموس تر است.

آموزش تنظیم افزونه woof در فرانت اند یا ظاهر سایت

بعد از تنظیمات اولیه و ذخیره آنها ، 3 روش برای تنظیم فیلترهای ووکامرس در قسمت جلو سایت شما وجود دارد:

تنظیم فیلتر ها به صورت خودکار

برای این کار باید در گزینه تنظیم خودکار فیلتررا در تنظیمات افزونه که در ابتدای بحث اشاره کردیم، فعال کنید. به این صورت فیلترهای پیشرفته در صفحه فروشگاه ها و صفحات دسته بندی ها مثل تصویر زیر قرار می گیرید.

ویجت ها یا ابزارک ها

برای نمایش فیلتر ها در وب سایت خود، بهترین راه، استفاده از ابزارک های سایت است. در واقع، ویجت روش مناسبی برای نمایش فرم های جستجو و نمایش فیلتر پیشرفته محصولات ووکامرس است. چون می توان آن را در تمام صفحات سایت ارائه داد که به کاربران اجازه می دهد از هر جای سایت شما جستجو را آغاز کنند.

برای دسترسی به ابزارک ها می توانید با مراجعه به منو مدیریت وردپرس خود، نمایش > ابزارک ها را کلیک کنید. در اینجا، woocommerce products filter را پیدا کنید.

نکته: در تصویر زیر، سایدبار من چیده شده بود، بنابراین آیکن ویجت کوچک نشان داده شده.

در پایان امیدواریم که  آموزش افزونه فیلتر محصولات فروشگاهی ووکامرس woof یا woocommerce products filter فیلتر محصولات ووکامرس برایتان مفید باشد.