Làm cách nào để thay đổi chi tiết thanh toán của tôi trong WooC Commerce?

Question

Quy trình thanh toán là một trong những bước quan trọng nhất trong hành trình của người mua — đó là cơ hội cuối cùng bạn phải thuyết phục người mua mua hàng. Nhưng một con số khổng lồ 63. 23% giỏ hàng thương mại điện tử bị bỏ rơi. Đó là rất nhiều người mua sắm trực tuyến quyết định mua một sản phẩm nhưng lại đổi ý vào giây cuối cùng

Nội dung chính Show

Sửa đổi trường thanh toán
Tùy chỉnh các trường thanh toán bằng plugin
Trình chỉnh sửa trường thanh toán
Tiện ích bổ sung WooC Commerce Checkout
Thanh toán một trang WooC Commerce
Đăng nhập xã hội WooC Commerce
Tùy chỉnh các trường thanh toán bằng đoạn mã
Xóa trường thanh toán
Tạo một trường bắt buộc không bắt buộc
Thay đổi nhãn trường đầu vào và trình giữ chỗ
Tùy chỉnh các trường thanh toán với các khối
Bắt đầu tùy chỉnh
Chia sẻ cái này
Như thế này
6 phản hồi

Có nhiều yếu tố ảnh hưởng đến các giỏ hàng bị bỏ rơi (như chi phí vận chuyển và tùy chọn thanh toán), nhưng bản thân trang thanh toán cũng đóng một vai trò. Nếu quá phức tạp, quá dài hoặc yêu cầu thông tin quá riêng tư, khách hàng có thể rời đi và mua một sản phẩm tương tự ở nơi khác

Một trong những cách tốt nhất để tối ưu hóa trang thanh toán của bạn là tùy chỉnh các trường dựa trên nhu cầu kinh doanh và đối tượng mục tiêu của bạn. Ví dụ: nếu bạn không thường bán hàng cho các công ty, hãy xóa trường Tên công ty. Nếu bạn gửi bất ngờ sinh nhật cho khách hàng, hãy bao gồm trường Ngày sinh. Nếu bạn bán các sản phẩm dành cho thú cưng, bạn nên hỏi Loại thú cưng

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tùy chỉnh trang thanh toán để đáp ứng nhu cầu của cả khách hàng và doanh nghiệp của bạn

Sửa đổi trường thanh toán

WooC Commerce cung cấp tất cả các trường cần thiết cho trang thanh toán của bạn. Theo mặc định, nó yêu cầu người mua sắm

Chi tiết thanh toán
Họ
Họ
Tên công ty
Quốc gia
Địa chỉ nhà
Thị xã/Thành phố
Quận
Mã bưu / Zip
Điện thoại
Địa chỉ email
Ghi chú đặt hàng

Nhưng có rất nhiều cách bạn có thể chỉnh sửa trang để đáp ứng nhu cầu của mình, bao gồm

Chỉnh sửa thiết kế
Thay đổi văn bản trên nút “Đặt hàng”
Xóa một trường
Tạo một trường bắt buộc (hoặc không bắt buộc)
Thay đổi nhãn trường đầu vào và văn bản giữ chỗ
Xác minh tùy chọn giao hàng
Cho phép khách hàng yêu cầu ngày giao hàng hoặc thời hạn
Đặt phương thức liên hệ ưa thích

Đây chỉ là một số tùy chỉnh mà bạn có thể thực hiện — WooC Commerce cung cấp tính linh hoạt gần như vô tận cho mọi cấp độ trải nghiệm. Nếu cảm thấy thoải mái với việc phát triển, bạn có thể tùy chỉnh bằng cách sử dụng các đoạn mã. Hoặc nếu bạn thích một phương pháp khác, có một số cách bạn có thể thực hiện việc này mà không yêu cầu một dòng mã nào

Tùy chỉnh các trường thanh toán bằng plugin

WooC Commerce cung cấp một số tiện ích mở rộng tuyệt vời để chỉnh sửa các trường thanh toán mà không cần chạm vào một dòng mã

Trình chỉnh sửa trường thanh toán

