آموزش طراحی باکس محصول ووکامرس مشابه دیجی کالا با المنتور

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

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

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

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

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

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

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

توسط این آموزش شما می توانید محصول شبکه بندی افزونه فروشگاه ساز (Woocommerce) ووکامرس و افزونه ایزی دیجیتال دانلود (EDD) را طراحی کنید.

برای اجرای این آموزش نیاز به 2 افزونه می باشد.

• افزونه المنتور پرو
• افزونه Briefcase WP

توجه: در صورت در دسترس نبودن ویجت های افزونه Briefcase WP حتما از نصب بودن افزونه ووکامرس مطمئن شوید.

طراحی از بخش قالب ها

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

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

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

ما در اینجا فقط از ویجت فیلد داینامیک ووکامرس استفاده می کنیم.

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

معرفی فیلد های داینامیک ووکامرس

Product Image یا تصویر محصول: نمایش داینامیک تصویر محصول

Product Gallery یا گالری محصول: نمایش گالری تصایور محصول

Product Title  یا عنوان محصول: نمایش داینامیک عنوان محصول

Product Price یا قیمت محصول: نمایش داینامیک قیمت محصول

Product Add to cart یا دکمه افزودن به سبد خرید

Product Meta یا اطلاعات محصول: نمایش اطلاعات و جزئیات محصول

Product Short Description یا توضیحات کوتاه محصول: نمایش توضیحات کوتاه و چکیده محصول

Product Tabs  یا تب محصولات: نمیاش تب توضیحات، نقد و بررسی و ویژگی ها

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

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

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

سپس برای ظاهر بهتر، از تب استایل هر ویجت، تغییرات دلخواه را اعمال کنید.

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

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

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

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

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

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

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

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