جدول محتوایی
آموزش ساخت صفحه فروشگاهی زیبا برای ووکامرس در 5 مرحله
مقدمه
به دنبال ساده ترین راه برای سفارشی کردن صفحه فروشگاهی ووکامرس خود هستید؟ 🤔
وردپرس طیف گسترده ای از بلوک ها را برای کمک به ایجاد وب سایت های حرفه ای ارائه می دهد. اگر از WooCommerce استفاده می کنید، به بلوک های اختصاصی ان نیز دسترسی خواهید داشت که می توانید برای فروشگاه آنلاین خود استفاده کنید.
بنابراین، ممکن است تعجب کنید که چگونه از این عناصر برای ایجاد یک صفحه فروشگاه WooCommerce استفاده کنید که باعث ایجاد تبدیل می شود.
خوشبختانه این فرآیند بسیار ساده است. با استفاده از این بلوک ها، WooCommerce شما میتوانید محصولات خود را به روش های مختلف نمایش دهید. علاوه بر این، میتوانید فیلترها و عملکردهای جستجو را اضافه کنید تا مرور فروشگاه شما برای کاربران آسان‌تر شود.
👉 در این مقاله به شما نشان خواهیم داد که چگونه با استفاده از بلوک ها یک صفحه فروشگاهی زیبای ووکامرس ایجاد کنید. شما می توانید دستورالعمل های ما را دنبال کنید و بسته به نیاز خود بلوک هایی را که می خواهید استفاده کنید انتخاب کنید. بیا شروع کنیم!
پیش از ادامه ی مقاله ، در صورت نیاز به هاست ووکامرس به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
آموزش ساخت صفحه فروشگاهی زیبا برای ووکامرس در 5 مرحله
برای شروع، باید ویرایشگر صفحه فروشگاهی ووکامرس خود را باز کنید. سپس، این دستورالعمل ها را برای سفارشی کردن محتوای آن دنبال کنید.
1. بلوک همه محصولات را جایگذاری کنید
صفحات فروشگاه در اشکال و اندازه های مختلف موجود اند. در یک فروشگاه آنلاین، این صفحه معمولاً تمام محصولاتی را که برای فروش دارید نمایش می دهد.
کاربران می‌توانند روی آیتم‌های جداگانه کلیک کنند تا صفحات محصول مربوطه خود را باز کنند یا مستقیماً آنها را به سبد خرید خود اضافه کنند (اگر فروشگاه اجازه می‌دهد):
با وردپرس و ووکامرس، کنترل کاملی بر روی عناصری که باید در صفحه فروشگاه خود بگنجانید، دارید. ظاهر و احساس این صفحه به موضوعی که استفاده می کنید و نحوه پیکربندی آن بستگی دارد.
وقتی شروع به استفاده از افزونه می کنید، WooCommerce به طور خودکار یک صفحه فروشگاه راه اندازی می کند، بنابراین می توانید ادامه دهید و ببینید صفحه شما چگونه است. هنگامی که برای ویرایش آن آماده شدید، به صفحات (Pages ) بروید و گزینه فروشگاه (shop) را پیدا کنید.
این صفحه را در Block Editor باز کنید، و باید چیزی شبیه به این را ببینید:
به طور پیش فرض، صفحه فروشگاه شامل بلوک همه محصولات (All Products) و یک هدر است. اگر این بلوک را نمی‌بینید، میتوانید با کلیک بر روی علامت مثبت (+) و انتخاب آن از لیست گزینه‌ها، آن را به صفحه اضافه کنید:
بلوک همه محصولات (All product) شبکه‌ای را نشان می‌دهد که شامل تمام محصولات فروشگاه شما، سفارش‌داده‌شده از جدید به قدیمی است. برای تغییر ترتیب نمایش محصولات خود، روی بلوک کلیک کرده و به پنل تنظیمات در سمت راست بروید. سپس، به بخش تنظیمات محتوا (Content Settings) بروید و اولویت خود را از منوی سفارش محصولات بر اساس، (Order Products By ) انتخاب کنید:
در همین حال، در قسمت تنظیمات چیدمان(Layout Settings)، میتوانید تعداد ستون‌ها و ردیف‌هایی را که می‌خواهید در شبکه محصول نمایش داده شوند، انتخاب کنید. به راحتی می توانید سایر گزینه های موجود با این بلوک را بررسی کنید.
2. بلوک های محصول ویژه و/یا محصولات دستچین شده را اضافه کنید
بسیاری از صفحات فروشگاهی محصولات خاصی را برجسته می کنند. اینها معمولاً مواردی هستند که صاحبان فروشگاه می خواهند توجه را به آنها جلب کنند، مانند اجناس جدید یا تخفیف خورده یا محصولات اخیراً اضافه شده. WooCommerce دارای یک بلوک محصول ویژه است که به شما امکان می دهد هر موردی را در فروشگاه خود به نمایش بگذارید.
هنگامی که این بلوک را در صفحه خود قرار دادید، باید محصول مورد نظر خود را انتخاب کنید و روی Done کلیک کنید:
سپس ووکامرس تصویر محصول، نام، قیمت، توضیحات و تماس برای اقدام (CTA) را نمایش می دهد. بلوک باید چیزی شبیه به این باشد:
سپس می توانید این بلوک را به دلخواه شخصی سازی کنید. به عنوان مثال، ممکن است تصویر را تغییر دهید و دکمه CTA را تغییر دهید.
نقطه ضعف اضافه کردن بلوک محصولات ویژه (Featured Product)به صفحه فروشگاه ووکامرس شما این است که می تواند توجه کاربران را از بقیه محصولات شما منحرف کند. برای مقابله با این، پیشنهاد می‌کنیم از ستون‌ها برای نمایش چندین محصول برجسته در کنار هم استفاده کنید:
جایگزینی برای بلوک محصولات ویژه گزینه Hand- Picked Products است. این بلوک شما را قادر می سازد تا چندین محصول را انتخاب کرده و در کنار هم نمایش دهید. از همان سبک بلوک همه محصولات(All Products) استفاده می کند:
هر دو بلوک محصولات ویژه(Hand-Picked Products) و محصولات دستچین شده(Featured Products) اهداف مشابهی را انجام می دهند.
در حالت ایده‌آل، یکی از دو گزینه را انتخاب می‌کنید تا بازدیدکنندگان را با آیتم‌های ویژه بیش از حد غرق نکنید. همچنین توصیه می کنیم این بلوک ها را در بالای صفحه قرار دهید تا کاربران نتوانند آنها را از دست بدهند.
3. فعال سازی جستجوی محصول در صفحه فروشگاهی
اگر فروشگاهی با کاتالوگ محصولات بزرگ دارید، باید یک ویژگی جستجو ارائه دهید.
به این ترتیب، کاربران می توانند بدون نیاز به مرور کل فروشگاه، به دنبال موارد خاصی باشند که در ذهن داشتند.
هنگامی که یک بلوک جستجو را به صفحه فروشگاه خود اضافه می کنید، باید به دنبال گزینه جستجوی محصول باشید، نه بلوک جستجوی پیش فرض وردپرس. جستجوی محصول نتایج را به محصولات WooCommerce محدود می کند، در حالی که بلوک جستجوی دیگر شامل تمام صفحات دیگر در سایت شما می شود.
تابع جست و جوی ووکامرس به شکل زیر است:
به خاطر داشته باشید که بلوک جستجوی محصول در ویرایشگر کار نمی کند، بنابراین باید آن را در قسمت جلویی تست کنید.
علاوه بر این، بلوک قابلیت تکمیل خودکار را ارائه نمی دهد، بنابراین کاربران باید یک پرس و جو کامل را تایپ کنند و صفحه جدیدی را بارگذاری کنند تا نتایج را ببینند.
4. از بلوک های Featured Category استفاده کنید
با این کار، علاوه بر اینکه کاربران را به سمت محصولات دستچین شده راهنمایی می کنید، ممکن است بخواهید دسته بندی محصولات خاصی را نیز برجسته کنید.
اگر چندین نوع محصول را بفروشید، می تواند تاثیر مثبتی داشته باشد، زیرا به کاربران امکان می دهد در یک بخش خاص به دنبال اقلام بگردند.
با افزودن بلوک Featured Category به صفحه فروشگاهی ووکامرس خود شروع کنید. سپس، دسته محصولی را که می خواهید برجسته کنید انتخاب کنید و روی Done کلیک کنید:
بلوک دسته ویژه یا featured category به شکل زیر است:
بلوک به شما امکان می دهد رنگ پس زمینه و متن را تغییر دهید، اما گزینه های سفارشی سازی اضافی زیادی را ارائه نمی دهد. علاوه بر این، از آنجایی که بلوک فضای زیادی را اشغال می کند، توصیه می کنیم چندین دسته بندی برجسته را در کنار یکدیگر با استفاده از ستون ها قرار دهید:
از آنجایی که بلوک دسته بندی محصولات ویژه بسیار ابتدایی است، توصیه می کنیم برای سفارشی سازی بیشتر به افزونه هایی مانند Otter Blocks مراجعه کنید:
با Otter Blocks، میتوانید بلوک‌های WooCommerce را با افزودن انیمیشن‌ها و سایر تنظیمات دید تغییر دهید:
علاوه بر این، Otter Blocks انواع بلوک های جدید را اضافه می کند که می توانید در فروشگاه آنلاین خود استفاده کنید.
این موارد شامل گزینه‌هایی مانند پنجره‌های بازشو (که برای جمع‌آوری ثبت نام ایمیل مناسب هستند) و بررسی محصول است.
5. افزودن گزینه ی فیلتر محصولات بر اساس قیمت
تا کنون، فروشگاه شما دارای یک نوار جستجو، محصولات دستچین شده، دسته بندی های ویژه و کل کاتالوگ محصولات شما است.
تنها چیزی که از دست می دهید راهی برای فیلتر کردن محصولات توسط کاربران است.
بلوک فیلتر محصولات بر اساس قیمت، مشتریان را قادر می‌سازد تا این کار را انجام دهید. این بلوک یک نوار لغزنده نمایش می دهد که به مشتریان امکان می دهد حداقل و حداکثر قیمت را برای محصولاتی که می خواهند ببینند تعیین کنند:
مقادیر قیمت قابل ویرایش نیستند -و به قیمت محصولات شما بستگی دارند.
بازدیدکنندگان می توانند مقادیر مورد نظر خود را تایپ کنند یا از نوار لغزنده برای تغییر آنها استفاده کنند.
وقتی تغییراتی را در نوار لغزنده قیمت ایجاد می‌کنید، بلوک همه محصولات به‌روزرسانی می‌شود تا محصولاتی را که دارای معیارها هستند نشان دهد. این بدون نیاز به بارگیری مجدد صفحه توسط کاربران انجام می شود.
تا جایی که ممکن است، توصیه می کنیم بلوک فیلتر محصولات بر اساس قیمت را در بالای کاتالوگ محصولات خود اضافه کنید. به این ترتیب، کاربران آن را در حین اسکرول کردن صفحه مشاهده خواهند کرد.
همچنین میتوانید به کاربران اجازه دهید محصولات را بر اساس اندازه، رنگ و سایر ویژگی‌ها فیلتر کنند. بلوک Filter Products by Attribute به شما امکان می دهد محصولاتی را که دارای ویژگی انتخابی هستند، بر اساس گزینه های موجود در فروشگاه خود مرور کنید.
و تقریباً همین است! 🤩 وقتی کارتان تمام شد، مطمئن شوید که تغییرات خود را ذخیره کرده اید و صفحه فروشگاه جدید شما بلافاصله شروع به کار می کند.
موفق باشید!