Tiện ích Trình chỉnh sửa trường thanh toán cho phép bạn thêm và xóa các trường thanh toán hoặc cập nhật loại, nhãn và giá trị giữ chỗ bằng một vài cú nhấp chuột. Bạn cũng có thể đánh dấu từng trường thanh toán là “bắt buộc” hoặc “không bắt buộc. ”

Khi thêm một trường mới, bạn có thể chọn từ các loại sau

Văn bản – kiểu nhập văn bản tiêu chuẩn
Mật khẩu – nhập văn bản mật khẩu
Textarea – một trường văn bản lớn hơn
Chọn – một hộp thả xuống với các tùy chọn mà khách hàng có thể chọn
Nhiều lựa chọn – hộp cho phép người mua sắm chọn nhiều tùy chọn
Radio – một tập hợp các đầu vào radio mà khách hàng có thể chọn
Hộp kiểm – trường hộp kiểm cho phép nhiều lựa chọn
Bộ chọn ngày – một trường văn bản có đính kèm bộ chọn ngày
Tiêu đề – một tiêu đề để tổ chức một trang dài hơn

Có vô số cách sử dụng chúng để mang lại trải nghiệm hàng đầu cho khách hàng của bạn. Nếu mọi người thường tặng sản phẩm của bạn làm quà tặng, thì bạn có thể cung cấp hộp kiểm để thêm gói quà hoặc ghi chú đặc biệt. Hoặc bạn có thể sử dụng các nút radio để cho phép khách hàng lựa chọn giữa bao bì đơn giản, bao bì theo chủ đề sinh nhật hoặc bao bì theo chủ đề kỷ niệm. Bạn có thể đặt trường này thành bắt buộc, đặt nhãn thành “Chọn loại gói hàng của bạn” và đặt trình giữ chỗ thành “đơn giản. ”

Hoặc, giả sử bạn bán dịch vụ thiết kế đồ họa. Bạn có thể sử dụng trường chọn ngày để cho phép khách hàng chọn ngày ưa thích của họ cho cuộc gọi điện thoại tư vấn. Bạn cũng có thể bao gồm các trường vùng văn bản cho phép họ mô tả cụ thể những gì họ đang tìm kiếm ở một nhà cung cấp

Và để hỗ trợ các tùy chỉnh nâng cao hơn, Checkout Field Editor cung cấp tài liệu hữu ích

Tiện ích bổ sung WooC Commerce Checkout

Tiện ích bổ sung WooC Commerce Checkout cho phép bạn linh hoạt cung cấp các tiện ích bổ sung miễn phí hoặc trả phí khi thanh toán. Bạn có thể thêm một số loại trường vào trang thanh toán của mình, bao gồm trường văn bản, vùng văn bản, danh sách thả xuống, nhiều lựa chọn, nút radio, hộp kiểm, nhiều hộp kiểm và tệp tải lên

Nếu bạn bán sản phẩm công nghệ hoặc đồ chơi, bạn có thể cho khách hàng cơ hội mua thêm bảo hiểm với một khoản phí bổ sung. Nếu bạn bán các mặt hàng tùy chỉnh, bạn có thể bao gồm trường văn bản để cá nhân hóa. Hoặc nếu bạn bán các sản phẩm nhạy cảm với thời gian, bạn có thể cung cấp một bản nâng cấp để đáp ứng gấp

Trong trang tổng quan của mình, bạn cũng có thể sắp xếp và lọc các đơn đặt hàng dựa trên các tùy chọn bạn đã tạo. Điều này có thể hữu ích nếu bạn muốn ưu tiên các đơn đặt hàng theo ngày giao hàng hoặc chỉ hiển thị các đơn đặt hàng được xử lý nhanh. Hoặc bạn có thể muốn đóng gói tất cả các đơn đặt hàng gói quà cùng một lúc

Thanh toán một trang WooC Commerce

Bạn muốn đơn giản hóa quy trình thanh toán của mình hơn nữa?

Theo một nghiên cứu của Viện Baymard, cứ bốn người mua sắm thì có một người từ bỏ giỏ hàng do quy trình thanh toán lâu hoặc phức tạp. WooC Commerce One Page Checkout chống lại điều này bằng cách cho phép khách hàng thêm sản phẩm vào giỏ hàng của họ và gửi tất cả thanh toán trên cùng một trang.

