آموزش طراحی صفحه تکی محصول در قالب وودمارت (با المنتور)

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

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

صفحه تکی محصول در قالب وودمارت چیست؟

صفحه تکی محصول (Single Product Page) صفحه ای است که اطلاعات یک محصول مشخص را در فروشگاه ووکامرسی نمایش می دهد. عنوان، قیمت، تصاویر، توضیحات، ویژگی ها، وضعیت موجودی و دکمه افزودن به سبد خرید از اجزای رایج این صفحه هستند.

قالب وودمارت علاوه بر تنظیمات معمول صفحه محصول، قابلیت Single Product Builder را در اختیار کاربران قرار می دهد. با استفاده از این قابلیت می توانید ساختار صفحه را تغییر دهید، المان های محصول را در موقعیت دلخواه قرار دهید و برای گروه های مختلف محصولات، طراحی های متفاوتی بسازید.

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

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

تفاوت تنظیمات صفحه محصول وودمارت با Single Product Builder چیست؟

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

ویژگی	تنظیمات عمومی صفحه محصول	Single Product Builder
هدف اصلی	مدیریت ظاهر و رفتار پیش فرض	طراحی ساختار اختصاصی صفحه
مسیر دسترسی	Theme Settings ← Single product	Layouts ← Single product
تغییر ترتیب و ساختار المان ها	محدود به گزینه های موجود	امکان چیدمان اختصاصی
قالب های متفاوت برای دسته بندی ها	از طریق تنظیمات فردی یا روش های مرتبط، با محدودیت های مشخص	با استفاده از شرایط نمایش قالب
استفاده از اطلاعات پویا	در ساختار استاندارد محصول	با المان های اختصاصی محصول
مناسب برای	تغییرات عمومی و تنظیمات ظاهری	طراحی اختصاصی و کنترل ساختار صفحه

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

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

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

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

طرح بندی ها ← صفحه تک محصول

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

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

مرحله دوم: نام گذاری قالب و تعیین شرایط نمایش

پس از ایجاد قالب، یک نام مشخص برای آن انتخاب کنید؛ برای مثال:

• قالب عمومی صفحه محصول
• قالب اختصاصی مبلمان اداری
• قالب محصولات دیجیتال
• قالب محصولات یک دسته بندی خاص

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

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

مرحله سوم: انتخاب طرح آماده یا قالب خالی

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

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

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

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

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

• Gutenberg
• Elementor
• WPBakery

ویرایشگر مورد استفاده برای ساخت قالب ها از مسیر زیر تعیین می شود:

Theme Settings ← Other ← Current builder

اگر قصد دارید با المنتور کار کنید، پنل ابزارهای المنتور را باز کنید و بخش [XTemos] Elements را بررسی کنید. المان های اختصاصی وودمارت از همین قسمت قابل دسترسی هستند.

پیشنهاد میکنیم سایر قسمت های دوره آموزش قالب وودمارت را از دست ندهید.

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

مرحله پنجم: افزودن المان های اختصاصی محصول

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

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

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

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

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

گالری محصول (Product Gallery)

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

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

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

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

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

وضعیت موجودی (Product Stock Status)

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

جدول اطلاعات تکمیلی محصول

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

تب های محصول و نظرات

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

برند و اطلاعات تکمیلی

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

محصولات مرتبط و مکمل

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

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

مرحله ششم: طراحی چیدمان صفحه محصول

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

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

1. بخش ابتدایی: مسیر راهنما، گالری تصاویر و اطلاعات اصلی محصول.
2. بخش خرید: عنوان، امتیاز، قیمت، وضعیت موجودی، ویژگی های قابل انتخاب و دکمه خرید.
3. بخش توضیحات: معرفی محصول و مزایای واقعی آن.
4. بخش مشخصات: جدول ویژگی ها، ابعاد، جنس یا اطلاعات فنی.
5. بخش تکمیلی: نظرات مشتریان، محصولات مرتبط و پیشنهادهای مکمل.

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

مرحله هفتم: انتشار و آزمایش قالب

پس از تکمیل طراحی، قالب را منتشر کنید و یکی از محصولات مشمول شرایط نمایش را باز کنید.

پیش از استفاده از قالب در کل فروشگاه، موارد زیر را بررسی کنید:

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

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

چگونه قالب صفحه محصول را به یک دسته بندی خاص اختصاص دهیم؟

یکی از کاربردهای Single Product Builder، طراحی قالب های متفاوت برای دسته بندی های مختلف است.

وودمارت برای تعیین محل استفاده از قالب از شرایط Include و Exclude استفاده می کند.

• شامل: تعیین می کند قالب در چه شرایطی نمایش داده شود.
• استثناء: تعیین می کند قالب در چه شرایطی نباید استفاده شود.

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

مثال کاربردی: فروشگاه مبلمان اداری

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

• صندلی اداری
• میز اداری
• فایل و کمد اداری

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

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

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

نکته مهم: اگر چند قالب با یک محصول مطابقت داشته باشند، شرایط اختصاصی تر نسبت به شرایط عمومی مانند All products اولویت دارند. بنابراین، شرایط قالب های متعدد را بررسی کنید تا نمایش نهایی با هدف طراحی شما مطابقت داشته باشد.

آیا برای طراحی صفحه محصول وودمارت به المنتور پرو نیاز داریم؟

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

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

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

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

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

چرا بعضی المان ها در ویرایشگر وجود ندارند؟

ابتدا ویرایشگر انتخاب شده و نوع قالب را بررسی کنید. در المنتور، بخش [XTemos] Elements را باز کنید و نام المان را جستجو کنید. بعضی المان ها فقط در زمینه مشخصی از Layouts یا در صورت فعال بودن قابلیت موردنیاز در دسترس هستند.

چرا اطلاعات یک افزونه در قالب سفارشی نمایش داده نمی شود؟

قالب اختصاصی لزوماً تمام هوک های PHP مورد استفاده افزونه های ووکامرس را به صورت خودکار اجرا نمی کند. اگر افزونه اطلاعات خود را با هوک های ووکامرس به صفحه محصول اضافه می کند، ممکن است به المان WooCommerce Hook یا راهکار سازگاری دیگری نیاز داشته باشید.

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

چرا فرم خرید محصول متغیر درست کار نمی کند؟

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

اگر گزینه Layouts در پیشخوان وجود نداشته باشد چه کنیم؟

فعال بودن قالب وودمارت و افزونه های موردنیاز آن را بررسی کنید. اگر ویرایشگر موردنظر در دسترس نیست، مستندات رسمی وودمارت برای فعال سازی نوع محتوای Layouts در Elementor یا WPBakery را بررسی کنید.

جمع بندی

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

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

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