سفارشی سازی ووکامرس با WooCustomizer

سفارشی سازی ووکامرس سفارشی سازی ووکامرس

اگر از فروشگاه‌ساز ووکامرس در وبسایت خود استفاده می­‌کنید، ممکن است از تم و پوسته یکنواخت آن یا حتی از اینکه باید برای سفارشی سازی ووکامرس چندین مورد افزونه را به آن اضافه کنید، خسته شده باشید. شاید کدهای زیادی برای ایجاد تغییرات در ووکامرس استفاده کرده‌اید. ولی خب شاید این روش‌­ها کارساز نباشد و نتواند آنچه شما می­‌خواهید را در سایت‌تان پیاده سازی کند.  ما یک پیشنهاد ویژه برای شما داریم و آن هم استفاده از افزونه  WooCustomizer برای سفارشی سازی ووکامرس است. بدون نیاز به داشتن دانش برنامه نویسی، دنبال بهترین‌­ها باشید.

سفارشی سازی ووکامرس

آنچه در این مقاله خواهید خواند:

  • دلیل استفاده از WooCustomizer در ووکامرس
  • بهترین ویژگی­‌های WOOCUSTOMIZER کدامند؟
  • نصب و تنظیمات WooCustomizer
  • سفارشی‌سازی WooCommerce shop page
  • سفارشی‌سازی WooCommerce product page
  • سفارشی‌سازی Cart pageو Checkpot page
  • ویژگی­‌های WooCustomizer Pro

دلیل استفاده از WooCustomizer در ووکامرس

خود ووکامرس یک‌سری اقداماتی برای سفارشی و ویرایش امکانات ووکامرس به کاربران ارائه می­‌دهد اما مشکل اینجاست که باید برای ویرایش هر قسمتی کد PHP  مربوطه را به آن اضافه کنید. شاید این راهکار برای شما سخت و دشوار باشد یا اصلا آنقدر که لازم است به کدنویسی تسلط نداشته باشید. یک راهکار ساده استفاده از افزونه WooCustomizer است. مطمئناً WooCustomizer  یک افزونه پرکاربردی برای ایجاد تغییرات در صفحات فروشگاهی و سفارشی سازی ووکامرس به حساب می‌­آید. حتی شما می‌­توانید صفحات سبد خرید و پرداخت و همچنین صفحه حساب کاربری را ویرایش کنید. این واقعاً عالیست!

بهترین ویژگی‌­های WOOCUSTOMIZER کدامند؟

  • اضافه کردن آیتم Login / Logout به قسمت تم وردپرسی انتخاب شده.
  • اضافه کردن آمار فروش محصولات برای ادمین کاربران در قسمت فرانت‌اند وبسایت.
  • طراحی دکمه­‌های “افزودن به سبد خرید” و بنرهای ” فروش”.
  • ویرایش قسمت حساب کاربر و عناوین محتوای تب­‌ها.
  • ویرایش یا حذف تب صفحه محصولات و عناوین تب­‌ها.
  • حذف قسمت­‌های اصلی پرداخت در صفحه پرداخت WooCommerce.
  • به روزرسانی خودکار ایجکسی هنگام تغییر مقدار در صفحه سبد خرید.
  • اضافه کردن قسمت “افزودن به سبد خرید“.
  • تنظیم کمترین و بیشترین ارزش برای ورودی­‌های قسمت “افزودن به سبد خرید”، البته به علاوه ارزش افزوده!

موارد گفته شده از برترین ویژگی­‌های WooCustomizer بودند. البته WooCustomizer شامل مواردی دیگری نیز هست:

  • ارائه آپشن­‌های بیشتر برای طراحی عناصر ووکامرس که ممکن است پوسته شما این موارد را نداشته باشد.
  • امکان ویرایش و یا حذف عناصر مختلف در تمام صفحات WooCommerce .
  • امکان حذف عنوان محصول، محصول SKU، دسته بندی محصولات و برچسب‌­ها و … .
  • امکان ویرایش متن دکمه­‌ها برای هر نوع محصول، برچسب­‌های محصول و موارد دیگر در تمام صفحات ووکامرس.
  • امکان اضافه کردن برچسب “محصول جدید” به محصولات ایجاد شده در خلال تعداد روزهای مشخص.
  • اضافه کردن متن سفارشی به صفحه WooCommerce Empty Cart.
  • ویرایش متن صفحه Order Notes field.