Bạn thậm chí có thể thêm các trường thanh toán vào trang đích, điều này đặc biệt hữu ích nếu bạn là doanh nghiệp kinh doanh dịch vụ, bán gói đăng ký hoặc cung cấp dịch vụ đặt lịch hẹn. Trong những trường hợp đó, bạn có thể không cần các trang sản phẩm riêng lẻ — việc thêm tùy chọn để khách hàng kiểm tra trên trang đích hoặc trang so sánh ưu đãi sẽ loại bỏ các bước bổ sung không cần thiết

Scan2CAD sử dụng tiện ích mở rộng này để tạo quy trình thanh toán tùy chỉnh, siêu đơn giản. Khách hàng có thể chọn gói, nhập mã phiếu giảm giá và thêm thông tin lập hóa đơn và thanh toán trên một trang siêu hợp lý

Đăng nhập xã hội WooC Commerce

Buộc khách hàng tạo tài khoản trên trang web của bạn là một rào cản tiềm năng đối với việc mua hàng vì nó thêm các bước. Cung cấp cho họ khả năng sử dụng hồ sơ truyền thông xã hội hiện có của họ để tạo tài khoản giúp phá vỡ rào cản này.

Tiện ích mở rộng Đăng nhập xã hội WooC Commerce giúp quá trình này trở nên dễ dàng và an toàn nhất có thể. Khách hàng có thể đăng nhập vào trang web của bạn bằng tài khoản Facebook, Twitter, Google, Amazon, LinkedIn, PayPal, Instagram, Disqus, Yahoo hoặc VK của họ thay vì điền vào biểu mẫu thiết lập tài khoản phức tạp

Tùy chỉnh các trường thanh toán bằng đoạn mã

Ghi chú. Nếu bạn không quen với mã và giải quyết các xung đột tiềm ẩn, hãy chọn WooExpert hoặc Nhà phát triển để được hỗ trợ. Chúng tôi không thể cung cấp hỗ trợ cho các tùy chỉnh theo Chính sách hỗ trợ của chúng tôi

Đoạn mã là cách linh hoạt để nhà phát triển và chủ sở hữu cửa hàng tùy chỉnh các trường thanh toán WooC Commerce. Dưới đây là danh sách các thẻ chính, bao gồm các lớp và ID, mà bạn có thể sử dụng để chỉnh sửa thiết kế trực quan của trang thanh toán của mình. Thêm CSS tùy chỉnh vào chủ đề con của bạn hoặc Trình tùy chỉnh WordPress

Để xem tất cả các lớp và bộ chọn, hãy sử dụng trình kiểm tra của trình duyệt trên trang web của bạn để tìm khu vực chính xác mà bạn muốn tùy chỉnh

<body class="woocommerce-checkout">
<div class="woocommerce">
<form class="woocommerce-checkout">
<div id="customer_details" class="col2-set">
<div class="woocommerce-billing-fields">
<p class="form-row">
<div class="woocommerce-shipping-fields">
<p class="form-row">
<div class="woocommerce-additional-fields">
<div id="order_review" class="woocommerce-checkout-review-order">
<table class="woocommerce-checkout-review-order-table">
<div id="payment">
<ul class="wc_payment_methods payment_methods methods">
<div class="form-row place-order">

Ví dụ: để thay đổi màu nền của hộp nhập văn bản và cung cấp cho chúng các góc tròn, bạn sẽ thêm mã này nếu bạn đang sử dụng mã ngắn thanh toán

.woocommerce-checkout input[type="text"] {
border-radius: 10px;
background-color: #222;
}

Và mã này cho thanh toán dựa trên khối

.wc-block-checkout input[type="text"] {
border-radius: 10px;
background-color: #222;
}

Xóa trường thanh toán

Điều này khá đơn giản, nhưng hãy cẩn thận vì thay đổi này có thể gây ra xung đột với các tiện ích mở rộng và plugin khác. Bất cứ khi nào thực hiện các thay đổi đối với mã thực tế của cửa hàng của bạn, chúng tôi thực sự khuyên bạn nên thử chúng trước trên trang web dàn dựng

