ساخت اسلایدر محصولات در ووکامرس با افزونه رایگان

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

ووکامرس برای نمایش محصول‌ها بلوک «مجموعه محصولات» رو داره. با این بلوک می‌تونید بدون نصب افزونه، محصول‌ها رو به‌شکل شبکه‌ای کنار هم بچینید. ولی اگه یک اسلایدر متحرک کامل می‌خواید، این بلوک به‌تنهایی کافی نیست. برای همین، توی این آموزش از نسخه رایگان افزونه Product Slider, Product Grid, Product Masonry استفاده می‌کنیم؛ افزونه‌ای که قبلاً با نام Woocommerce Products Slider شناخته می‌شد.

راه داخلی ووکامرس برای نمایش محصولات

قبل از اینکه افزونه‌ای نصب کنید، بهتره اول ببینید واقعاً به اسلایدر نیاز دارید یا نه. اگه فقط می‌خواید چند محصول رو با یک چیدمان مرتب و ساده نشون بدید، بلوک «مجموعه محصولات» ووکامرس کارتون رو راه می‌اندازه. کافیه توی ویرایشگر برگه روی دکمه افزودن بلوک بزنید، این بلوک رو پیدا کنید و بعد محصول‌ها، دسته یا نوع چیدمان دلخواهتون رو انتخاب کنید.

این روش داخلی معمولاً ساده‌تر و سبک‌تره، ولی محصول‌ها رو به‌شکل شبکه نشون می‌ده. اگه به حرکت خودکار، فلش جابه‌جایی یا چند محصول در یک ردیف متحرک نیاز دارید، افزونه رایگان این آموزش انتخاب مناسب‌تریه.

امکانات نسخه رایگان Product Slider

• ساخت اسلایدر، گرید و چیدمان Masonry برای محصولات
• نمایش درست اسلایدر توی موبایل، تبلت و کامپیوتر
• ساخت چیدمان با روش کشیدن و رها کردن
• انتخاب محصولات با سازنده Query؛ یعنی خودتون مشخص می‌کنید کدوم محصول‌ها وارد اسلایدر بشن
• دسترسی به کتابخونه قالب‌های آماده
• تنظیم حرکت خودکار، فلش‌های جابه‌جایی و صفحه‌بندی اسلایدر
• نمایش اسلایدر توی نوشته یا برگه با شورت‌کد
• امکان اضافه‌کردن CSS سفارشی برای تغییر ظاهر

شورت‌کد یک کد کوتاه مثل [wcps id="1234"] هست. هر جایی این کد رو بذارید، خروجی اسلایدر همون‌جا دیده می‌شه. بعضی Queryهای پیشرفته، مثل محصولات پرفروش، محصولات مرتبط و محصول‌هایی که کاربر به‌تازگی دیده، ممکنه فقط توی نسخه پولی در دسترس باشن. پس همه مراحل این آموزش رو با امکانات رایگان جلو می‌بریم.

نصب افزونه رایگان Product Slider

اول مطمئن بشید ووکامرس روی سایتتون نصب و فعال هست. بعد توی پیشخوان وردپرس به «افزونه‌ها ← افزودن افزونه تازه» برید و عبارت Product Slider, Product Grid, Product Masonry رو جست‌وجو کنید. افزونه‌ای رو نصب و فعال کنید که سازنده اون PickPlugins هست. این افزونه رایگانه و مستقیم از مخزن رسمی وردپرس نصب می‌شه.

برای نسخه‌های قدیمی تا 1.13.60 یک مشکل امنیتی گزارش شده بود و نسخه‌های بعدی اصلاحات امنیتی گرفتن. پس نسخه 1.13.63 یا هر نسخه امن و جدیدتری رو نصب کنید که توی مخزن وردپرس منتشر شده. یادتون نره افزونه رو همیشه به‌روز نگه دارید.

ساخت اسلایدر محصولات

بعد از فعال‌کردن افزونه، منوی WCPS به پیشخوان اضافه می‌شه. وارد این منو بشید و گزینه ساخت مورد تازه رو بزنید. یک نام واضح مثل «محصولات جدید صفحه اصلی» برای اسلایدرتون بنویسید تا اگه بعداً چند اسلایدر ساختید، پیداکردنش راحت باشه.

رابط فعلی افزونه یک سازنده دیداری داره؛ یعنی نتیجه چیدمان رو راحت‌تر می‌بینید. توی بخش چیدمان می‌تونید بخش‌هایی مثل تصویر محصول، عنوان، قیمت، دسته‌بندی و دکمه خرید رو اضافه کنید. با کشیدن هر مورد هم ترتیبش عوض می‌شه. لازم نیست همه اجزا رو نگه دارید. برای یک اسلایدر ساده، تصویر، عنوان، قیمت و دکمه خرید معمولاً کافیه.

انتخاب محصولات اسلایدر

توی بخش Query مشخص می‌کنید کدوم محصول‌ها نمایش داده بشن. Query یعنی قانونی که افزونه با کمک اون محصول‌ها رو انتخاب می‌کنه. مثلاً می‌تونید تعداد محصول‌ها، ترتیب نمایش یا دسته دلخواهتون رو تعیین کنید. فقط سراغ گزینه‌هایی برید که توی نسخه رایگان در دسترس هستن و قبل از انتشار، نتیجه رو در پیش‌نمایش ببینید.

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

تنظیم ظاهر و حرکت اسلایدر

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

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

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

گذاشتن اسلایدر داخل برگه یا نوشته

وقتی اسلایدر رو ذخیره یا منتشر کردید، شورت‌کد ساخته‌شده رو کپی کنید. بعد برگه یا نوشته دلخواهتون رو باز کنید، یک بلوک «شورت‌کد» بسازید و کد رو داخلش بذارید. صفحه رو به‌روزرسانی کنید و نتیجه رو هم توی کامپیوتر و هم توی موبایل ببینید.

رفع مشکل نمایش‌ندادن اسلایدر

اگه اسلایدر نمایش داده نشد، اول ببینید ووکامرس و افزونه Product Slider فعال هستن یا نه. بعد مطمئن بشید محصول‌های انتخاب‌شده منتشر شده‌ان و شورت‌کد رو کامل کپی کردید. پاک‌کردن کش سایت و مرورگر هم می‌تونه نسخه قدیمی صفحه رو کنار بزنه و خروجی تازه رو نشون بده.

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

جمع‌بندی

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

سوالات متداول

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.