کلیه تنظیماتی که در WP Customizer تعبیه شده برای این است که شما بتوانید به صورت بصری در یک محیط زنده، صفحات ووکامرس خود را در وردپرس ویرایش کرده و ایجاد تغییر در ووکامرس را امکان‌پذیر سازید. افزونه WooCustomizer روی کار آمده تا کار شما راحت‌تر شود. فقط افزونه را نصب و با ویرایش امکانات ووکامرس به نتیجه دلخواه برسید.

نصب و تنظیمات WooCustomizer

woocustomizer- سفارشی سازی ووکامرس
افزونه سفارشی سازی ووکامرس

با تمام تنظیماتی که در Customizer یا سفارشی سازی پوسته وردپرس ایجاد شده است، می­‌توانید از سفارشی‌سازی WooCommerce به صورت بصری در محیط زنده لذت ببرید. حتما دیدن تمام تغییراتی که در فروشگاه ووکامرس خود ایجاد می­‌کنید، جالب خواهد بود. شاید بگویید که این افزونه چگونه باعث ایجاد تغییر در ووکامرس می­‌شود؟! WooCustomizer فقط کدی را فعال می­‌کند و تغییرات اعمال می­‌شود بدون نوشتن کدی توسط شما.

برای استفاده از WooCustomizer در سایت فروشگاهی، خود ابتدا باید ووکامرس در وردپرس شما نصب شده باشد. سپس WooCustomizer  را نصب کنید.

woocommerce menu- ویرایش امکانات ووکامرس
تنظیمات افزونه از زیرمنوی ووکامرس

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

display- ایجاد تغییر در ووکامرس
انتخاب سفارشی سازی از بخش نمایش

بعد از آن WooCustomizer را انتخاب کنید تا بتوانید از موارد موجود استفاده کنید. البته بعد از یادگیری.

setting- تنظیمات مربوط به افزونه
تنظیمات مربوط به افزونه

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

setting- موارد موجود برای تنظیمات
موارد موجود برای تنظیمات
  • WooCustomizer:مربوط به تنظیمات کلی این افزونه است که شامل شکل و ظاهر دکمه­‌ها و ویژگی­‌های ظاهری.
  • WooCommerce shop page: مربوط به تنظیمات و ویژگی‌­های صفحه فروشگاه است.
  • WooCommerce product page: مربوط به تنظیمات و ویژگی­‌های صفحه محصولات و معرفی آن­ها است.
  • Account page: اطلاعات و ساختار صفحه اکانت فرد است که با انتخاب هر کدام، چه ویژگی­‌ها نمایش داده شوند.
  • Cart page: مربوط به تنظیمات و ویژگی­‌های صفحه سبد خرید است.
  • Checkpot page: مربوط به تنظیمات و ویژگی­‌های صفحه پرداخت است.

در قسمت زیر به صورت کلی به توصیف برخی از این ویژگی‌­های هر کدام از قسمت­‌ها می‌­پردازیم.

سفارشی سازی WooCommerce shop page

  • ویرایش محصولات هر صفحه

تعداد محصولات را در صفحات فروشگاه WooCommerce خود نمایش دهید.

product per page- تعداد محصولات در هر صفحه
تعداد محصولات در هر صفحه
  • ستون­‌های محصولات را ویرایش کنید

صفحات WC Shop & Archive خود را تنظیم کنید تا مقدار ستون­‌های انتخاب شده در هر سطر نشان داده شود.

  بررسی سرعت سایت وردپرس با GTmetrix for WordPress
product per row- محصولات در هر ردیف
نمایش محصولات در هر ردیف
  • عناصر صفحه فروشگاه را حذف کنید