Thêm đoạn mã sau vào chức năng của chủ đề con của bạn. php hoặc sử dụng plugin đoạn mã, cho phép bạn thêm mã vào trang web của mình mà không cần chỉnh sửa tệp chủ đề. Lưu ý rằng việc dán toàn bộ mã sẽ xóa tất cả các trường khỏi trang thanh toán, vì vậy hãy đảm bảo chỉ bao gồm các trường bạn muốn xóa.

/**
 Remove all possible fields
 **/
function wc_remove_checkout_fields( $fields ) {

    // Billing fields
    unset( $fields['billing']['billing_company'] );
    unset( $fields['billing']['billing_email'] );
    unset( $fields['billing']['billing_phone'] );
    unset( $fields['billing']['billing_state'] );
    unset( $fields['billing']['billing_first_name'] );
    unset( $fields['billing']['billing_last_name'] );
    unset( $fields['billing']['billing_address_1'] );
    unset( $fields['billing']['billing_address_2'] );
    unset( $fields['billing']['billing_city'] );
    unset( $fields['billing']['billing_postcode'] );

    // Shipping fields
    unset( $fields['shipping']['shipping_company'] );
    unset( $fields['shipping']['shipping_phone'] );
    unset( $fields['shipping']['shipping_state'] );
    unset( $fields['shipping']['shipping_first_name'] );
    unset( $fields['shipping']['shipping_last_name'] );
    unset( $fields['shipping']['shipping_address_1'] );
    unset( $fields['shipping']['shipping_address_2'] );
    unset( $fields['shipping']['shipping_city'] );
    unset( $fields['shipping']['shipping_postcode'] );

    // Order fields
    unset( $fields['order']['order_comments'] );

    return $fields;
}
add_filter( 'woocommerce_checkout_fields', 'wc_remove_checkout_fields' );

Ghi chú. Trường Quốc gia là bắt buộc. Nếu bạn xóa nó, các đơn đặt hàng sẽ không thể hoàn thành và biểu mẫu thanh toán của bạn sẽ báo lỗi sau. “Vui lòng nhập địa chỉ để tiếp tục. ”

Tạo một trường bắt buộc không bắt buộc

Trong ví dụ bên dưới, chúng tôi sẽ chỉnh sửa trường Số điện thoại thanh toán để không bắt buộc. Thêm mã này vào các chức năng của chủ đề con của bạn. tập tin php

add_filter( 'woocommerce_billing_fields', 'wc_unrequire_wc_phone_field');
function wc_unrequire_wc_phone_field( $fields ) {
$fields['billing_phone']['required'] = false;
return $fields;
}

Ngoài ra, nếu bạn muốn tạo một trường bắt buộc, hãy thay đổi văn bản “false” thành “true” (Nhưng không bao gồm dấu ngoặc kép)

Thay đổi nhãn trường đầu vào và trình giữ chỗ

Thêm đoạn mã sau vào chức năng của chủ đề con của bạn. php để chỉnh sửa nhãn và trình giữ chỗ của trường thanh toán của bạn. Bạn có thể tùy chỉnh nó để phù hợp với nhu cầu của bạn.

add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');
function custom_override_checkout_fields($fields)
 {
 unset($fields['billing']['billing_address_2']);
 $fields['billing']['billing_company']['placeholder'] = 'Business Name';
 $fields['billing']['billing_company']['label'] = 'Business Name';
 $fields['billing']['billing_first_name']['placeholder'] = 'First Name'; 
 $fields['shipping']['shipping_first_name']['placeholder'] = 'First Name';
 $fields['shipping']['shipping_last_name']['placeholder'] = 'Last Name';
 $fields['shipping']['shipping_company']['placeholder'] = 'Company Name'; 
 $fields['billing']['billing_last_name']['placeholder'] = 'Last Name';
 $fields['billing']['billing_email']['placeholder'] = 'Email Address ';
 $fields['billing']['billing_phone']['placeholder'] = 'Phone ';
 return $fields;
 }

Tùy chỉnh các trường thanh toán với các khối

