جلسه 8: ویرایش صفحه پرداخت ووکامرس و فرم تسویه حساب

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

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

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

ویرایش صفحه پرداخت ووکامرس

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

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

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

بدون استفاده از افزونه

شما می‌توانید این فرآیند را از طریق کدنویسی پیاده‌سازی کنید. در صورتی که با کدنویسی آشنایی دارید، به راحتی می‌توانید با دنبال کردن دستورالعمل‌های ارائه‌شده، این کار را انجام دهید. این عملیات با ویرایش فایل functions.php قالب شما قابل اجرا است. تنها کافی است کدهای مورد نظر را به این فایل اضافه کنید.

توجه داشته باشید که کد ارائه‌شده برای حذف تمامی فیلدها طراحی شده است. اگر تمایل دارید برخی فیلدها باقی بمانند، می‌توانید بخش‌های مربوط به آن‌ها را از کد حذف کرده و سپس آن را در فایل functions.php قرار دهید. این روش به شما امکان می‌دهد تا به طور دقیق فیلدهای مورد نیاز خود را مدیریت کنید.

و البته با هربار بروزرسانی قالب این کدها حذف خواهند شد و مجددا باید آن ها را در فایل functions.php قرار دهید تا تغییرات اعمال شوند.

/* Remove Woocommerce User Fields by fanabyte.com */
add_filter( 'woocommerce_checkout_fields' , 'custom_override_checkout_fields' );
add_filter( 'woocommerce_billing_fields' , 'custom_override_billing_fields' );
add_filter( 'woocommerce_shipping_fields' , 'custom_override_shipping_fields' );
 
function custom_override_checkout_fields( $fields ) {
  unset($fields['billing']['billing_state']);
  unset($fields['billing']['billing_country']);
  unset($fields['billing']['billing_company']);
  unset($fields['billing']['billing_address_1']);
  unset($fields['billing']['billing_address_2']);
  unset($fields['billing']['billing_postcode']);
  unset($fields['billing']['billing_city']);
  unset($fields['shipping']['shipping_state']);
  unset($fields['shipping']['shipping_country']);
  unset($fields['shipping']['shipping_company']);
  unset($fields['shipping']['shipping_address_1']);
  unset($fields['shipping']['shipping_address_2']);
  unset($fields['shipping']['shipping_postcode']);
  unset($fields['shipping']['shipping_city']);
  return $fields;
}
function custom_override_billing_fields( $fields ) {
  unset($fields['billing_state']);
  unset($fields['billing_country']);
  unset($fields['billing_company']);
  unset($fields['billing_address_1']);
  unset($fields['billing_address_2']);
  unset($fields['billing_postcode']);
  unset($fields['billing_city']);
  return $fields;
}
function custom_override_shipping_fields( $fields ) {
  unset($fields['shipping_state']);
  unset($fields['shipping_country']);
  unset($fields['shipping_company']);
  unset($fields['shipping_address_1']);
  unset($fields['shipping_address_2']);
  unset($fields['shipping_postcode']);
  unset($fields['shipping_city']);
  return $fields;
}
/* End - Remove Woocommerce User Fields */

استفاده از افزونه WooCommerce Checkout Field Manager

در این روش دوم که قصد داریم آن را به شما معرفی کنیم، استفاده از افزونه WooCommerce Checkout Manager است. این افزونه به شما اجازه می‌دهد بدون نیاز به حتی یک خط کدنویسی، تنظیمات صفحه تسویه‌حساب فروشگاه خود را به‌راحتی مدیریت کنید.

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

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

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

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

علاوه بر این، با انتخاب گزینه Add New Field، می‌توانید فیلدهای جدیدی را به این صفحه اضافه کنید و آن را کاملاً متناسب با نیازهای فروشگاه خود سفارشی‌سازی نمایید. به عنوان مثال کد ملی یا هر اطلاعات دیگری را دریافت کنید.

یک مثال واقعی: در یک فروشگاه ارائه‌دهنده خدمات پرداخت درون‌برنامه‌ای برای بازی‌های موبایل، پس از خرید یک محصول، نیاز است اطلاعاتی از کاربر دریافت شود تا فرآیند پرداخت به درستی انجام پذیرد. این اطلاعات شامل ایمیل مرتبط با بازی، نام کاربری، رمز عبور و یک راه ارتباطی مانند تلگرام، واتس‌اپ یا سایر پلتفرم‌ها می‌شود. این داده‌ها به فروشگاه کمک می‌کند تا پرداخت را به‌صورت دقیق و مطمئن برای کاربر انجام دهد.

استفاده از افزونه WooCommerce Checkout Field Editor

روش استفاده از افزونه WooCommerce Checkout Field Editor برای ویرایش صفحه تسویه حساب هم بسیار ساده همچون افزونه قبلی میباشد و نحوه کارشان شبیه به یکدیگر میباشد.

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

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

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

پایان آموزش، موفق و شاد باشید. 🙂

آموزش نصب افزونه در وردپرس

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