می‌­توانید انواع عناصر را از صفحات فروشگاه، بایگانی و محصولات ووکامرس حذف کنید.

remove sth- حذف آیتم‌هایی از فروشگاه
حذف آیتم‌هایی از فروشگاه
  • ویرایش متن بنر فروش

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

sale banner text- متن مربوط به بنرها
متن مربوط به بنرهای تبلیغاتی
  • ویرایش متن دکمه افزودن به سبد خرید

شما به راحتی می‌­توانید متن دکمه Add To Cart را برای محصولات ساده، محصولات متغیر و محصولات گروه‌بندی شده ویرایش کنید. بدون هیچ دردسری.

add to cart- افزودن به سبد خرید
افزودن به سبد خرید
  • اضافه کردن آمار محصول برای نمایش در قسمت فرانت‌اند برای ادمین

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

product stat- سفارشی سازی ووکامرس
آماری از فروش محصولات

سفارشی سازی  WooCommerce product page

صفحات محصول ووکامرس را سفارشی کنید تا دقیقاً همانطور که می­‌خواهید محصولاتتات ظاهر شوند. در واقع کلمه سفارشی سازی ووکامرس به همین معناست که شما بتوانید هر آنگونه که انتظار دارید صفحات خود را بسازید.

  • گالری محصولات را ویرایش کنید

به راحتی می‌­توانید با استفاده از ویژگی­‌های گالری محصول، مانند Image Zoom ، Lightbox Image و Slider Image که در این قسمت موجود است، نمایی خاص به عکس محصولات خود در سایت دهید. حتما این یکی از بهترین بخش ایجاد تغییر در ووکامرس محسوب می‌شود.

product gallery- ویرایش امکانات ووکامرس
بخش گالری محصولات
  • حذف عناصر صفحه محصول

خب در این قسمت می­‌توانید انواع عناصر مربوط به  صفحه محصول را حذف کنید. بسته به انتخاب شما این موارد ماندگار یا حذف می‌­شوند.

remove product element- حذف عناصر محصولات
حذف عناصر محصولات
  • ویرایش / حذف تب محصولات

به راحتی هر متن از تب محصولات را در عنوان خود ویرایش کنید، یا حتی زبانه محصول را به راحتی حذف کنید.

edit product tab- ایجاد تغییر در ووکامرس
حذف و ویرایش تب محصولات
  • ویرایش بخش­‌های مختلف محصولات

عناوین مربوط به محصولات پیشنهادی را ویرایش کنید و یا بخش‌­های مورد نظر خود را که می‌­دانید لازم نیست، حذف کنید.

related product- ویرایش محصولات مرتبط
ویرایش محصولات مرتبط
  • ویرایش متن قسمت­‌های مختلف محصول

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

out of stock- ویرایش متن قسمت­‌های مختلف محصول
ویرایش متن قسمت­‌های مختلف محصول
  • اضافه کردن توضیحات طولانی

با انتخاب این گزینه می‌­توانید توضیحات مربوط به محصول را نشان دهید.

product description- توضیحات محصول
ارايه توضیحات برای محصولات
  • نمایش تعداد محصولات فروخته شده

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

show amount sold- نمایش محصولات فروخته شده
نمایش تعداد محصولات فروخته شده
  • اضافه کردن دکمه بازگشت به فروشگاه

با اضافه کردن این دکمه، این امکان را به کاربران فروشگاه خود می­ دهید که از صفحه محصولات& مستقیما به فروشگاه بازگردند.

back to shopping- بازگشت به صفحه فروشگاه
بازگشت به صفحه فروشگاه
  • اضافه کردن متن به قیمت

شما با اضافه کردن متن توضیحات اضافی بعد از قیمت، توضیحات بیشتری در مورد قیمت و هزینه محصول به کاربر می‌­دهید. به عنوان مثال “2500000 ریال با احتساب مالیات بر ارزش افزوده”.

