برای طراحی صفحه محصول با المنتور، در Theme Builder یک قالب Single Product بسازید، ویجت‌های مخصوص ووکامرس را در آن بچینید و تعیین کنید قالب روی کدام محصولات نمایش داده شود. نام، عکس، قیمت و گزینه‌های خرید از اطلاعات همان محصول می‌آیند. اگر قیمت یک ماگ تغییر کند، کافی است داده محصول را در ووکامرس به‌روز کنید.
در این تمرین برای یک فروشگاه فرضی ماگ، قالبی می‌سازیم که هم محصول ساده را پوشش دهد و هم برای ماگ‌های چندرنگ امکان انتخاب و خرید ترکیب درست را فراهم کند.
برای این روش به ووکامرس و نسخه‌ای از Elementor Pro نیاز دارید که امکانات WooCommerce Builder را داشته باشد. تمرین را در محیط آزمایشی انجام دهید تا بتوانید قالب و سبد خرید را پیش از اعمال تغییرات روی فروشگاه بررسی کنید. اگر هنوز محصولی ثبت نکرده‌اید، مراحل پایه را در آموزش راه‌اندازی فروشگاه با ووکامرس دنبال کنید.
ویژگی‌هایی مثل جنس بدنه و گنجایش، وقتی روی انتخاب نسخه قابل خرید اثر ندارند، در بخش مشخصات نمایش داده می‌شوند. رنگ، وقتی برای هر مقدار آن یک نسخه قابل خرید تعریف کرده‌اید، باید در فرم انتخاب تنوع هم بیاید.
برای گالری از Product Images و برای نام و قیمت از Product Title و Product Price استفاده کنید. عنوان محصول را H1 بگذارید و متن کوتاه تصمیم‌ساز، مانند ظرفیت ماگ یا امکان شست‌وشو، را با ویجت Short Description از پرونده محصول بخوانید. عنوان، قیمت و تصویر نمونه را در کانتینر به‌صورت ثابت وارد نکنید تا هنگام باز شدن محصول بعدی، داده همان محصول نمایش داده شود.
ویجت Add to Cart مخصوص WooCommerce Single را نزدیک قیمت و خلاصه قرار دهید. این ویجت فرم خرید محصول جاری را نمایش می‌دهد و برای محصول متغیر، گزینه‌های انتخاب تنوع و دکمه خرید را در همان فرم نگه می‌دارد. قرار گرفتن فرم کنار قیمت به مشتری کمک می‌کند تغییر قیمت یا وضعیت دسترسی پس از انتخاب را همان‌جا ببیند.
برای نمایش تب‌های استاندارد، از Product Data Tabs استفاده کنید. اگر چیدمان مستقل می‌خواهید، می‌توانید توضیح کامل را با Product Content و مشخصات را با Additional Information نمایش دهید. چیدمان را یک بار با محصولی که توضیح یا مشخصات کمی دارد بازبینی کنید تا تیتر یا باکس خالی در صفحه نماند.
اگر در طراحی صفحه محصول به سبک دیجی‌کالا، نمایش مشخصات به‌صورت کارت برایتان مهم است، راهنمای نمایش باکس ویژگی‌های محصول ووکامرس شبیه دیجی‌کالا روش ساخت همان بخش را توضیح می‌دهد. باکس مشخصات را پایین‌تر از فرم انتخاب رنگ و خرید قرار دهید تا نقش هر بخش برای مشتری روشن باشد.
در نمای موبایل، کانتینرهای بالایی را ستونی کنید. ترتیبی مثل عنوان، گالری، قیمت، خلاصه کوتاه، انتخاب رنگ و دکمه خرید را روی گوشی بررسی کنید. اگر عنوان در دسکتاپ داخل پنل خرید است، می‌توانید ساختار کانتینرها را طوری تنظیم کنید که همان عنوان در جای مناسب دیده شود. فرم خرید را یک بار در قالب قرار دهید و همان فرم را برای نمایش در اندازه‌های مختلف تنظیم کنید.
هنگام انتشار قالب در محیط آزمایشی، در Display Conditions ابتدا آن را فقط روی محصولات آزمایشی اعمال کنید. اگر نتیجه درست بود، شرط را به دسته موردنظر گسترش دهید. وقتی یک طرح برای تمام محصولات دارید، شرط همه محصولات را انتخاب کنید. برای قالب‌های موجود هم شرط‌ها را بازبینی کنید تا دو قالب برای یک محصول هدف‌گذاری نشوند.
اگر قالب در ویرایشگر درست است اما روی محصول دیده نمی‌شود، ابتدا شرط نمایش و قالب‌های فعال را بررسی کنید. اگر گالری می‌آید ولی انتخاب رنگ کار نمی‌کند، نوع محصول، فعال بودن ویژگی برای تنوع‌ها، قیمت و وضعیت هر تنوع و استفاده از ویجت خرید ووکامرس را کنترل کنید. پس از درست شدن مسیر خرید، راهنمای سئوی صفحه‌های دسته و محصول به شما کمک می‌کند اطلاعات صفحه، تنوع‌ها و داده‌های ساختاریافته را هم بررسی کنید.
