در این نوشته می‌خواهیم در مورد آموزش ساخت باکس محصول شبیه دیجی کالا توسط المنتور مطالب جالبی را قرار دهیم. ابتدا به شما خواهیم گفت که ووکامرس چیست و شامل کدام بخش از سایت می‌شود.
خیلی از افراد در مورد طراحی محصول شبکه بندی ووکامرس اطلاعاتی ندارند و این موضوع برای آنها گنگ و دشوار است. ما در ابتدا توضیحات لازم را بیان خواهیم کرد و سپس آموزش‌های لازم را خواهیم گفت.
اگر به سایت‌های فروش محصولات سر زده باشید متوجه این موضوع خواهید شد که بخش آخرین محصولات به صورت شبکه‌ای یا لیست قرار داد. به عنوان نمونه سایت‌های فروشگاهی بزرگ را مشاهده کنید.
این شیوه به عنوان یکی از مرسوم‌ترین شیوه‌ها، برای نمایش محصولات در صفحه اصلی است. ما در این آموزش قصد داریم تا اجزای داخلی محصول شبکه بندی را شخصی سازی کرده و سپس درون بخش شبکه بندی قرار دهیم. به زبان ساده‌تر باید بیان کرد که منظور از محصول شبکه بندی شده یعنی نمایش تصویر، نام محصول، قیمت، دکمه اضافه به سبد خرید و تمامی فیلدهایی است که در صفحه محصول وجود دارد که به صورت زیر است.
طراحی محصول شبکه بندی ووکامرس با المنتور
شما به کمک آموزش زیر می‌توانید به راحتی محصول شبکه بندی شده را توسط افزونه فروشگاه ساز ووکامرس و افزونه ایزی دیجیتال، طراحی کنید. همان‌طور که بیان شد به دو افزونه نیاز دارید که شامل موارد زیر است:
دقت کنید اگر ویجت های افزونه Briefcase WP در دسترس نبود، مطمئن شوید که افزونه ووکامرس نصب است.
در این بخش باید در ویرایشگر المنتور، از ویجت های افزونه Briefcase WP استفاده کنید. ویجت‌های مختلفی را مشاهده می‌کنید که قابل انتخاب است. ویجت صفحه کامل که برای طراحی صفحات تک صفحه استفاده می‌شود شامل ویجت منو، سبد خرید، شبکه بندی ووکامرس و غیره است. ما در این بخش از ویجت فیلد داینامیک ووکامرس استفاده میکنیم.
ویجت مذکور را درون صفحه قرار دهید. ویجت داینامیک ووکامرس دارای 16 فیلد است.
معرفی فیلدهای داینامیک ووکامرس
در این بخش می خواهیم به معرفی فیلدهای ویجت داینامیک ووکامرس بپردازیم:
✔ تصویر محصول Product Image
این بخش مربوط به نمایش داینامیک تصویر محصول است.
✔ گالری محصول Product Gallery
همان‌طور که از عنوان پیداست مربوط به نمایش گالری تصاویر محصول است.
✔ عنوان محصول Product Title
به عنوان نمایش دهنده عنوان محصول به کار می‌رود.
✔ قیمت محصول Product Price
بخش فوق مرتبط با نمایش داینامیک قیمت محصول است.
✔ دکمه افزودن به سبد خرید Product Add to cart
بخش فوق مربوط به افزودن محصول به سبد خرید است.
✔ اطلاعات محصول Product Meta
اطلاعات محصول به جزئیات محصول می‌پردازد.
✔ توضیحات کوتاه محصول Product Short Description
به صورت چکیده به توضیحات محصول می‌پردازد.
✔ تب محصولات Product Tabs
تب محصولات مرتبط با نمایش توضیحات محصول، نقد و بررسی و ویژگی‌های محصول است.
برای اینکه بتوانید محصول شبکه بندی شده را به صورت کامل به سرانجام برسانید بهتر است این ویجت را داخل بخش اصلی قرار دهید. ما قصد داریم محصول شبکه بندی شده دارای تصویر، نام و قیمت باشد. در این بخش از ویجت فیلدهای داینامیک ووکامرس سه تا را در بخش صفحه قرار دهید.
برای نمایش ظاهر بهتر، از بخش استایل هر ویجت، می توانید تنظیمات مورد علاقه خود را اعمال کنید. بعد از انجام تغییرات مربوط به ویجت ها، به همین شکل قالب را منتشر کرده و به صفحه اصلی بروید و از ویجت کاوومرس گرید برای قرار دادن محصولات به صورت شبکه بندی شده استفاده کنید.
پس از درج ویجت در صفحه، بر روی آن کلیک کرده تا تنظیمات ویجت نمایش داده شود. در بخش نوع شبکه گزینه مورد نظر خود را انتخاب کنید.
در این بخش می توانید از بین فروشگاه، آخرین محصولات، محصولات برجسته، محصولات پیشنهادی، محصولات پرفروش و یا دسته بندی یک گزینه را انتخاب کنید.
در این فیلد قالبی که در مرحله قبل طراحی کرده اید را انتخاب کنید، اسم قالب ما در این بخش محصول شبکه بندی شده است.
همان گونه که مشاهده می کنید با انتخاب قالب طراحی شده، محصولات به شکل شبکه ای در کنار یکدیگر قرار می گیرند.
در بخش تنظیمات شبکه قادر خواهید بود تا تعداد محصولات، ستون های قابل نمایش و ترتیب نمایش را بر اساس نیاز خود ویرایش کنید.
شما با رعایت کردن نکات گفته شده و همچنین افزونه Briefcase WP به راحتی محصول شبکه بندی شده را طراحی کرده و از آن می توانید در بخش های مختلف سایت مانند صفحه اصلی استفاده کنید.
در صورت داشتن هر گونه مشکل یا سوال می توانید در بخش نظرات با ما در میان بگذارید.
سلام وقتتون بخیر .من می خوام با افزونه المنتور سایت فروشگاهی طراحی کنم برای اولین بار است که می خوام کار کنم می شه کمکم کنید که چه طور با قسمت های مختلف کار کنم .ممنون می شم
سلام ذوست غزیز
انتخاب بسیار خوبی کردید
آموزش های رایگان و پیشرفته توی سایت هست میتوند استفاده کنید.
جالب بود ولی ای کاش آموزش ویدیویی این آموزش قرار می دادید
ممنونم
حتما تا چند روزه دیگه قرار داده میشه