سفارشی سازی  Cart page و Checkpot page

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

  • ویرایش صفحه سبد خرید خالی

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

edit empty checkout- ویرایش امکانات ووکامرس
ویرایش سبد خرید خالی
  • حذف یادداشت­‌های اضافی

در این قسمت می‌­توانید متن­‌های اضافی در صفحه پرداخت را حذف کنید.

remove order notes- حذف یادداشت‌های اضافی
حذف یادداشت‌های اضافی
  • نمایش تب حساب Neater

اگر پوسته وبسایت شما تب‌­های پیش‌فرض را طراحی نمی‌­کند، مشکلی نیست. با استفاده از این افزونه، باعث ایجاد تغییر در ووکامرس خواهید شد.

tab design- طراحی تب‌های فروشگاه
طراحی تب‌های فروشگاه
  • اطمینان از امنیت مشتریان

برای اطمینان از پرداخت مطمئن مشتریان، تصویری را به صفحه پرداخت اضافه کنید تا مشتریان با خیالی راحت از سایت شما خرید کنند.

add custom image- اضافه کردن تصویر سفارشی
افزودن تصویر
  • حذف فیلدهای خرید و صورتحساب در صفحه پرداخت ووکامرس

WooCustomizer تنظیمات اضافی را برای حذف قسمت­‌های ورودی خاصی در صفحه پرداخت فروشگاه ووکامرسی شما ارائه می­‌دهد. ازجمله این ویژگی برای زمانی که کاربر در حال خرید محصولات است، به کار می‌­آید.

 

remove checkout field- حذف فیلدهای سبد خرید
حذف فیلدهای سبد خرید
  • اضافه کردن متن براساس ترتیب دکمه‌­ها

شما می‌­توانید متن‌­های مازاد را براساس ترتیب دکمه­‌ها قرار دهید.

add trxt to button- افزودن متن برای دکمه
افزودن متن برای دکمه
  • حذف عناصر صفحه فروشگاه

بخش کوپن‌­ها را در صفحه سبد خرید حذف کرده و یا متن کارت­‌های کوپن­ سبد خرید را ویرایش کنید.

remove coupon form- حذف فرم مربوط به کوپن
حذف فرم مربوط به کوپن

در این مقاله چگونه ایجاد تغییر در ووکامرس را امکان‌پذیر ساختیم؟

داشتن یک سایت وردپرسی قدرتمند، با ارزش است. زمانی شما می‌­توانید یک فروشگاه آنلاین وردپرسی داشته باشید و کاملا بدانید چه کاری می­‌خواهید انجام دهید، پس بدون برنامه و هدف دل به دریا نزنید. برای جذب مشتری و اعتماد آن­‌ها نیاز به یک‌سری اعمال و قدرت دارید. به عنوان مثال، فروشگاه شما باید جوری باشد که مشتری همانند خرید از یک فروشگاه واقعی احساس راحتی کند. بتواند محصول را به طور مجازی لمس کرده و از تمام ویژگی‌­های آن مطلع شود. تمام این موارد نیاز به کدنویسی­‌های سخت دارد ولی شما می­‌توانید با سفارشی سازی ووکامرس به این نتایج برسید و وسیله این تغییرات افزونه WooCustomizer است.
امیدواریم آموزش برای شما مفید بوده باشد. لطفاً نظرات خود را با ما به اشتراک بگذارید.

دانلود افزونه WooCustomizer

دانلود افزونه صفحه افزونه

سوالات متداول

