اگر فروشگاه اینترنتی با وردپرس و افزونهی ووکامرس دارید، احتمالاً متوجه شدهاید که صفحهی آرشیو محصولات (همان صفحهی فهرست کالاها) چقدر در جذب مشتری و نمایش حرفهای محصولات مؤثر است. بیشتر کاربران تصور میکنند طراحی این صفحه تنها مخصوص طراحان حرفهای یا کدنویسهاست، اما حقیقت این است که با افزونه المنتور میتوانید بدون نوشتن حتی یک خط کد، صفحهی آرشیو محصولات خود را کاملاً سفارشی، زیبا و کاربردی طراحی کنید. در این آموزش، قدمبهقدم یاد میگیرید که چطور چنین صفحهای بسازید تا هم کاربر پسند باشد و هم فروش شما را افزایش دهد.
1.فعالسازی افزونههای لازم
برای شروع طراحی صفحهی آرشیو محصولات، ابتدا باید اطمینان حاصل کنید که دو افزونهی اصلی روی سایت شما نصب و فعال هستند:
- المنتور (Elementor) – نسخه رایگان هم کافی است، ولی برای امکانات حرفهای بهتر است از نسخه پرو استفاده کنید.
- ووکامرس (WooCommerce) – افزونهی فروشگاهساز وردپرس که محصولات را مدیریت میکند.
پس از نصب و فعالسازی این دو افزونه، به بخش نمایش ← قالبساز المنتور (Theme Builder) بروید. در این قسمت میتوانید قالبهای اختصاصی برای صفحات مختلف سایت (از جمله آرشیو محصولات) بسازید.
نکته: اگر المنتور پرو ندارید، میتوانید از افزونههای جانبی مثل “ElementsKit” یا “Anywhere Elementor” استفاده کنید تا قابلیت طراحی آرشیو را در نسخه رایگان فعال کنید.
2.ساخت قالب جدید برای آرشیو محصولات
اکنون باید قالب جدیدی برای صفحهی آرشیو محصولات بسازید. برای این کار:
- در صفحهی قالبساز المنتور روی افزودن جدید (Add New Template) کلیک کنید.
- نوع قالب را Archive (آرشیو) انتخاب کنید.
- نامی برای قالب خود بنویسید (مثلاً «آرشیو محصولات فروشگاه»).
بعد از ساخت، المنتور به شما چند طرح آماده پیشنهاد میدهد که میتوانید یکی را انتخاب و ویرایش کنید یا صفحه را از صفر طراحی نمایید. اگر تازهکار هستید، استفاده از الگوهای آماده گزینهی بسیار خوبی است چون ساختار کلی صفحه را برایتان میچیند و شما فقط ظاهر را سفارشی میکنید.
3. افزودن ویجتها و ساختار صفحه
در این مرحله زمان طراحی است. در المنتور هر بخش از صفحه با ویجت ساخته میشود. برای صفحه آرشیو محصولات معمولاً به چند بخش اصلی نیاز دارید:
- عنوان صفحه: با ویجت Archive Title اضافه میشود. این عنوان بهصورت خودکار نام دستهی محصول را نشان میدهد.
- شبکه محصولات (Product Archive): با ویجت Archive Products یا Products میتوانید فهرست محصولات را در قالب شبکهای یا لیستی نمایش دهید.
- فیلترها و دستهبندیها: برای راحتی کاربر، فیلترهایی مانند قیمت، رنگ، سایز یا دستهبندی اضافه کنید (با افزونههایی مثل: ووکامرس پروداکت فیلتر WooCommerce Product Filter)
- نوار جستوجو و مرتبسازی: گزینهی جستوجو و مرتبسازی محصولات (بر اساس قیمت یا تاریخ) کمک میکند کاربر سریعتر به هدفش برسد.
- دکمههای صفحهبندی (Pagination): اگر محصولات زیاد دارید، حتماً از صفحهبندی استفاده کنید تا صفحه سنگین نشود.
نکته حرفهای: با کشیدن و رها کردن (Drag & Drop) میتوانید ترتیب ویجتها را تغییر دهید تا طراحی تمیزتر و منظمتری داشته باشید.
4. تنظیمات ظاهری و طراحی جذاب
حالا نوبت زیباسازی است! یکی از نقاط قوت المنتور همینجاست که بدون کدنویسی میتوانید طراحی بسیار شیکی بسازید. برای هر ویجت، به تبهای استایل و پیشرفته بروید و تنظیمات رنگ، فاصله، فونت و سایه را شخصیسازی کنید.
پیشنهادهایی برای طراحی بهتر:
- از رنگهای هماهنگ با برند خود استفاده کنید (مثلاً رنگ دکمه خرید را با رنگ لوگو هماهنگ کنید).
- برای تصاویر محصولات، اندازهی یکسان در نظر بگیرید تا صفحه مرتب به نظر برسد.
- از فاصلهی مناسب بین کارتهای محصول استفاده کنید تا چشم کاربر خسته نشود.
- فونتهای فارسی خوانا مثل «ایرانسنس»، «شبنم» یا «وزیر» را به کار ببرید.
- حتماً نسخه موبایل را هم بررسی کنید؛ در المنتور با یک کلیک میتوانید بین نمای موبایل و دسکتاپ جابهجا شوید.
توصیه: در طراحی نسخه موبایل، دو یا سه ستون برای نمایش محصولات کافی است. از نمایش بیش از حد آیتمها در هر ردیف خودداری کنید.
5. تنظیم شرایط نمایش و انتشار
پس از اتمام طراحی، باید مشخص کنید این قالب در کجا نمایش داده شود.در بالای صفحه روی انتشار (Publish) کلیک کنید. المنتور از شما میپرسد که این قالب برای چه صفحاتی اعمال شود.
برای صفحه آرشیو محصولات گزینههای زیر را تنظیم کنید:
- نوع صفحه: Product Archive
- شرط نمایش: All Product Archives (برای همه آرشیوها)، یا در صورت نیاز فقط برای دستههای خاص مثل «کفش» یا «لباس».
بعد از ذخیره، صفحهی آرشیو محصولات شما بهصورت خودکار جایگزین قالب پیشفرض ووکامرس میشود. حالا اگر به فروشگاه خود سر بزنید، طراحی جدید را خواهید دید.
6. افزودن بخش فیلتر و مرتبسازی هوشمند محصولات
یکی از مهمترین بخشهای هر صفحه آرشیو حرفهای، امکان فیلتر کردن سریع محصولات بر اساس ویژگیهایی مثل قیمت، رنگ، سایز یا موجودی است. بسیاری از کاربران بهجای مرور طولانی، ترجیح میدهند دقیقاً محصول مورد نظر خود را پیدا کنند. اگر این قابلیت را بهدرستی پیادهسازی کنید، نرخ تبدیل سایت شما بهطور چشمگیری افزایش مییابد.
چرا فیلتر هوشمند مهم است؟
در فروشگاههای بزرگ، کاربران معمولاً با دهها یا صدها محصول مواجهاند. بدون فیلتر مناسب، پیدا کردن یک کالا به کار دشواری تبدیل میشود و ممکن است کاربر بهسادگی از سایت خارج شود. فیلترهای پویا (Dynamic Filters) باعث میشوند کاربر در همان صفحه و بدون رفرش مجدد بتواند محصولات را بر اساس نیاز خود فیلتر کند.
چطور فیلتر و مرتبسازی را در المنتور اضافه کنیم؟
برای این کار، افزونههای متنوعی وجود دارند که با المنتور و ووکامرس کاملاً سازگارند. دو افزونه محبوب در این زمینه عبارتاند از:
- JetSmartFilters جت اسمارت فیلتر : افزونهای حرفهای از مجموعه Crocoblock که به شما اجازه میدهد فیلترهای بسیار پیشرفته، از جمله کشویی، دکمهای، محدوده قیمت، رنگ، برچسب و … طراحی کنید. (دانلود رایگان )
- WooCommerce Product Filters ووکامر پروداکت فیلتر: افزونهای سادهتر که در نسخه رایگان نیز قابلیتهای خوبی دارد و برای سایتهای متوسط عالی است.(دانلود رایگان)
مراحل کار در المنتور:
- در المنتور، بخش آرشیو محصولات را باز کنید.
- یک ستون یا سکشن کناری (Sidebar) برای فیلترها در نظر بگیرید.
- با استفاده از ویجت افزونه فیلتر، فیلدهای مورد نظر (مثلاً بازه قیمت، رنگ، برند و…) را اضافه کنید.
- برای مرتبسازی، از ویجت «Product Sorting» استفاده کنید تا کاربران بتوانند بر اساس قیمت یا جدیدترین محصولات لیست را تنظیم کنند.
- در تنظیمات افزونه، گزینهی “AJAX Filtering” را فعال کنید تا با تغییر فیلترها، صفحه بدون بارگذاری مجدد (Reload) بهروزرسانی شود.
نکات حرفهای طراحی فیلتر
- فیلترها را در سمت راست یا بالای محصولات قرار دهید تا در موبایل نیز راحت قابل استفاده باشند.
- از آیکونهای گویا (مثل علامت تیک برای رنگها یا محدوده قیمت) استفاده کنید تا تجربه کاربری بهبود یابد.
- اگر محصولات شما تنوع کمی دارند، فقط فیلترهای ضروری (مثل قیمت و دستهبندی) را نمایش دهید.
- در نسخه موبایل، فیلترها را بهصورت یک پنجره کشویی (Off-Canvas) نمایش دهید تا صفحه شلوغ نشود.
با افزودن فیلتر و مرتبسازی هوشمند، کاربر در کوتاهترین زمان به محصول دلخواهش میرسد، حس کنترل و رضایت بیشتری دارد و احتمال خرید نیز افزایش مییابد. این تغییر کوچک، میتواند تجربه کاربری سایت شما را از یک فروشگاه معمولی به یک فروشگاه حرفهای ارتقا دهد.
نکات تکمیلی و بهینهسازی حرفهای
- افزودن بنر تبلیغاتی: در بالای آرشیو میتوانید بنری با تخفیف ویژه قرار دهید تا توجه کاربر جلب شود.
- استفاده از Breadcrumbs: مسیر ناوبری (مثلاً خانه ← فروشگاه ← لباس) باعث بهبود تجربه کاربری و سئو میشود.
- بهینهسازی سرعت: از افزونههایی مانند WP Rocket یا LiteSpeed Cache برای کاهش زمان بارگذاری استفاده کنید.
- سئوی بهتر: برای هر دسته محصول، توضیحات کوتاه و کلیدواژههای هدفمند بنویسید تا رتبه گوگل بهبود یابد.
- افزودن فیلتر پویا: افزونههایی مثل “JetSmartFilters” با المنتور هماهنگ هستند و امکان فیلتر محصولات بدون رفرش صفحه را میدهند.
خطاهای رایج و روش جلوگیری از آنها
- نمایش ندادن محصولات در صفحه: معمولاً به خاطر تنظیم اشتباه شرط نمایش است. بررسی کنید که قالب برای Product Archive فعال باشد.
- بههمریختگی طراحی در موبایل: همیشه پس از طراحی دسکتاپ، حالت موبایل را هم تنظیم کنید. در المنتور برای هر دستگاه تنظیمات جداگانه وجود دارد.
- سرعت پایین صفحه: تصاویر محصولات را فشرده کنید و از کش مرورگر استفاده کنید.
- ناهماهنگی رنگ و فونت: طرح رنگی ثابت تعریف کنید تا کل صفحات فروشگاه ظاهر یکدست داشته باشند.
- فیلترهای ناکارآمد: اگر فیلترها درست کار نمیکنند، افزونههای فیلتر ووکامرس را با نسخهی فعلی المنتور هماهنگ کنید.
جمعبندی
طراحی صفحهی آرشیو محصولات با المنتور نه تنها ساده است بلکه به شما آزادی عمل کامل میدهد تا بدون نیاز به برنامهنویسی، ظاهر فروشگاه خود را دقیقاً مطابق سلیقه و برندتان بسازید. با رعایت ۵ گام بالا، از فعالسازی افزونهها تا تنظیم نهایی، میتوانید یک صفحهی آرشیو زیبا، سریع و کاربردی بسازید که کاربران از مرور آن لذت ببرند و احتمال خریدشان افزایش یابد.
