ووکامرس محبوب ترین افزونه فروشگاهی در وردپرس است که به سرعت در حال توسعه میباشد و هر روز امکانات و قالب های بینظیری برای آن طراحی میشود، در این مطلب قصد داریم طراحی قالب ووکامرس را به طور کامل و اصولی به شما توضیح دهیم، اما مطالعه این آموزش نیازمند 3 پیش نیاز زیر است:

1- روی سایت ( یا لوکال هاست ) خود وردپرس و افزونه ووکامرس را نصب داشته باشید

2- داشتن آشنایی با HTML , CSS و اصول طراحی قالب وردپرس

3- آشنایی با ابزار inspect element مرورگرهای فایرفاکس یا گوگل کروم

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

برای شروع کار یک قالب وردپرس را که با ووکامرس هماهنگ نیست به دلخواه انتخاب کنید و روی سایت یا لوکال هاست خود نصب کنید

بعد از فعال کردن قالب اگر در بالای پیشخوان با عبارت “پوسته شما توسط پشتیبانی ووکامرس شناسایی نمیشود – اگر با مشکل ناسازگاری طرح مواجه شدید، راهنمای یکپارچگی را مطالعه کنید یا یکی از پوسته های ووکامرس را انتخاب کنید.” مواجه شدید کد زیر را به انتهای فایل functions.php پوسته خود اضافه کنید تا قالب شما با ووکامرس هماهنگ شود

با قرار دادن کد بالا میتوانید خطای ذکر شده را از بین ببرید، این اولین قدم در طراحی قالب ووکامرس میباشد

همانطور که میدانید بعد از نصب ووکامرس صفحات زیر به سایت شما اضافه میشوند:

  • برگه تسویه حساب (checkout)
  • برگه سبد خرید (cart)
  • برگه حساب کاربری (my-account)
  • برگه فروشگاه (shop)
  • صفحه داخلی محصولات
  • صفحه آرشیو محصولات (دسته بندی ها و تگ ها)

نکته مهم: ووکامرس به طور پیشفرض در صفحات محصولات بخش هایی مثل نظرات کاربران، گالری محصولات، تصاویر، توضیحات محصول ، ویژگی های محصول و … را نمایش میدهد و نیازی به باز طراحی نیست، در تمام صفحات نیز به همینگونه است، تنها کافیست پوسته سایت شما با ووکامرس ست شود

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

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

برای حل این مشکل از فایل page.php پوسته خود یک کپی بگیرید و نام آن را برابر woocommerce.php قرار دهید.

اکنون فایل woocommerce.php را در ویرایشگر متن (مثل notpead++) باز کنید و حلقه وردپرس و تمام کدهای درون آن را حذف کنید، مانند زیر:

بخش بالا را تماما از فایل woocommerce.php پاک کنید و به جای آن کد زیر را قرار دهید:

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

اما محتوای فروشگاه استایل خاصی ندارند و راست چین هم نیستند، برای حل این مورد باید با ابزار inspect element مانند عکس زیر قسمت های مختلف که نیاز به تغییر دارند را انتخاب کنید تا کلاس و کدهای Css آنها پیدا شود و سپس در انتهای فایل style.css قالب خود استایل دهی کنید و ویرایش های لازمه را برای تغییر ظاهر فروشگاه انجام دهید

ابزار inspect element در طراحی قالب ووکامرس میتواند کمک شایانی به شما کند

آموزش طراحی قالب ووکامرس

برای راست چین کردن باید کلاس هایی را که text-align آن ها left است برابر با right و کلاس هایی را که Direction آن ها برابر با ltr است برابر با rtl قرار دهید

همچنین به margin ها و padding ها نیز توجه داشته باشید

در زیر یک قطعه کد آماده css برای شما قرار دادیم که میتوانید آن را در انتهای فایل Style.css خود قرار دهید و هم ظاهر را بهبود ببخشید و هم آن را راست چین کنید

با کد css بالا علاوه بر راستچین شدن و ظاهر گرفتن دکمه ها و صفحه محصولات , صفحات حساب کاربری و سبد خرید و همچنین فرم های درون آن ها نیز استایل خاصی خواهند گرفت

اگر با کد های Css آشنایی خوبی داشته باشید طراحی قالب ووکامرس برای شما بسیار راحت خواهد بود

مشکل کار نکردن کدهای جی کوئری در ووکامرس

اگر با مشکل کار نکردن کدهای جی کوئری و ایجکس در ووکامرس برخورد کرده اید ( مانند کار نکردن دکمه افزودن به سبد خرید یا حذف محصولات از سبد خرید که به صورت ajax هستند ) بدانید که ووکامرس اصولا از کتابخانه jquery موجود در خود وردپرس استفاده میکند، پس یا این کتابخانه غیر فعال شده است که باید آن را فعال کنید ( در فایل functions.php بررسی کنید ) و یا در پوسته شما و در بخش head یک کتابخانه جی کوئری دیگر فرخوانی شده که باعث ایجاد تداخل شده است و باید آن را حذف کنید

البته این امکان هم وجود دارد که از بخش پیکربندی ووکامرس این مورد غیر فعال شده باشد

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

آموزش طراحی قالب ووکامرس

برای ایجاد سبد خرید سفارشی میتوانید از کد و توابع زیر استفاده کنید

فقط باید آن را استایل دهی کنید و زیبایی خاصی با کدهای css به آن ببخشید

در کد بالا اگر محصولی در سبد خرید شما نباشد عبارت سبد خرید خالی است چاپ میشود و اگر سبد خرید دارای یک محصول یا بیشتر باشد تعداد آن ها نمایش داده خواهند شد

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

تنظیم جستجوی سایت روی محصولات

جستجو در وردپرس به طور پیشفرض روی برگه ها و نوشته ها انجام میشود

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

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

همانطور که در بالاتر نیز گفته شد ووکامرس به طور پیشفرض تمام امکانات زوم، اسلایدر و هچنین لایت باکس را در خود دارد و تنها کافیست با قرار دادن کد زیر در انتها یا ابتدای فایل functions.php پوسته خود آن را فعال کنید

توابع مهم در طراحی قالب ووکامرس

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

کد نمایش بردکرامب اختصاصی ووکامرس:

لینک صفحه سبد خرید:

لینک صفحه حساب کاربری:

نمایش قیمت محصول ( استفاده درون حلقه ):

چک کردن وضعیت موجود در انبار ( استفاده درون حلقه ):

نمایش عنوان محصول ( استفاده درون حلقه ):

دکمه افزودن به سبد خرید ( استفاده درون حلقه ):

نمایش تصویر شاخص محصول ( استفاده درون حلقه ):

نمایش گالری تصاویر محصول ( استفاده درون حلقه ):

نمایش دسته بندی محصول ( استفاده درون حلقه ):

نمایش خلاصه توضیحات محصول ( استفاده درون حلقه ):

نمایش توضیحات کامل محصول ( استفاده درون حلقه ):

نمایش لیست ویژگی های محصول ( استفاده درون حلقه ):

نمایش شناسه محصول ( استفاده درون حلقه ):

 

موفق و سربلند باشید