آموزش سفارشی‌سازی صفحه فروشگاه ووکامرس با قالب آسترا؛ مدیریت نمایش محصولات بدون کدنویسی

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

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

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

چرا طراحی صفحه فروشگاه در قالب آسترا اهمیت دارد؟

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

قالب Astra امکاناتی در اختیار مدیران فروشگاه قرار می‌دهد تا بدون نیاز به تغییر مستقیم فایل‌های قالب، ساختار نمایش محصولات را مدیریت کنند.

مهم‌ترین مزایای سفارشی‌سازی این صفحه عبارت‌اند از:

• نمایش تعداد مناسبی از محصولات در هر ردیف

• ایجاد هماهنگی میان تصاویر و اطلاعات محصولات

• مدیریت تعداد محصولات قابل مشاهده در هر صفحه

• تنظیم محل نمایش قیمت و امتیاز کاربران

• بهبود نمایش فروشگاه در موبایل و تبلت

• ایجاد ظاهر یکپارچه با سایر بخش‌های سایت

پیش‌نیازهای شخصی‌سازی فروشگاه آسترا

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

برای استفاده از تنظیمات پیشرفته‌تر آسترا نیز می‌توانید افزونه Astra Pro را نصب کنید.

مراحل اولیه آماده‌سازی عبارت‌اند از:

1. نصب و فعال‌سازی قالب Astra

2. نصب افزونه WooCommerce

3. ایجاد محصولات و دسته‌بندی‌های فروشگاه

4. تعیین صفحه فروشگاه در تنظیمات ووکامرس

5. نصب و فعال‌سازی Astra Pro در صورت نیاز به امکانات حرفه‌ای

توجه داشته باشید که بسیاری از تنظیمات پایه فروشگاه در نسخه رایگان آسترا نیز در دسترس هستند؛ بنابراین برای تغییرات ساده الزاماً نیازی به خرید نسخه پرو نخواهید داشت.

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

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

نمایش ← سفارشی‌سازی ← ووکامرس

در نسخه انگلیسی این مسیر به شکل زیر است:

Appearance > Customize > WooCommerce

در این قسمت می‌توانید تنظیمات مربوط به صفحه فروشگاه و صفحات محصولات را مشاهده کنید.

برای مدیریت فهرست محصولات باید وارد بخش Product Catalog شوید. این قسمت تنظیمات اصلی مربوط به نمایش محصولات در صفحات فروشگاه و آرشیو دسته‌بندی‌ها را در اختیار شما قرار می‌دهد.

تنظیم تعداد ستون‌های محصولات در صفحه فروشگاه

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

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

برای تغییر این مقدار وارد تنظیمات Product Catalog شوید و گزینه Shop Columns را بررسی کنید.

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

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

تغییر تعداد محصولات در هر صفحه فروشگاه

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

در تنظیمات Product Catalog گزینه‌ای با عنوان Products Per Page وجود دارد که برای تعیین تعداد محصولات قابل نمایش در هر صفحه استفاده می‌شود.

برای مثال، می‌توانید تعداد محصولات را روی ۱۲، ۱۶ یا ۲۰ قرار دهید. انتخاب مقدار مناسب به تعداد کالاهای فروشگاه و سرعت بارگذاری تصاویر بستگی دارد.

مدیریت اطلاعات نمایش داده‌شده زیر محصولات

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

برای این کار می‌توانید گزینه Shop Product Structure را بررسی کنید. این تنظیمات به شما اجازه می‌دهند مشخص کنید کدام عناصر زیر تصویر یا عنوان محصول نمایش داده شوند.

برخی از عناصر قابل مدیریت عبارت‌اند از:

• عنوان محصول (Title)

• قیمت محصول (Price)

• امتیاز کاربران (Ratings)

• دسته‌بندی محصول (Category)

• دکمه افزودن به سبد خرید (Add to Cart)

• توضیحات کوتاه محصول (Short Description)

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

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

تغییر عرض صفحه فروشگاه و حذف سایدبار

گاهی ستون کناری فروشگاه فضای زیادی اشغال می‌کند و باعث می‌شود کارت‌های محصولات کوچک‌تر نمایش داده شوند. در چنین شرایطی می‌توانید سایدبار را حذف کنید یا عرض صفحه را تغییر دهید.

برای مدیریت این قسمت به مسیر زیر بروید:

نمایش ← سفارشی‌سازی ← تنظیمات عمومی ← سایدبار

در بخش WooCommerce می‌توانید یکی از حالت‌های زیر را انتخاب کنید:

• Default: استفاده از تنظیمات پیش‌فرض

• No Sidebar: نمایش فروشگاه بدون ستون کناری

• Left Sidebar: قرارگیری سایدبار در سمت چپ

• Right Sidebar: قرارگیری سایدبار در سمت راست

همچنین در بخش تنظیمات Container می‌توانید ساختار کلی نمایش محتوای فروشگاه را مدیریت کنید.

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

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

برای بهبود نمایش محصولات در موبایل پیشنهاد می‌شود:

1. تعداد ستون‌ها را متناسب با عرض نمایشگر انتخاب کنید.

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

3. اندازه عنوان و قیمت را خوانا نگه دارید.

4. فضای کافی برای دکمه افزودن به سبد خرید در نظر بگیرید.

5. از نمایش عناصر غیرضروری در کارت محصولات خودداری کنید.

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

جمع‌بندی

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

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