آموزش ساخت ویژگی های محصول پیشرفته در صفحه تکی محصول

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

در این آموزش از چند روش مختلف برای نمایش ویژگی ها استفاده می کنیم؛ از جمله نمایش جعبه ای، جدول مشخصات، جدول ساده و آکاردئونی. همچنین نحوه کنترل تعداد ویژگی های نمایش داده شده، استفاده از گزینه «مشاهده بیشتر»، نمایش تولتیپ برای اطلاعات طولانی و تنظیم نمایش ویژگی ها در موبایل و تبلت را بررسی خواهیم کرد.

پیش نیازهای آموزش

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

همچنین صفحه تکی محصول باید با Elementor طراحی شده باشد تا بتوانیم ویجت ویژگی های محصول را در محل موردنظر قرار دهیم.

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

مرحله اول: ایجاد ویژگی های محصول در ووکامرس

اولین مرحله برای ساخت بخش مشخصات فنی، ایجاد ویژگی های محصول در ووکامرس است.

برای این کار از پیشخوان وردپرس وارد بخش:

محصولات > ویژگی ها

شوید.

در این قسمت می توانید ویژگی هایی مانند موارد زیر ایجاد کنید:

• پردازنده
• حافظه رم
• حافظه داخلی
• اندازه صفحه نمایش
• وزن
• ابعاد
• جنس
• رنگ
• سیستم عامل

برای مثال اگر قصد داریم برای یک محصول مشخصات فنی تعریف کنیم، می توانیم ویژگی «حافظه رم» را ایجاد کرده و مقدارهای موردنظر را برای آن تعریف کنیم.

پس از ایجاد ویژگی ها، باید آنها را به محصول اختصاص دهید.

مرحله دوم: اضافه کردن ویژگی ها به محصول

حالا وارد ویرایش محصول موردنظر شوید.

در صفحه ویرایش محصول، به بخش ویژگی ها بروید. در این قسمت می توانید ویژگی هایی را که قبلا ایجاد کرده اید به محصول اضافه کنید.

برای مثال می توانیم ویژگی های زیر را برای یک لپ تاپ قرار دهیم:

ویژگی	مقدار
پردازنده	Intel Core i۷
حافظه رم	۱۶ گیگابایت
حافظه داخلی	۱ ترابایت SSD
اندازه صفحه نمایش	۱۵.۶ اینچ
وزن	۱.۸ کیلوگرم
سیستم عامل	Windows ۱۱

پس از اضافه کردن ویژگی ها، تغییرات محصول را ذخیره کنید.

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

مرحله سوم: باز کردن قالب صفحه تکی محصول در المنتور

حالا باید به سراغ طراحی صفحه محصول برویم.

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

محلی را که می خواهید مشخصات فنی محصول در آن نمایش داده شود مشخص کنید.

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

در این قسمت قرار است ویجت ویژگی های محصول را اضافه کنیم تا اطلاعات ثبت شده در ووکامرس به صورت داینامیک نمایش داده شوند.

مرحله چهارم: اضافه کردن ویجت ویژگی های محصول

ابتدا افزونه نمایش پیشرفته ویژگی های محصول ووکامرس را دانلود و نصب کرده و سپس وارد ویرایشگر المنتور شوید، ویجت مربوط به نمایش ویژگی های محصول (ووکامرس پلاس) را پیدا کنید و آن را در محل موردنظر قرار دهید.

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

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

مرحله پنجم: انتخاب نوع نمایش ویژگی های محصول

یکی از مهم ترین تنظیمات ویجت، انتخاب پوسته نمایشی است.

برای نمایش مشخصات محصول چهار حالت اصلی در اختیار دارید:

1. جعبه ای یا Grid
2. جدولی
3. جدول ساده
4. آکاردئونی

انتخاب هر حالت به تعداد ویژگی ها و نوع محصول شما بستگی دارد.

نمایش جعبه ای یا Grid

در حالت جعبه ای، هر ویژگی به صورت یک آیتم مستقل نمایش داده می شود.

برای مثال:

پردازنده
Intel Core i۷

حافظه رم
۱۶ گیگابایت

حافظه داخلی
۱ ترابایت SSD

این حالت برای زمانی مناسب است که مقدار ویژگی ها کوتاه باشد و بخواهید مشخصات محصول ظاهر بصری بیشتری داشته باشند.

نمایش ویژگی ها به صورت جدول

اگر محصول شما مشخصات فنی زیادی دارد، حالت جدولی می تواند اطلاعات را منظم تر نمایش دهد.

در این حالت نام ویژگی و مقدار آن در کنار یکدیگر قرار می گیرند.

برای مثال:

نام ویژگی	مقدار
پردازنده	Intel Core i۷
حافظه رم	۱۶ گیگابایت
حافظه داخلی	۱ ترابایت SSD
وزن	۱.۸ کیلوگرم

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

استفاده از جدول ساده

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

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

نمایش آکاردئونی ویژگی ها

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

در این شرایط می توانید از حالت آکاردئونی استفاده کنید.

کاربر ابتدا بخش های موردنظر را مشاهده می کند و با باز کردن هر قسمت، اطلاعات مربوط به آن را می بیند.

