آموزش طراحی صفحه محصول ووکامرس با المنتور (بدون کد نویسی)
صفحه محصول یکی از مهمترین بخشهای هر فروشگاه اینترنتی است؛ زیرا کاربر در این صفحه با اطلاعات اصلی محصول روبهرو میشود و معمولاً تصمیم نهایی خود برای خرید را در همین بخش میگیرد.
به همین دلیل، طراحی صفحه محصول ووکامرس فقط به نمایش عنوان، تصویر و قیمت محصول محدود نمیشود. یک صفحه محصول حرفهای باید بتواند اطلاعات موردنیاز مشتری را به شکل منظم و قابل فهم نمایش دهد و در عین حال تجربه کاربری مناسبی در دسکتاپ و موبایل ایجاد کند.
در این آموزش ویدیویی که مدرس آن مهندس محمد رحیمی می باشد، نحوه طراحی صفحه محصول ووکامرس با المنتور را بررسی کرده ایم و تا ببینیم چگونه میتوان با استفاده از ویجت های آماده مجموعه ووکامرس پلاس، بخش های مختلف یک صفحه تکی محصول را طراحی و شخصیسازی کرد.
هدف آموزش این است که با ساختار کلی یک Single Product Page آشنا شوید و یاد بگیرید چگونه یک قالب محصول حرفهای برای فروشگاه ووکامرسی خود ایجاد کنید.
صفحه محصول ووکامرس چیست؟
صفحه محصول ووکامرس یا WooCommerce Product Page همان صفحهای است که اطلاعات یک محصول مشخص در آن نمایش داده میشود.
برای مثال، زمانی که کاربر وارد صفحه یک گوشی موبایل، لپ تاپ، لباس، لوازم خانگی یا هر محصول دیگری در فروشگاه میشود، اطلاعات مربوط به همان محصول در این صفحه قرار میگیرد.
این اطلاعات میتواند شامل موارد مختلفی مانند:
- تصویر و گالری محصول
- نام و عنوان محصول
- قیمت
- وضعیت موجودی
- توضیحات
- ویژگیها و مشخصات
- انتخاب متغیرهای محصول
- دکمه افزودن به سبد خرید
- امتیاز و نظرات کاربران
- محصولات مرتبط
- و سایر اطلاعات مربوط به محصول
باشد.
از آنجا که اطلاعات محصولات مختلف با یکدیگر متفاوت هستند، صفحه محصول باید بهصورت داینامیک طراحی شود؛ یعنی یک ساختار کلی ایجاد کنیم و اطلاعات هر محصول بهصورت خودکار در همان ساختار نمایش داده شود.
طراحی صفحه محصول ووکامرس با المنتور چه مزایایی دارد؟
در حالت پیشفرض، ظاهر صفحه محصول تا حد زیادی به قالب وردپرس و ساختار فروشگاه وابسته است. اما با استفاده از ابزارهای طراحی مناسب میتوان کنترل بیشتری روی ظاهر و چیدمان صفحه داشت.
Elementor یکی از ابزارهایی است که امکان طراحی بصری بخشهای مختلف سایت را فراهم میکند و در کنار قابلیتهای ووکامرس میتوان از آن برای ساخت و شخصیسازی قالب صفحه محصول استفاده کرد.
با استفاده از این روش میتوان ساختار صفحه محصول را متناسب با طراحی فروشگاه تغییر داد و بخشهای مختلف را در جای مناسب خود قرار داد.
برای مثال میتوان یک ساختار دو ستونه ایجاد کرد که در یک سمت تصاویر محصول و در سمت دیگر اطلاعات اصلی محصول قرار داشته باشد و در ادامه نیز بخشهای تکمیلی مانند توضیحات، مشخصات، نظرات و محصولات مرتبط نمایش داده شوند.
آموزش طراحی صفحه محصول ووکامرس با المنتور در چند قدم ساده:
برای ساخت صفحه تکی محصول ووکامرس با المنتور ابتدا باید یک قالب برای صفحه تکی محصول بسازیم؛ کافیست از مسیر المنتور ← قالبها ← افزودن قالب جدید، انتخاب محصول تکی (Single Product) قالب را ایجاد کرده و سپس باید ویجت های ووکامرس پلاس را وارد صفحه کنیم
- ورود به المنتور ← قالبها
- انتخاب افزودن قالب جدید
- انتخاب محصول تکی (Single Product)
- طراحی ساختار صفحه محصول
- استفاده از ویجتهای ووکامرس پلاس
- شخصی سازی بخشهای مختلف صفحه محصول
طراحی صفحه تکی محصول ووکامرس با ویجتهای آماده
یکی از موضوعات مهم در این آموزش، استفاده از ویجتهای آماده ووکامرس پلاس برای ساخت بخشهای مختلف صفحه محصول است.
به جای اینکه تمام قسمتهای صفحه را از ابتدا طراحی یا برای هر بخش کدنویسی کنیم، میتوان از ویجت های آماده استفاده کرد و آن ها را در ساختار صفحه قرار داد.
این روش باعث میشود فرآیند طراحی صفحه محصول سادهتر و سریع تر شود و در عین حال امکان شخصیسازی ظاهر بخشهای مختلف نیز وجود داشته باشد.
در واقع، هدف این است که از ویجتهای موجود بهعنوان اجزای مختلف صفحه استفاده کنیم و با ترکیب آن ها یک صفحه محصول حرفهای ووکامرس ایجاد کنیم.
چه بخشهایی را میتوان در صفحه محصول ووکامرس طراحی کرد؟
صفحه محصول بسته به نوع فروشگاه و نوع کالا میتواند ساختارهای متفاوتی داشته باشد.
در یک فروشگاه ممکن است نمایش قیمت و تصاویر اهمیت بیشتری داشته باشد و در فروشگاهی دیگر مشخصات فنی، ویژگیهای محصول یا نظرات کاربران اهمیت بیشتری پیدا کند.
بهطور کلی میتوان بخشهایی مانند موارد زیر را در صفحه محصول طراحی کرد:
- گالری و تصاویر محصول با استفاده از افزونه گالری تصاویر محصولات ووکامرس برای المنتور
- عنوان و نام محصول
- قیمت محصول
- وضعیت موجودی
- اطلاعات و متادیتای محصول
- توضیحات کوتاه
- ویژگیهای محصول با استفاده از افزونه نمایش پیشرفته ویژگی های محصول ووکامرس
- محصولات متغیر
- انتخاب رنگ و سایز با استفاده از افزونه افزودن به سبد خرید ایجکس ووکامرس | کارتیجکس
- تعداد محصول
- افزودن به سبد خرید
- توضیحات کامل محصول
- امتیاز محصول
- نظرات کاربران با استفاده از افزونه نظرات مشتریان ووکامرس مشابه دیجی کالا
- محصولات مرتبط
- محصولات مشابه
- سایر اطلاعات موردنیاز فروشگاه
البته قرار نیست تمام این بخشها در همه فروشگاهها به یک شکل استفاده شوند.
یکی از اصول مهم در طراحی صفحه محصول فروشگاهی این است که ساختار صفحه بر اساس نوع محصول و نیاز کاربران فروشگاه انتخاب شود.
طراحی صفحه محصول حرفهای ووکامرس
یک صفحه محصول حرفهای فقط به ظاهر زیبا محدود نمیشود.
مهم است که کاربر بتواند در کوتاهترین زمان اطلاعات موردنیاز خود را پیدا کند و مسیر خرید برای او واضح باشد.
به همین دلیل هنگام طراحی صفحه محصول باید به مواردی مانند سلسلهمراتب اطلاعات، فاصله بین بخشها، خوانایی متنها، تصاویر محصول، جایگاه قیمت، وضعیت موجودی و محل قرارگیری دکمه خرید توجه شود.
به عنوان مثال، اطلاعاتی که برای تصمیمگیری کاربر اهمیت بیشتری دارند باید در قسمتهای قابل مشاهدهتری قرار بگیرند و اطلاعات تکمیلی میتوانند در بخشهای پایینتر صفحه نمایش داده شوند.
طراحی صفحه محصول ووکامرس برای موبایل
امروزه بخش قابل توجهی از کاربران فروشگاههای اینترنتی از طریق موبایل وارد صفحات محصولات میشوند.
بنابراین طراحی ریسپانسیو صفحه محصول ووکامرس اهمیت زیادی دارد.
صفحهای که در دسکتاپ ظاهر مناسبی دارد، ممکن است در موبایل به دلیل اندازه تصاویر، فاصله عناصر، طول عنوان یا نحوه نمایش اطلاعات، تجربه کاربری مناسبی ایجاد نکند.
در طراحی صفحه محصول باید نمایش بخشهای مختلف در اندازههای مختلف صفحه بررسی شود.
به همین دلیل در فرآیند طراحی با المنتور میتوان نحوه نمایش بخشهای مختلف را برای دسکتاپ، تبلت و موبایل بررسی و تنظیم کرد.
آموزش ثابت کردن کانتیر در نسخه موبایل و تبلت :
کافیست که کانتینری که میخواهید در حالت ریسپانسیو ثابت بماند را انتخاب کرده و از بخش تنظیمات وارد بخش CSS سفارشی شده و کدهای زیر را داخل باکس کدهای سفارشی وارد کنید :
@media (max-width: ۱۰۲۴px) {
selector {
position: fixed;
top: ۰;
left: ۰;
width: ۱۰۰%;
z-index: ۰;
}
}طراحی صفحه محصول برای محصولات ساده و متغیر
محصولات ووکامرس میتوانند ساختارهای مختلفی داشته باشند.
برخی محصولات ساده هستند و تنها یک حالت برای خرید دارند، اما برخی دیگر دارای ویژگیهایی مانند رنگ، سایز، حافظه، ظرفیت یا مدلهای مختلف هستند.
به این محصولات، محصولات متغیر یا Variable Products گفته میشود.
بنابراین هنگام طراحی صفحه محصول باید ساختار صفحه به شکلی باشد که بتواند اطلاعات و گزینههای موردنیاز انواع محصولات را نمایش دهد.
این موضوع بهخصوص برای فروشگاههایی که تعداد زیادی محصول متغیر دارند اهمیت بیشتری پیدا میکند.
شخصی سازی و ویرایش صفحه محصول ووکامرس
یکی از مهمترین دلایل استفاده از ابزارهای طراحی صفحه محصول، امکان شخصی سازی صفحه محصول ووکامرس است.
هر فروشگاه میتواند سبک طراحی متفاوتی داشته باشد.
برای مثال یک فروشگاه لوازم دیجیتال ممکن است به فضای بیشتری برای مشخصات فنی نیاز داشته باشد، در حالی که یک فروشگاه پوشاک ممکن است تمرکز بیشتری روی تصاویر، رنگ و سایز داشته باشد.
بنابراین بهتر است ساختار صفحه محصول بر اساس نیاز همان فروشگاه طراحی شود.
با استفاده از ویجتهای آماده میتوان بخشهای مختلف را در کنار یکدیگر قرار داد و ظاهر صفحه را مطابق طراحی سایت شخصیسازی کرد.
طراحی صفحه محصول بدون کدنویسی
یکی از مزیتهای استفاده از ابزارهای بصری مانند المنتور این است که بسیاری از مراحل طراحی را میتوان بدون نوشتن کدهای پیچیده انجام داد.
در این روش، طراحی صفحه بیشتر بر پایه ساختار بصری، قرار دادن ویجتها و تنظیم ظاهر بخشهای مختلف انجام میشود.
به همین دلیل افرادی که با المنتور کار میکنند میتوانند به جای طراحی تمام بخشهای صفحه محصول از صفر، از ابزارها و ویجت های آماده استفاده کرده و زمان بیشتری را صرف طراحی تجربه کاربری و ظاهر نهایی صفحه کنند.
آموزش طراحی صفحه محصول ووکامرس با ووکامرس پلاس
در این آموزش ویدیویی، تمرکز اصلی روی طراحی صفحه تکی محصول ووکامرس با المنتور و استفاده از ویجتهای آماده مجموعه ووکامرس پلاس است.
در طول آموزش، بهصورت کلی با ساختار صفحه محصول و نحوه قرارگیری بخشهای مختلف آن آشنا میشویم و یاد میگیریم چگونه از ویجتهای آماده برای ایجاد یک طراحی منظم و کاربردی استفاده کنیم.
هدف این آموزش صرفاً ساخت یک صفحه برای یک محصول خاص نیست؛ بلکه میخواهیم با منطق طراحی یک قالب Single Product آشنا شویم تا بتوانیم همین ساختار را برای محصولات مختلف فروشگاه استفاده کنیم.
جمعبندی؛ طراحی صفحه محصول ووکامرس با المنتور
صفحه محصول یکی از مهمترین صفحات هر فروشگاه اینترنتی است و طراحی صحیح آن میتواند تأثیر زیادی روی تجربه کاربری و مسیر خرید داشته باشد.
با استفاده از WooCommerce، Elementor و ویجتهای آماده ووکامرس پلاس میتوان به جای محدود شدن به ظاهر پیشفرض قالب، ساختار صفحه محصول را متناسب با نیاز فروشگاه طراحی و شخصیسازی کرد.
در این آموزش تلاش میکنیم به جای تمرکز روی یک محصول خاص، منطق کلی طراحی Single Product ووکامرس را بررسی کنیم؛ از ساختار اصلی صفحه گرفته تا نمایش اطلاعات محصول، بخشهای خرید، مشخصات، نظرات و سایر قسمتهایی که میتوانند در یک صفحه محصول حرفهای مورد استفاده قرار بگیرند.
اگر قصد دارید صفحه محصول ووکامرس را با المنتور طراحی کنید و از ویجتهای آماده ووکامرس پلاس برای ساخت یک صفحه محصول مدرن و ریسپانسیو استفاده کنید، این آموزش میتواند دید مناسبی برای شروع طراحی قالب محصولات فروشگاه در اختیار شما قرار دهد.