Các khối WordPress là các khối xây dựng của các trang trên trang web của bạn. Bạn có thể sử dụng trình chỉnh sửa khối để kéo và thả văn bản, hình ảnh, nút, video, v.v. để tạo và chỉnh sửa các trang trên trang web của mình.

Điều này cũng mở rộng đến khối Checkout mới. Mặc dù chưa thể tùy chỉnh đầy đủ nhưng khối này đưa ra rất nhiều tùy chọn mới để sửa đổi trải nghiệm thanh toán mà không cần bất kỳ kiến thức mã hóa nào. Giờ đây, bạn có thể bật và tắt các trường để bạn chỉ bao gồm những gì liên quan nhất đến những gì bạn đang bán để quy trình khách hàng đơn giản hơn, nhanh hơn. Và phần tốt nhất?

Bạn có thể thêm Thanh toán WooC Commerce vào hỗn hợp để có trải nghiệm khách hàng liền mạch hơn. Sử dụng tiện ích mở rộng này để giữ khách hàng trên trang web của bạn thanh toán thay vì hướng họ đến bộ xử lý thanh toán của bên thứ ba. Thêm các tùy chọn thanh toán nhanh như Apple Pay cho phép họ sử dụng các tài khoản hiện có để bỏ qua rất nhiều bước và hoàn tất giao dịch mua nhanh hơn.

Nhiều cửa hàng đã đạt được thành công lớn khi sử dụng khối Checkout với tỷ lệ chuyển đổi tăng trung bình 12%

Tìm hiểu thêm về khối Checkout và nếu bạn là nhà phát triển, hãy xem cách bạn có thể tùy chỉnh khối Checkout hơn nữa

Bắt đầu tùy chỉnh

Quá trình thanh toán có thể có tác động đáng kể đến tỷ lệ chuyển đổi của bạn, vì vậy bạn nên thực hiện các thay đổi một cách cẩn thận, có tính đến mục tiêu cụ thể

Rất may, WooC Commerce mang đến cho bạn sự linh hoạt trong việc tùy chỉnh quy trình thanh toán để phục vụ tốt nhất các khách hàng cụ thể của bạn. Cho dù bạn cần thực hiện các thay đổi trực quan hay thêm và xóa các trường thanh toán, bạn có rất nhiều giải pháp để lựa chọn

Tìm kiếm một công cụ để làm cho quá trình dễ dàng hơn?

Chia sẻ cái này

Facebook
Twitter
Pinterest
LinkedIn

Như thế này

Thích Đang tải.

6 phản hồi

phạm tội
Tháng Một 11, 2020 tại 4. 22 giờ tối
Gặp sự cố khi thực hiện việc này và cảm ơn cuối cùng tôi cũng đang thực hiện như CHUYÊN NGHIỆP
- Mariah Liszewski
  Tháng Một 16, 2020 tại 3. 31 giờ sáng
  Thật tuyệt khi nghe, Ofentse. Cảm ơn vì đã đọc
Oliviahoros
Tháng Một 21, 2020 tại 8. 25 giờ chiều
Xóa (các) trường. Bạn có thể xóa các trường) khỏi hiển thị trong trang thanh toán, trang chi tiết đơn hàng và email. Xóa các trường cốt lõi có thể dẫn đến kết quả không mong muốn với một số plugin. Chúng tôi không khuyến nghị điều này
- Mariah Liszewski
  Tháng Một 22, 2020 tại 7. 37 giờ chiều
  Tuyệt đối, Olivia. Chúng tôi cũng đã đề cập vấn đề này trong bài đăng — việc xóa một số trường có thể xung đột với plugin/tiện ích mở rộng, vì vậy bạn phải luôn cẩn thận và kiểm tra đúng cách
César
Tháng Hai 2, 2020 tại 11. 47 giờ chiều
Xin chào Mariah, bạn có biết liệu các trường địa chỉ có bắt buộc phải có để thanh toán bằng Paypal hoặc Stripe không? . Tôi muốn làm cho nó nhanh chóng và dễ dàng cho họ. Ngoài ra, vì tôi bán hàng hóa kỹ thuật số nên tôi không cần địa chỉ, điện thoại hay thậm chí tên của họ nhưng tôi không chắc liệu điều đó có gây ra sự cố với các cổng thanh toán hay không