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

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email
اشتراک گذاری در print
طراحی محصول ووکامرس
پخش ویدیو

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

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

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

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

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

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

طراحی محصول ووکامرس

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

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

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

توجه: در صورت در دسترس نبودن ویجت های افزونه 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، محصول شبکه بندی را سفارشی سازی کنید و در بخش های مختلف سایت مانند صفحه اصلی و فروشگاه، محصولات را نمایش دهید.

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

045-microphone

مدرس :
محمدرضا احمدزاده

013-globe

سطح آموزش :
مبتدی

035-essay

زمان آموزش :
6 دقیقه

امتیاز دهید

اشتراک گذاری

اشتراک گذاری در telegram
اشتراک گذاری در whatsapp
اشتراک گذاری در facebook
اشتراک گذاری در twitter
اشتراک گذاری در linkedin
اشتراک گذاری در email

آخرین مقالات

آخرین محصولات

آخرین محصولات

برچسب ها

لینک کوتاه

https://elementorfa.ir/?p=18111

فهرست مطالب

Avatar
ali در 17:27

در woo grid میزنه هیچ قالبی نساختی

پاسخ
المنتور فارسی
المنتور فارسی در 17:42

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

پاسخ
Avatar
امیر در 08:52

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

پاسخ
المنتور فارسی
المنتور فارسی در 11:17

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

پاسخ
Avatar
miremad98 در 19:17

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

پاسخ
المنتور فارسی
المنتور فارسی در 19:36

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

پاسخ
رهام
رهام در 14:19

یک سوال دیگه
چطور میتونم این ویجت رو برای گوشی سازگار کنم؟توی گوشی زیاد خوب نیست

پاسخ
المنتور فارسی
المنتور فارسی در 14:21

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

پاسخ
رهام
رهام در 13:53

سلام چطور میتونم این گرید ها رو بر اساس دسته بندی ها دسته بندی کنیم و نمایش بدم مثلا یک گرید در مورد دسته بندی گوشی و یک گرید محصولات لپ تاپ چطوری باید این فیلتر رو انجام بدم؟

پاسخ
المنتور فارسی
المنتور فارسی در 14:14

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

پاسخ
Avatar
احسان در 14:50

سلام به غیر از Briefcase WP با افزونه دیگه ای هم میشه این کار رو انجام داد چون من فروشگاه رو با جت ساختم و ظاهرا این افزونه با جت مشکل داره و اجازه اجرا بهش نمی ده

پاسخ
المنتور فارسی
المنتور فارسی در 15:32

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

پاسخ
Avatar
مجتبی در 12:59

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

پاسخ
المنتور فارسی
المنتور فارسی در 13:09

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

پاسخ
سعید
سعید در 12:59

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

پاسخ
المنتور فارسی
المنتور فارسی در 13:04

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

پاسخ

نظرات ارزشمند خود را به اشتراک بگذارید

نیاز به کمک دارید؟ پیام دهید