فهرست مطالب
ساخت بخش فروشندگان در صفحه محصول (مشابه دیجی کالا)، یکی از حرفهایترین قابلیتها در فروشگاههای آنلاین است که بهطور مستقیم بر افزایش اعتماد مشتری و بهبود نرخ تبدیل تأثیر میگذارد. در این قسمت از آموزش طراحی سایت فروشگاهی به شما آموزش میدهیم که چگونه با استفاده از المنتور پرو و افزونه قدرتمند جت انجین، این بخش حیاتی را برای سایت فروشگاهی ووکامرس خود طراحی و پیادهسازی کنید.
مزایای ساخت بخش فروشندگان در صفحه تکی محصول
ساخت بخش فروشندگان در صفحه تکی محصول، به شما امکان میدهد اطلاعات مهمی مانند نام فروشنده منتخب، درصد رضایت از کالا و عملکرد فروشنده را به کاربران نمایش دهید. این قابلیت که در سایتهای بزرگ مانند دیجیکالا و آمازون رایج است، به افزایش اعتماد مشتری کمک کرده و کاربران را برای خرید سریعتر ترغیب میکند. با استفاده از المنتور پرو و افزونه جت انجین، میتوانیم بدون نیاز به کدنویسی پیچیده، این بخش را بهصورت کاملاً پویا و حرفهای طراحی کنیم. این آموزش جامع از دوره آموزش طراحی سایت شبیه دیجی کالا با المنتور به شما نشان میدهد که چگونه از مزایای این ویژگی بهرهمند شوید و یک تجربه کاربری شبیه به سایتهای بزرگ فروشگاهی ایجاد کنید.
مزایای استفاده از فیلدهای سفارشی و متاباکس جت انجین
متاباکس (Meta Box) در واقع یک جعبه یا بخش اطلاعات اضافی است که در صفحه ویرایش محتوای شما (مانند پستها، محصولات و…) نمایش داده میشود. افزونه جت انجین یکی از قدرتمندترین ابزارها برای ساخت متاباکس و فیلدهای سفارشی است. به صورت پیشفرض، ووکامرس فقط اطلاعات پایهای مانند عنوان و قیمت را ذخیره میکند، اما با قابلیت متاباکس جت انجین، شما میتوانید دادههای سفارشی جدیدی را به محصولات خود اضافه کنید. این دادهها میتوانند شامل اطلاعاتی مانند نام فروشنده منتخب، میزان رضایت از کالا یا عملکرد فروشنده باشند.
- انعطافپذیری بالا: با جت انجین میتوانید انواع فیلدهای سفارشی با فرمتهای مختلف (متن، عدد، انتخاب، تصویر و…) ایجاد کنید.
- سازگاری کامل: جت انجین به صورت انحصاری برای المنتور طراحی شده و هماهنگی بینظیری با آن دارد. این به شما اجازه میدهد فیلدهای سفارشی ساخته شده را به راحتی با استفاده از داینامیک تگهای المنتور در هر جای سایت نمایش دهید.
- مدیریت آسان محتوا: به جای اینکه هر بار به کدنویسی نیاز داشته باشید، میتوانید به سادگی از طریق بخش متاباکس جت انجین در صفحه ویرایش محصول، اطلاعات را وارد و مدیریت کنید.
مرحله اول: ساخت متاباکس و فیلدهای سفارشی در جت انجین
برای اینکه بتوانیم اطلاعات فروشنده را در صفحه محصول نمایش دهیم، ابتدا باید فضایی برای ذخیره این اطلاعات ایجاد کنیم. این فضا همان متاباکس است.
- ابتدا آخرین نسخه جت انجین را از سایت میهن تم دانلود و نصب کنید.
- در پیشخوان وردپرس، به مسیر
JetEngine →Meta Boxes بروید و روی دکمه Add New کلیک کنید. - در تنظیمات متاباکس جدید، عنوان مناسبی برای آن انتخاب کنید، مثلاً “اطلاعات فروشنده محصول“.
- در بخش “Meta Box for”، گزینه Product را انتخاب کنید. این کار تضمین میکند که این متاباکس فقط در صفحه ویرایش محصولات ووکامرس شما ظاهر شود.
- حالا نوبت به ایجاد فیلدهای سفارشی میرسد. روی دکمه “New Meta Field” کلیک کنید و فیلدهای مورد نیاز را به ترتیب بسازید:
- فیلد “فروشنده منتخب”: نوع فیلد را
Textقرار دهید و یک نام (Name) منحصربهفرد برای آن انتخاب کنید، مثلاًseller_name. این نام فیلد را برای مراحل بعدی به خاطر بسپارید. - فیلد “رضایت از کالا”: نوع فیلد را
Numberقرار دهید. نام (Name) این فیلد راsatisfaction_rateبگذارید. - فیلد “عملکرد فروشنده”: نوع فیلد را
Selectقرار دهید و گزینههای “عالی”، “خوب” و “متوسط” را اضافه کنید. نام فیلد را همseller_performanceقرار دهید.
- فیلد “فروشنده منتخب”: نوع فیلد را
با این کار، شما یک متاباکس کامل با فیلدهای سفارشی مورد نیاز برای محصولات خود ایجاد کردهاید.
مرحله دوم: وارد کردن اطلاعات در صفحه هر محصول
پس از ساخت متاباکس، به راحتی میتوانید اطلاعات مربوط به فروشنده را برای هر محصول به صورت جداگانه وارد کنید.
- به صفحه ویرایش یکی از محصولات خود در ووکامرس بروید.
- در پایین بخش اصلی محصول، یک باکس جدید با فیلدهای سفارشی که در مرحله قبل ساختید، خواهید دید.
- اطلاعات مورد نظر خود را برای هر فیلد وارد کنید. برای مثال، در فیلد “فروشنده منتخب” نام “دیجیکالا” را وارد کنید و در فیلد “رضایت از کالا”، عدد “۹۵” را بنویسید.
- این کار را برای تمام محصولاتی که میخواهید اطلاعات فروشنده را برای آنها نمایش دهید، تکرار کنید. با این کار، سایت شما برای نمایش دادههای پویا آماده میشود.
مرحله سوم: طراحی بخش فروشنده در المنتور پرو با برچسب های پویا
در این مرحله از ساخت بخش فروشندگان ، نوبت به طراحی بصری بخش فروشنده میرسد. اینجاست که المنتور پرو وارد عمل میشود.
- به مسیر قالب ها > ایجاد قالب جدید > صفحه تکی محصول در پیشخوان وردپرس بروید و یک قالب اختصاصی برای نمایش صفحات محصول ایجاد کنید. اگر قبلاً قالب ساختهاید، آن را ویرایش کنید.
- در صفحه ویرایش المنتور، یک سکشن جدید برای نمایش اطلاعات فروشنده اضافه کنید. میتوانید از ابزارک Container برای ساختاردهی بهتر استفاده کنید.
- برای نمایش هر کدام از فیلدهای سفارشی که در متاباکس جت انجین ایجاد کردهاید، از بخش برچسب های پویا در المنتور استفاده کنید. برای مثال:
- یک ویجت سربرگ یا ویرایش متن اضافه کنید.
- روی آیکون برچسب های پویا کلیک کنید.
- از بخش جت انجین، گزینه
Custom Fieldرا انتخاب کنید. - روی آیکون آچار کلیک کرده و از لیست فیلدها، نام
seller_nameرا انتخاب کنید تا نام فروشنده منتخب به صورت پویا نمایش داده شود.
- همین روند را برای نمایش میزان رضایت از کالا (
satisfaction_rate) و عملکرد فروشنده (seller_performance) تکرار کنید. با این روش، شما به سادگی و بدون یک خط کدنویسی، اطلاعات وارد شده در متاباکس جت انجین را در فرانتاند سایت خود به نمایش میگذارید. این قابلیت، یکی از دلایل اصلی محبوبیت جت انجین و المنتور در کنار هم است.
مرحله چهارم: زیباسازی و استایلدهی حرفهای
زیبایی بصری در جلب توجه کاربر و بهبود تجربه کاربری بسیار مؤثر است. با استفاده از ابزارهای استایلدهی المنتور میتوانید این بخش را جذابتر کنید.
- از رنگهای متفاوت برای نمایش عملکرد فروشنده استفاده کنید. مثلاً عالی را با رنگ سبز، خوب با رنگ آبی و ضعیف با رنگ قرمز نمایش دهید. این کار به کاربر کمک میکند تا با یک نگاه وضعیت فروشنده را ارزیابی کند.
- برای بخش درصد رضایت میتوانید از آیکونهای ستاره یا رنگ سبز استفاده کنید تا حس مثبتی به کاربر منتقل شود.
- محل قرارگیری این بخش نیز اهمیت دارد. آن را در محلی قرار دهید که به راحتی قابل مشاهده باشد، مثلاً زیر تصویر محصول یا بالای دکمه افزودن به سبد خرید.
- نکته: حتماً Alt Text توصیفی و شامل کلمات کلیدی برای تصاویر و لینکسازی داخلی با انکرتکستهای مرتبط به صفحات دیگر سایت خود را فراموش نکنید.
نتیجهگیری: یک فروشگاه اینترنتی پویا و حرفهای بسازید
با دنبال کردن این آموزش، شما توانستید مراحل ساخت بخش فروشندگان را به صورت پویا و کاملاً حرفهای در سایت ووکامرس خود انجام دهید. این قابلیت نه تنها اعتماد مشتری را جلب میکند، بلکه باعث میشود سایت شما شبیه به بزرگترین فروشگاههای آنلاین دنیا به نظر برسد. مزیت اصلی این روش، پویایی کامل آن است؛ هر بار که اطلاعات فروشنده را در بخش متاباکس ویرایش کنید، تغییرات به صورت خودکار در صفحه محصول اعمال میشوند.
کاربران گرامی:
برای مشاهده آموزش کامل این ویدیو ، ابتدا باید عضو دوره جامع طراحی فروشگاه اینترنتی مشابه دیجی کالا باشید ، پس از عضویت ، براحتی دسترسی کامل به محتوای آموزشی کامل ویدیو و همچنین فایل ها و کدهای آماده دوره را خواهید داشت.