این روش برای محصولاتی که مشخصات زیادی دارند می تواند به مدیریت بهتر فضای صفحه کمک کند.

مرحله ششم: محدود کردن تعداد ویژگی های نمایش داده شده

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

در تنظیمات ویجت می توانید تعداد ویژگی های قابل نمایش را محدود کنید.

برای مثال می توانید مشخص کنید که در ابتدا فقط ۵ ویژگی نمایش داده شود.

سایر ویژگی ها می توانند پشت گزینه «مشاهده بیشتر» قرار بگیرند.

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

مرحله هفتم: نمایش اطلاعات طولانی با تولتیپ

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

برای چنین مواردی می توانید از Tooltip استفاده کنید.

در این روش مقدار ویژگی به صورت خلاصه نمایش داده می شود و کاربر با قرار دادن نشانگر موس روی آن می تواند اطلاعات کامل را مشاهده کند.

این قابلیت برای ویژگی هایی که توضیحات طولانی دارند کاربرد بیشتری دارد.

مرحله هشتم: تنظیم لودینگ اسکلتی

در برخی شرایط ممکن است اطلاعات ویژگی های محصول هنگام بارگذاری صفحه با کمی تاخیر نمایش داده شوند.

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

Skeleton Loading یک ساختار موقت است که قبل از نمایش کامل اطلاعات در محل مشخصات محصول قرار می گیرد.

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

مرحله نهم: تنظیم نمایش ویژگی ها در موبایل و تبلت

نمایش مشخصات فنی در موبایل اهمیت زیادی دارد.

یک جدول که در صفحه دسکتاپ به خوبی نمایش داده می شود، ممکن است در صفحه کوچک موبایل باعث فشرده شدن محتوا شود.

به همین دلیل تنظیمات مربوط به نمایش در دستگاه های مختلف را بررسی کنید.

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

در برخی حالت های نمایش نیز امکان استفاده از سوایپ افقی وجود دارد.

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

مرحله دهم: نمایش اطلاعات تکمیلی در مودال

گاهی تمام اطلاعات محصول را نمی خواهید مستقیما در صفحه اصلی نمایش دهید.

در این حالت می توانید اطلاعات تکمیلی را در یک Modal نمایش دهید.

مودال می تواند شامل بخش هایی مانند موارد زیر باشد:

• جدول مشخصات
• بررسی تخصصی کالا
• معرفی کالا

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

مرحله یازدهم: نمایش متن اختصاصی برای محصولات و دسته بندی ها

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

برای مثال ممکن است بخواهید برای یک دسته خاص، توضیح یا پیام متفاوتی نمایش دهید.

در این ابزار امکان استفاده از شورت کدهای اختصاصی برای نمایش متن های داینامیک وجود دارد.

برای نمونه می توان از شورت کدهایی مانند:

[mt_product_info_text]

و

[mt_category_return_text]

استفاده کرد.

این روش امکان نمایش محتوای متفاوت برای محصولات یا دسته بندی های مختلف را فراهم می کند.

یک نمونه ساختار برای بخش مشخصات فنی محصول

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

عنوان محصول

تصویر و اطلاعات اصلی محصول

قیمت و وضعیت خرید

توضیحات محصول

مشخصات فنی

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

اگر تعداد مشخصات زیاد باشد، می توانیم تعداد اولیه ویژگی ها را محدود کرده و گزینه «مشاهده بیشتر» را فعال کنیم.

برای اطلاعات طولانی نیز می توانیم از Tooltip استفاده کنیم.

تفاوت ویژگی محصول با محصولات متغیر ووکامرس

هنگام کار با ویژگی های محصول، یک نکته مهم را باید در نظر داشته باشید.

ویژگی محصول با متغیر محصول (Variation) یکسان نیست.

برای مثال مشخصات زیر صرفا اطلاعات محصول هستند:

• وزن: ۵۰۰ گرم
• جنس: فلز
• ابعاد: ۲۰ × ۱۰ سانتی متر

اما اگر کاربر بتواند رنگ یا سایز محصول را انتخاب کند و این انتخاب روی قیمت، موجودی یا وضعیت محصول تاثیر بگذارد، با یک محصول متغیر و متغیرهای ووکامرس سروکار داریم.

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

جمع بندی

در این آموزش ابتدا ویژگی های محصول را در ووکامرس ایجاد کردیم، آنها را به محصول اختصاص دادیم و سپس با استفاده از المنتور ، بخش مشخصات فنی را در صفحه تکی محصول قرار دادیم.

بعد از اضافه کردن ویجت، می توان نحوه نمایش ویژگی ها را تغییر داد و از حالت های مختلف مانند جعبه ای، جدولی، جدول ساده و آکاردئونی استفاده کرد.

همچنین می توان تعداد ویژگی های قابل مشاهده را محدود کرد، گزینه «مشاهده بیشتر» را فعال کرد، برای مقادیر طولانی Tooltip قرار داد و نمایش بخش مشخصات را برای موبایل و تبلت تنظیم کرد.

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

سوالات متداول