یک افزونه وردپرسی است که برای ساخت فروشگاه اینترنتی از هر نوعی جوابگوست و با کمک آن می توان فروش اینترنتی داشت.
خود ووکامرس یک‌سری اقداماتی برای سفارشی و ویرایش امکانات ووکامرس به کاربران ارائه می­‌دهد اما مشکل اینجاست که باید برای ویرایش هر قسمتی کد PHP مربوطه را به آن اضافه کنید. شاید این راهکار برای شما سخت و دشوار باشد یا اصلا آنقدر که لازم است به کدنویسی تسلط نداشته باشید. یک راهکار ساده استفاده از افزونه WooCustomizer است. مطمئناً WooCustomizer یک افزونه پرکاربردی برای ایجاد تغییرات در صفحات فروشگاهی و سفارشی سازی ووکامرس به حساب می‌­آید. حتی شما می‌­توانید صفحات سبد خرید و پرداخت و همچنین صفحه حساب کاربری را ویرایش کنید. این واقعاً عالیست!
اضافه کردن آیتم Login / Logout به قسمت تم وردپرسی انتخاب شده. اضافه کردن آمار فروش محصولات برای ادمین کاربران در قسمت فرانت‌اند وبسایت. طراحی دکمه­‌های “افزودن به سبد خرید” و بنرهای ” فروش”. ویرایش قسمت حساب کاربر و عناوین محتوای تب­‌ها. ویرایش یا حذف تب صفحه محصولات و عناوین تب­‌ها. حذف قسمت­‌های اصلی پرداخت در صفحه پرداخت WooCommerce. به روزرسانی خودکار ایجکسی هنگام تغییر مقدار در صفحه سبد خرید. اضافه کردن قسمت “افزودن به سبد خرید“.
آیا این مقاله برای شما مفید بود؟
تقریبا
خیر

دیدگاهتان را بنویسید

ارسال دیدگاه به معنی این است که شما ابتدا قوانین ارسال دیدگاه را مطالعه کرده‌اید و با آن موافق هستید.

دیدگاه‌های این نوشته جدید ترین ها شاخص

  1. 6 ماه عضو همیار وردپرس

    سلام
    سایت من یک فروشگاه لباس است که سایز لباسها را به عنوان متغیر در نظر گرفتن
    در نظر بگیرید که دسته بندیهای متفاوت مثل لباس رنگ فیلی یا رنگ سرمه ای در سایت دارم که با زدن روی هر دسته بندی،کلیه لباسهای رنگ مرتبط را نمایش میدهد
    و هر کالای من دارای متغیرهای متفاوت شامل سایز مدیوم ،سایز لارج و اسمال است که هر کدام قیمت و موجودی متفاوتی دارند
    حالا مشتری با زدن روی دسته بندی رنگ سرمه ای کلیه لباسهای رنگ فیلی را میبیند==> اما میخواهیم این لباسها بر اساس موجوی آن نمایش داده شود (یعنی اول لباسهایی نمایش داده شود که موجودی بیشتری دارند
    در واقع میخوام موجودی کل متغیرها را جمع کنه ( یعنی موجودی لباس کد a سایز لارج،مدیوم و اسمال را جمع کنه و سپس بر اساس موجودی جمع آنها لباسهای دسته ی مرتبط را مرتب و نمایش دهد)
    آیا همچین کاری با این افزونه ای که اینجا معرفی کرده اید امکان پذیر است ؟
    تشکر

    • 10 سال عضو همیار وردپرس

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

  2. 3 سال عضو همیار وردپرس

    سلام چطوری میتونم تعداد نمایش محصولات مرتبط در محصول گروهی را محدود کنم؟ که بعد با دکمه مثلا show more نمایششون بده بقیه را

    • 10 سال عضو همیار وردپرس

      سلام
      از قسمت های ویرایش محصولات هر صفحه، ستون­‌های محصولات

  3. 3 سال عضو همیار وردپرس

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

  4. 1 سال عضو همیار وردپرس

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

  5. 3 سال عضو همیار وردپرس

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

  6. 4 سال عضو همیار وردپرس

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

  7. 4 سال عضو همیار وردپرس

    سلام
    امکان تغییر لینک صفحه سبد خرید ووکامرس هم هست تو این نسخه ؟

  8. 6 سال عضو همیار وردپرس

    سلام و وقتتون بخیر
    ممنون بخاطر آموزش های خوبتون
    تفاوت این افزونه با افزونه product-loops-for-woocommerc چیست؟

    • 10 سال عضو همیار وردپرس

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