شخصی سازی صفحه تسویه حساب ووکامرس
آموزش شخصی سازی صفحه تسویه حساب ووکامرس: با درود به همراهان خوب آکادمی وبکیما! در ادامه مقالات آموزش وردپرس و آموزش ووکامرس میرسیم به آموزش مدیریت صفحه پرداخت در ووکامرس، همانطور که در آموزش پرداخت مستقیم در ووکامرس خدمتون عرض کردیم، مراحل پرداخت در فروشگاه های اینترنتی هر چقدر آسان تر باشد و هرچقدر کاربر پسندتر باشد فروش محصولات هم به طرز چشمگیری افزایش پیدا میکند.
برای همین هم موتور جستجوی گوگل به بحث UI و UX در سئوی سایت خیلی اهمیت میده، پس حالا که بحث تجربه کاربری در سایت ها و فروشگاه ها و کسب و کارهای اینترنتی اینقدر مهمه بریم تا بهتون مدیریت صفحه پرداخت در ووکامرس رو آموزش بدم، پس اگر می خواهید که با تنظیمات صفحه تسویه حساب ووکامرس تجربه کاربری سایت خود را بهبود ببخشید تا انتهای این مقاله همراه ما باشید.
راهنمای مطالعه:
شخصی سازی صفحه تسویه حساب ووکامرس با حذف فیلدهای اضافی صفحه تسویه حساب
اگه فقط می خواهید که چند تا از فیلد های صفحه تسویه حساب در ووکامرس رو حذف کنید نیازی نیست که افزونه ای نصب کنید، می توانید با قطعه کدی که در پایین قرار دادیم هر کدام از فیلد هایی که بنظرتون اضافیه و توی فروشگاه اینترنتی شما بکار نمیاد حذف کنید. قطعه کد زیر رو در فایل functions.php قالب سایت قرار بدید، اگه هم قالبتون فایل functions.php رو نداره خب براش بسازید!
قطعه کد شخصی سازی صفحه پرداخت ووکامرس
/* Remove Woocommerce User Fields */
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 */ویرایش صفحه پرداخت ووکامرس با قطعه کد بالا
خب قطعه کدی که در بالا مشاهده می کنید برای حذف تمامی فیلدهای صفحه تسویه حساب است ، یعنی اگه همین کد بالا رو بدون کم و زیاد کردن در داخل فایل فانکشن قالب سایت قرار بدید تمامی فیلدهای صفحه تسویه حساب حذف خواهد شد.
پس شما قبل از اینکه کد رو داخل فایل فانکشن قرار بدید ابتدا کد رو داخل یک فایل text بریزید و از اونجا فیلدهایی که می خواهید توی صفحه تسویه حساب داشته باشید رو از داخل کد حذف کنید.
خب تا حالا فقط حذف کردن فیلد ها رو یاد گرفتید اگه بخواید هم بتونید فیلد هایی رو حذف کنید هم بتونید فیلد هایی رو به صفحه تسویه حساب در ووکامرس اضافه کنید، این کارو با استفاده از افزونه WooCommerce Checkout Manager انجام میدیم که در ادامه به آن می پردازیم.
ویرایش فرم پرداخت ووکامرس با WooCommerce Checkout Manager
در ادامه این آموزش میخواهیم شخصی سازی صفحه تسویه حساب ووکامرس را با استفاده از افزونه WooCommerce Checkout Manager آموزش دهیم پس همچنان همراه ما باشید.
افزونه شخصی سازی صفحه تسویه حساب ووکامرس
خب افزونه WooCommerce Checkout Manager یک افزونه وردپرس و ووکامرس (بهترین افزونه های ووکامرس) است که تا امروز که این مقاله رو تهیه میکنیم بیشتر از 100 هزار نصب فعال داره که نشون از کاربردی بودن این افزونه هست.
این افزونه، مدیریت صفحه Checkout در ووکامرس رو برای ما انجام میده و کارهایی که میشه با این افزونه انجام داد به شرح زیر است:
- مدیریت تغییر نام فیلد های صفحه Checkout در ووکامرس
- مدیریت پرداختی ها
- مدیریت قسمت حمل و نقل در ووکامرس
- مدیریت و گسترش یا مخفی سازی پرداخت در زمان صادر کردن صورت حساب مشتری
- و…. کلی امکانات دیگر
خب برای نصب این افزونه (آموزش نصب افزونه در وردپرس) از پیشخوان وردپرس از گزینه افزونه ها > افزودن رو انتخاب کرده و در قسمت جستجوی افزونه ها عبارت WooCommerce Checkout Manager رو وارد کنید تا افزونه نمایش داده بشه: یا می تونید از پایین همین صفحه افزونه مدیریت صفحه Checkout در ووکامرس را بصورت مستقیم از مخزن وردپرس دانلود کنید.
خب بعد روی هم اکنون نصب کن کلیک کرده و برای مدیریت برگه پرداخت در ووکامرس افزونه رو فعال کنید . بعد از فعال کردن افزونه یک گزینه با نام “Woocheckout” در پنل وردپرس قابل مشاهده خواهد بود :
حالا برای مدیریت صفحه پرداخت در ووکامرس گزینه های این افزونه رو توضیح میدهیم:
Woocheckout
با انتخاب گزینه Woocheckout وارد صفحه اصلی افزونه میشیم که شامل چند قسمت است که با استفاده از آن می تونید مدیریت برگه پرداخت در ووکامرس رو انجام بدید.
بخش General از افزونه WooCommerce Checkout Manager
تب General اولین قسمت از افزونه است که بعد از وارد شدن به صفحه افزونه قابل مشاهده است ، این بخش خود شامل قسمت های گوناگونی است که در تصویر زیر مشاهد می کنید:
Upload:
همانطور که از نام این قسمت قابل حدس زدن است، این بخش برای تنظیمات افزودن قابلیت آپلود فایل های مختلف به صفحه پرداخت در ووکامرس است که این قابلیت به مدل و امکانات سایت شما بستگی دارد که بخواهید استفاده کنید یا خیر.
Hide Address Field:
با استفاده از این قسمت از افزونه ویرایش صفحه پرداخت ووکامرس می تونید فیلد آدرس محصولاتی که نیازی به آدرس ندارند رو مخفی کنید. برای این منظور باید آی دی محصولات رو در فیلد مربوطه وارد کنید.
به عنوان مثال بعضی از فروشگاه های اینترنتی هم فایل فیزیکی و هم فایل مجازی و دانلودی رو میخوان بفروشند که برای محصولات مجازی دیگه نیازی به فیلد آدرس در صفحه پرداخت ووکامرس ندارند پس آی دی محصولات مجازی رو داخل فیلد Hide Address Field قرار میدن تا دیگه فیلد آدرس نمایش داده نشه.
Checkout Notices:
در این قسمت می تونید متن دلخواهی رو وارد کنید تا به صورت نوتیفیکیشن قبل از پرداخت به مشتریان نمایش داده بشه.
Switches:
با استفاده از تب Switches میتونید بخش هایی رو عوض کرده تا با انتخاب خود مشتری به آن صفحات منتقل شود.
Order Notes:
با استفاده از قسمت Order Notes می تونید برچسب های مربوط به تنظیمات سفارش ، زمان سفارش و… را شخصی سازی کنید.
Custom CSS:
در این قسمت می تونید css های افزونه مدیریت صفحه پرداخت در ووکامرس رو سفارشی سازی کنید .
Advanced:
در اینجا هم تنظیمات پیشرفته افزونه مدیریت صفحه پرداخت در ووکامرس قرار دارند که شامل گزینه های زیر است:
- Administrator Actions
- Reset Run the updater prompt
- Delete WooCommerce Checkout Manager WordPress Options
- Delete WooCommerce Checkout Manager Orders Post meta
- Delete WooCommerce Checkout Manager Users Post meta
که بیشتر این تنظیمات مربوط به پاک کردن تنظیماتی هست که با این افزونه ایجاد کردید.
افزونه تنظیمات صفحه پرداخت ووکامرس قسمت Billing
خب رسیدیم به قسمت اصلی و خیلی کاربردی افزونه که ما بخاطرش افزونه مدیریت صفحه پرداخت در ووکامرس رو نصب کردیم . همانطور که در تصویر بالا مشاهده میکنید تمامی قسمت های فیلدهای صفحه صورت حساب در ووکامرس با استفاده از این افزونه قابل ویرایش است.
در قسمت Label می تونید نام فیلد ها رو به دلخواه تغییر بدید. در پایین صفحه با زدن روی Add New Field می تونید یک فیلد جدید هم به صفحه Checkout در ووکامرس اضافه کنید برای مثال می تونید یک فیلد بسازید تا اکانت تلگرام مشتری هاتون رو بگیرید. جالبه نه!
پیکربندی بخش Shipping در افزونه ویرایش فرم پرداخت ووکامرس
پیکربندی تنظیمات این بخش دقیقا مانند بخش قبلی است با این تفاوت که این قسمت فیلدهای مربوط به حمل و نقل کالا است. که با استفاده از آن اطلاعاتی که برای ارسال کالا به مشتری لازم است را بتونیم دریافت کنیم.
بخش Export و Import در افزونه مدیریت صفحه پرداخت در ووکامرس
افزونه مدیریت صفحه پرداخت در ووکامرس قابلیت Export و Import تنظیمات رو داره یعنی می تونید بعد از اینکه تنظیمات افزونه رو شخصی سازی کردید از تظیمات خود Export گرفته و در سایت های دیگه Import کنید و با این کار در زمانتون صرفه جویی کنید.
چگونه یک فیلد اضافی به صفحه پرداخت ووکامرس بدون افزونه اضافه کنم؟
برای افزودن یک فیلد اضافی به صفحه پرداخت ووکامرس و بدون استفاده از افزونه می توانید از قطعه کد زیر استفاده کنید:
/*** Add custom field to the checkout page*/
add_action('woocommerce_after_order_notes', 'custom_checkout_field');
function custom_checkout_field($checkout)
{
echo '<div id="custom_checkout_field"><h2>' . __('New Heading') . '</h2>';
woocommerce_form_field('custom_field_name', array(
'type' => 'text',
'class' => array(
'my-field-class form-row-wide'
) ,
'label' => __('Custom Additional Field') ,
'placeholder' => __('New Custom Field') ,
) ,
$checkout->get_value('custom_field_name'));
echo '</div>';
}در مقالات بعدی روش کامل استفاده از این کد را آموزش خواهیم داد.
دانلود افزونه WooCommerce Checkout Manager
در ادامه برای شما همراهان گرامی لینک دانلود افزونه قدرتمند WooCommerce Checkout Manager را قرار دادیم که می توانید با استفاده از دکمه زیر به صفحه این افزونه فوق العاده در مخزن وردپرس رفته و افزونه را دانلود کرده و در سایت خود استفاده کنید.
چی یاد گرفتیم؟
در انتها امیدوارم که شخصی سازی صفحه پرداخت ووکامرس را بخوبی یاد گرفته باشید و بتونید با حذف فیلدهای اضافی از برگه پرداخت در ووکامرس و افزودن فیلد های کاربردی به آن تجربه کاربری سایت خود را بهبود ببخشید و فروش سایت خود را بالا ببرید. اگر سوال یا مشکلی در زمینه شخصی سازی صفحه تسویه حساب ووکامرس مشکلی داشتید در قسمت نظرات با ما در تماس باشید. ممنون از همراهیتون 😉
دیدگاه و پرسش