برای طراحی یک فروشگاه اینترنتی با این دو ابزار، ابتدا با ووکامرس تمام زیرساخت‌های فروشگاه (مانند افزودن محصولات و تنظیمات پرداخت) را ایجاد می‌کنید. سپس با استفاده از المنتور پرو و قالب‌ساز (Theme Builder) آن، صفحات پیش‌فرض ووکامرس (مانند صفحه اصلی فروشگاه و صفحه تکی محصول) را به صورت کاملاً بصری و سفارشی طراحی می‌کنید.
پیش نیازهای ضروری
قبل از شروع، مطمئن شوید که موارد زیر را آماده کرده‌اید:
- یک وب‌سایت وردپرسی فعال.
- افزونه ووکامرس (WooCommerce) نصب و فعال شده باشد.
- حداقل چند محصول نمونه در ووکامرس خود ایجاد کرده باشید.
- افزونه المنتور (نسخه رایگان) نصب و فعال باشد.
- افزونه المنتور پرو (Elementor Pro) نصب و فعال باشد. (برای طراحی صفحات اصلی فروشگاه مانند صفحه محصول، نسخه پرو الزامی است).
طراحی صفحه اصلی فروشگاه (Shop Page)
این صفحه، ویترین اصلی فروشگاه شماست که لیست محصولات را نمایش می‌دهد.
- از پیشخوان وردپرس به مسیر قالب‌ها (Templates) > قالب‌ساز (Theme Builder) بروید.
- در داشبورد قالب‌ساز، روی تب “بایگانی محصول” (Product Archive) کلیک کرده و “Add New“ را بزنید.
- یک نام برای قالب خود انتخاب کنید (مثلاً “قالب صفحه فروشگاه”).
- ویرایشگر المنتور باز می‌شود. حالا می‌توانید با استفاده از ویجت‌های مخصوص ووکامرس، این صفحه را طراحی کنید:
- عنوان بایگانی (Archive Title): این ویجت به صورت خودکار عنوان صفحه (“فروشگاه”) را نمایش می‌دهد.
- محصولات بایگانی (Archive Products): مهم‌ترین ویجت. این ویجت شبکه محصولات شما را نمایش می‌دهد. شما می‌توانید تعداد ستون‌ها، ردیف‌ها و استایل کارت‌های محصول را به طور کامل سفارشی کنید.
- توضیحات بایگانی (Archive Description): توضیحات اصلی صفحه فروشگاه را نمایش می‌دهد.
- پس از اتمام طراحی، روی دکمه “انتشار” (Publish) کلیک کنید.
- در پنجره باز شده، روی “ADD CONDITION” (افزودن شرط) کلیک کنید. مطمئن شوید که شرط نمایش روی “Shop Page“ یا “All Product Archives“ تنظیم شده باشد و سپس “Save & Close“ را بزنید.
طراحی صفحه تکی محصول (Single Product Page)
این مرحله به شما اجازه می‌دهد تا صفحه‌ای که جزئیات یک محصول را نمایش می‌دهد، به صورت کامل سفارشی‌سازی کنید.
- دوباره به قالب‌ساز (Theme Builder) برگردید.
- این بار تب “محصول تکی” (Single Product) را انتخاب کرده و یک قالب جدید بسازید.
- در ویرایشگر المنتور، شما می‌توانید صفحه محصول خود را مانند لگو با ویجت‌های اختصاصی ووکامرس بسازید. ویجت‌های کلیدی عبارتند از:
- تصاویر محصول (Product Images): گالری تصاویر محصول را نمایش می‌دهد.
- عنوان محصول (Product Title): نام محصول را نمایش می‌دهد.
- قیمت محصول (Product Price): قیمت را نشان می‌دهد.
- افزودن به سبد خرید (Add to Cart): دکمه اصلی خرید.
- توضیحات کوتاه (Short Description): توضیحات خلاصه محصول.
- تب‌های اطلاعات محصول (Product Data Tabs): بخشی که شامل توضیحات کامل، نظرات و اطلاعات تکمیلی است.
- محصولات مرتبط (Related Products): محصولات مشابه را در پایین صفحه نمایش می‌دهد.
- این ویجت‌ها را بکشید و رها کنید و چیدمان دلخواه خود را بسازید. شما کنترل کاملی روی جایگاه، رنگ، فونت و استایل هر عنصر دارید.
- پس از اتمام، روی “Publish“ کلیک کنید. شرط نمایش را روی “Products“ تنظیم کنید تا این قالب برای تمام محصولات شما اعمال شود.
طراحی صفحات دیگر فروشگاه (سبد خرید، تسویه‌حساب)
شما می‌توانید فرآیند مشابهی را برای سفارشی‌سازی صفحات دیگر ووکامرس نیز طی کنید:
- صفحه سبد خرید (Cart Page): به قالب‌ساز > Cart بروید و با استفاده از ویجت “سبد خرید” (Cart) آن را طراحی کنید.
- صفحه تسویه‌حساب (Checkout Page): به قالب‌ساز > Checkout بروید و با ویجت “تسویه‌حساب” (Checkout) آن را طراحی کنید.
- صفحه حساب کاربری (My Account Page): به قالب‌ساز > My Account بروید و با ویجت “حساب کاربری من” (My Account) آن را طراحی کنید.
استفاده از ویجت‌های ووکامرس در صفحات دیگر
قدرت المنتور به قالب‌ساز محدود نمی‌شود. شما می‌توانید در هر صفحه‌ای (مانند صفحه اصلی سایت) از ویجت‌های ووکامرس استفاده کنید.
- مثال: صفحه اصلی سایت خود را با ویرایشگر استاندارد المنتور باز کنید. ویجت “محصولات” (Products) را از پنل ویجت‌ها بکشید و در صفحه رها کنید. حالا می‌توانید یک شبکه از جدیدترین محصولات، محصولات حراج‌شده یا محصولات یک دسته‌بندی خاص را در صفحه اصلی خود به نمایش بگذارید.
نتیجه گیری
ترکیب ووکامرس و المنتور پرو به شما قدرت بی‌نظیری می‌دهد. ووکامرس به عنوان موتور قدرتمند فروشگاه شما عمل می‌کند و المنتور پرو به شما این آزادی را می‌دهد که ویترین و تجربه خرید آن را دقیقاً مطابق با سلیقه و هویت برند خود، بدون نوشتن حتی یک خط کد، طراحی کنید.