WooC Commerce chắc chắn là một phần mềm tuyệt vời cho thương mại điện tử WordPress, nhưng thường rất khó để tùy chỉnh cửa hàng của bạn mà không mua addon này đến addon khác từ các nhà phát triển
Gần đây, một khách hàng sử dụng chủ đề Avada đã hỏi về cách họ có thể thay đổi văn bản Chi tiết thanh toán và Thông tin thanh toán trên trang thanh toán giỏ hàng và rất may đó là một quy trình khá đơn giản
Chỉ cần thêm đoạn mã sau vào các chức năng của chủ đề [hoặc chủ đề con tốt nhất]. php và bạn nên bắt đầu
//Change the billing details heading and the billing information tab label
function wc_billing_field_strings[ $translated_text, $text, $domain ] {
switch [ $translated_text ] {
case 'Billing Address' :
$translated_text = __[ 'Customer Information', 'woocommerce' ];
break;
case 'Billing details' :
$translated_text = __[ 'Customer Details', 'woocommerce' ];
break;
}
return $translated_text;
}
add_filter[ 'gettext', 'wc_billing_field_strings', 20, 3 ];
Thay thế văn bản cần thiết bằng văn bản của riêng bạn và trong mỗi trường hợp [vì chúng tôi đang sử dụng chức năng CASE của PHP ở đây], văn bản sẽ thay đổi thành văn bản bạn cung cấp, trong trường hợp này, “Địa chỉ thanh toán” [nhãn tab] trở thành “Thông tin khách hàng”
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
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
- Tên đầu tiên
- Họ
- Tên công ty
- Quốc gia
- Địa chỉ nhà
- Thị xã/Thành phố
- Huyện
- Mã bưu / Zip
- Điện thoại
- Địa chỉ 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ủ 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
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 không thể được 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ờ tối
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
Chủ Đề