Bạn muốn tùy chỉnh và thêm các trường vào thanh toán của mình? Tìm hiểu cách thêm các trường tùy chỉnh vào trang thanh toán trong WooCommerce theo lập trình.

Bạn đang xem : woocommerce thêm biểu mẫu để thanh toán

Cách thêm trường tùy chỉnh vào trang thanh toán WooCommerce

|

Trong

Trong WooCommerce

|

Bởi

Bởi Sebastopolys

Bạn có muốn tùy chỉnh thanh toán của mình không? Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm các trường tùy chỉnh vào trang thanh toán trong WooCommerce để đưa cửa hàng của bạn lên một tầm cao mới.

Tại sao phải tùy chỉnh thanh toán WooCommerce?

Trong QuadLayers, trước đây chúng ta đã biết cách tùy chỉnh trang cửa hàng trong WooCommerce . Hôm nay, chúng ta sẽ xem xét cách thực hiện điều tương tự và bao gồm các trường tùy chỉnh trong thanh toán. Thanh toán là một trong những trang quan trọng nhất đối với bất kỳ cửa hàng trực tuyến nào . Đó là nơi bạn muốn đưa những người mua sắm của mình đến để họ hoàn tất giao dịch mua và bạn kết thúc giao dịch bán hàng. Vì vậy, để cải thiện tỷ lệ chuyển đổi và doanh thu của bạn, việc tối ưu hóa thanh toán với các trường tùy chỉnh là điều bắt buộc.

Như thế nào là trang thanh toán hoàn hảo? Điều đó phụ thuộc rất nhiều vào hoạt động kinh doanh của bạn. Ví dụ: thanh toán cho các sản phẩm vật lý khác với thanh toán cho các sản phẩm kỹ thuật số. Bạn chọn kiểm tra một trang hoặc nhiều trang, hiển thị hoặc ẩn các trường, sử dụng các màu khác nhau, v.v. Tuy nhiên, điều quan trọng nhất là quy trình thanh toán của bạn tạo được niềm tin ở người dùng, không gây phiền nhiễu và được tối ưu hóa để người mua sắm dành ít thời gian nhất có thể.

Làm cách nào để thêm các trường tùy chỉnh vào trang thanh toán WooCommerce?

Có hai cách chính để thêm hoặc ẩn các trường tùy chỉnh trên trang thanh toán trong WooCommerce:

  • Với các plugin
  • Theo chương trình

Nếu bạn không có kỹ năng viết mã, chúng tôi khuyên bạn nên xem các plugin sau:

  • WooCommerce Direct Checkout : Đây là một công cụ tuyệt vời để đơn giản hóa quy trình thanh toán và chuyển hướng người dùng từ trang sản phẩm đến thanh toán. Nó có phiên bản miễn phí và các gói cao cấp bắt đầu từ 19 USD.
  • WooCommerce Checkout Manager : Với hơn 90.000 lượt cài đặt đang hoạt động, Checkout Manager là một plugin tuyệt vời để tăng tỷ lệ chuyển đổi của bạn. Nó cho phép bạn thêm, tùy chỉnh và xóa các trường trên trang thanh toán. Đây là một công cụ miễn phí với phiên bản miễn phí và các gói chuyên nghiệp từ 19 USD.

Những plugin thanh toán đó là những lựa chọn tuyệt vời và sẽ hoàn thành công việc một cách suôn sẻ. Tuy nhiên, nếu bạn không muốn cài đặt bất kỳ plugin nào, bạn có thể viết mã giải pháp của mình. Trong hướng dẫn này, chúng tôi sẽ tập trung vào cách bạn có thể thêm các trường tùy chỉnh vào trang kiểm tra WooCommerce bằng một số mã hóa .

Thêm các trường tùy chỉnh vào thanh toán WooCommerce theo chương trình

Trong phần này, bạn sẽ tìm hiểu cách thêm các trường tùy chỉnh vào trang thanh toán WooCommerce theo lập trình . Chúng tôi sẽ hướng dẫn bạn cách bao gồm:

  • Văn bản
  • Hộp kiểm
  • Các loại đầu vào radio

Có những trường tùy chỉnh khác mà bạn có thể thêm, nhưng xin lưu ý rằng chúng có thể cần một số loại xác thực. Vì vậy, trong hướng dẫn này, chúng ta sẽ tập trung vào 3 loại đó và bỏ qua các trường yêu cầu xác thực các giá trị đã nhập. Ngoài ra, chúng tôi sẽ hiển thị các trường tùy chỉnh trong danh sách đơn đặt hàng phụ trợ và các mẫu email.

LƯU Ý : Hãy nhớ rằng nếu bạn muốn thêm các trường khác vào dự án của mình, bạn phải triển khai xác thực bảo mật.

Vì vậy, để thêm các trường tùy chỉnh vào trang thanh toán WooCommerce, có hai tùy chọn:

  • Bạn có thể viết mã các tập lệnh của mình theo chủ đề con
  • Tạo một plugin tùy chỉnh

Để xây dựng một giải pháp có khả năng mở rộng và được tổ chức tốt hơn, chúng tôi sẽ tạo một plugin tùy chỉnh. Hơn nữa, không giống như cách tiếp cận chủ đề con, một plugin tùy chỉnh cũng có thể là điểm khởi đầu để phát triển thêm. Tuy nhiên, nếu bạn muốn sử dụng chủ đề con, chúng tôi khuyên bạn nên xem hướng dẫn này .

Thêm các trường tùy chỉnh vào thanh toán WooCommerce bằng một plugin tùy chỉnh

Plugin tùy chỉnh mà chúng tôi sắp xây dựng sẽ có ba tệp.

  1. Chính
  2. Giao diện người dùng
  3. Phụ trợ

Tệp chính hoạt động như một lối vào cổng vào tệp front-end mà chúng tôi sẽ sử dụng cho các tập lệnh front-end của mình. Ngoài ra, chúng tôi sẽ bao gồm tệp thứ ba, nơi chứa các tập lệnh phụ trợ. Cần lưu ý rằng tệp front-end này sẽ là tệp cơ sở chính và sẽ được chuyển sang tệp phân cấp cấp thấp (giống như tệp phụ trợ của chúng tôi) nếu bạn thêm nhiều lớp hơn. Vì vậy, bây giờ, hãy xem cách thêm các trường tùy chỉnh vào trang thanh toán WooCommerce bằng cách sử dụng plugin tùy chỉnh .

1. Mở IDE yêu thích của bạn và tạo một thư mục có ba tệp:

QuadLayers_checkout_fields / __ Classes /__/__class_qlccf_base.php (Frontend file) /__/__class_qlccf_back.php (Backend file) /__QuadLayers_checkout_fields.php (Main File)

2. Tệp chính

Tệp chính là QuadLayers_checkout_fields.php :

 & lt;? php
/ **
 * @link https://quadlayers.com/
 * @since 1.0.0
 * Tên plugin: Trường tùy chỉnh QuadLayers Checkout
 * URI của plugin: https://quadlayers.com/
 * Mô tả: Plugin để tạo các trường tùy chỉnh trong trang thanh toán WooCommerce, in đơn đặt hàng phụ trợ và mẫu email
 * Phiên bản: 1.0.0
 * Tác giả: Sebastopolys
 * URI của tác giả: https://quadlayers.com/
 * Tên miền văn bản: qlccf
 * /
if (! xác định ('ABSPATH')) {die ('- 1');}
elseif (! class_exists ('run_init')) {
lớp cuối cùng run_init {
public static function run () {
return include_once plugin_dir_path (__FILE__). 'class / class_qlccf_base.php';
}
}
run_init :: run ();
}
khác{
echo "& lt; h3 & gt; LỖI - Lớp run_init hiện có trong QuadLayers_checkout_fields.php! & lt; / h3 & gt;";
}

Bạn có thể thay đổi thông tin plugin, chức năng và tên tệp và đặt tên của riêng bạn. Nhưng chúng tôi khuyên bạn trước tiên nên sao chép và dán các tập lệnh mà không cần chỉnh sửa bất kỳ thứ gì để bạn hiểu rõ hơn về cách chúng hoạt động.

3. Tệp lớp giao diện người dùng

Tệp giao diện người dùng là class_qlccf_base.php . Đây là nơi lớp chính tồn tại và nơi bạn có thể bao gồm số lượng lớp và hàm không giới hạn. Một lớp trừu tượng không thể được khởi tạo, vì vậy nó phải được kế thừa bởi một số lớp khác. Đây là tệp giao diện người dùng và giải thích chi tiết sau mã:

 & lt;? php
if (! xác định ('ABSPATH')) {die ('- 1');}
elseif (! class_exists ('base_class')) {

lớp trừu tượng base_class {

    public const VERS = '1.1.0'; // & lt; - Phiên bản của plugin
    public const PREFIX = 'qlccf'; // & lt; - Tiền tố plugin
    public const PLDIR = __DIR__; // & lt; - Đường dẫn Plugin Dir
    public const PLPAT = __FILE__; // & lt; - Đường dẫn tệp

    hàm public add_base_hooks () {
       add_action ('woocommerce_ after_order_notes', array ($ this, 'quadlayers_subscribe_checkout'));
       add_action ('woocommerce_ after_checkout_billing_form', array ($ this, 'quadlayers_email_checkout'));
       add_action ('woocommerce_before_order_notes', array ($ this, 'quadlayers_radio_checkout'));
       add_action ('woocommerce_checkout_update_order_meta', array ($ this, 'quadlayers_save_ Chức năng'));
    }
    // chèn hộp kiểm trong thanh toán woocommerce - hook: after_order_notes
    chức năng công khai quadlayers_subscribe_checkout ($ checkout) {
            woocommerce_form_field ('suscriptor', mảng (
                'loại' = & gt; 'hộp kiểm',
                // 'bắt buộc' = & gt; THÀNH THẬT,
                'lớp' = & gt; mảng ('trường tùy chỉnh-toàn hàng'),
                'label' = & gt; ' Theo dõi bản tin của chúng tôi.'
            ), $ checkout- & gt; get_value ('suscriptor'));
    }
    // Chèn văn bản trong thanh toán woocommerce - hook: after_billing_form
    chức năng công khai quadlayers_email_checkout ($ checkout2) {
        woocommerce_form_field ('altmail', mảng (
            'loại' = & gt; 'e-mail',
            // 'bắt buộc' = & gt; THÀNH THẬT,
            'lớp' = & gt; mảng ('trường tùy chỉnh-toàn hàng'),
            'label' = & gt; 'Email thay thế.'
        ), $ checkout2- & gt; get_value ('altmail'));
    }
    // Chèn trường tùy chỉnh radio trong thanh toán woocommerce - hook: before_order_notes
    chức năng công khai quadlayers_radio_checkout ($ checkout3) {
        woocommerce_form_field ('nguồn cấp dữ liệu', mảng (
            'loại' = & gt; 'Đài',
            // 'bắt buộc' = & gt; THÀNH THẬT,
            'lớp' = & gt; mảng ('trường tùy chỉnh-toàn hàng'),
            'label' = & gt; ' Làm thế nào bạn tìm thấy chúng tôi?.',
                'tùy chọn' = & gt; mảng(
                    'Google' = & gt; 'Google',
                    'Bạn bè' = & gt; 'Bạn bè',
                    'Facebook' = & gt; 'Facebook',
                    'Youtube' = & gt; 'YoutTube',
                    'Khác' = & gt; 'Khác'
                )
        ));
    }
    // lưu tất cả các giá trị trường tùy chỉnh
    chức năng công khai quadlayers_save_ Chức năng ($ order_id) {
        if (! rỗng ($ _POST ['suscriptor'])) {
            update_post_meta ($ order_id, 'suscriptor', sanitize_text_field ($ _POST ['suscriptor']));
        }
        if (! rỗng ($ _POST ['altmail'])) {
            update_post_meta ($ order_id, 'altmail', sanitize_text_field ($ _POST ['altmail']));
        }
        if (! trống ($ _POST ['nguồn cấp dữ liệu'])) {
            update_post_meta ($ order_id, 'feed', sanitize_text_field ($ _POST ['feed']));
        }
    }
} // Bao gồm lớp phụ trợ
    include_once (plugin_dir_path (__FILE__). 'class_qlccf_back.php');
}
khác{
echo "& lt; h3 & gt; LỖI BAN ĐẦU - Lớp base_class hiện có! & lt; / h3 & gt;";
}
   

Sau khi khai báo lớp, chúng tôi xác định một số hằng số mà chúng tôi có thể sử dụng sau này. Sau đó, chúng tôi bao gồm tất cả các móc WooCommerce mà chúng tôi sẽ sử dụng trong một phương thức duy nhất, mà chúng tôi gọi là add_base_hooks () .

Vì không thể khởi tạo một lớp trừu tượng, chúng tôi chạy phương thức này từ tệp phụ trợ của mình để nó chạy tất cả các móc được khai báo ở đây. Chúng tôi sử dụng từng hook cho một nhiệm vụ khác nhau, gán một trong các phương thức sau cho từng hook. Tức là hook này: woocommerce_ after_order_notes trong phương thức add_base_hooks () của chúng tôi chạy phương thức quadlayers_subscribe_checkout () , cả hai đều được xác định trong base_class lớp học.

Lưu ý cách chúng tôi sử dụng một số hàm WordPress và WooCommerce: woocommerce_form_field () Nó xuất ra một trường tùy chỉnh trong biểu mẫu kiểm tra WooCommerce. update_post_meta () Hàm gốc WordPress này được sử dụng rộng rãi để cập nhật siêu dữ liệu cơ sở dữ liệu của bài đăng, sản phẩm và các loại bài đăng tùy chỉnh khác. Hơn nữa, các loại trường đầu vào có sẵn là:

bản văn
lựa chọn
Đài

mật khẩu mở khóa
ngày giờ
datetime-local

ngày tháng
tháng
thời gian

tuần
con số
e-mail

url
điện thoại

4. Tệp phụ trợ, class_qlccf_back.php

Đây là nơi lớp qlccf_back_class kế thừa base_class được xác định trước đó trong tệp class_qlccf_base.php :

 & lt;? php
if (! xác định ('ABSPATH')) {die ('- 1');}
if (! class_exists ('qlccf_back_class')):
    lớp qlccf_back_class mở rộng base_class {

        public function __construct () {
            cha :: add_base_hooks ();
            if (is_admin ()):
                add_filter ('management_edit-shop_order_columns', array ($ this, 'qlccf_checkbox'));
                add_filter ('management_edit-shop_order_columns', array ($ this, 'qlccf_email'));
                add_action ('management_shop_order_posts_custom_column', array ($ this, 'qlccf_column_content'));
                add_action ('woocommerce_email_order_meta', array ($ this, 'qlccf_email_template'));
            endif;
        }
        # hiển thị giá trị trường tùy chỉnh trong danh sách thứ tự phụ trợ
        public function qlccf_column_content ($ column) {
                bài $ toàn cầu;
                if ('suscriptor' === $ column) {# Hộp kiểm
                    $ order = wc_get_order ($ post- & gt; ID);
                    $ c_meta = $ order- & gt; get_meta ('suscriptor');
                    if ($ c_meta == 1): $ img_url = 'https: //www.sebastopolys.com/wp-content/uploads/2020/07/true-icon.png';
                    khác: $ img_url = 'https: //www.sebastopolys.com/wp-content/uploads/2020/07/false-icon.png';
                    endif;
                    echo '& lt; img src = "'. $ img_url. '" style = "width: 20px; height: 20px; margin-left: 20px;" / & gt;';
                }
                elseif ('altmail' === $ column) {# Thư thay thế
                    $ order = wc_get_order ($ post- & gt; ID);
                    $ e_meta = $ order- & gt; get_meta ('altmail');
                    echo $ e_meta;
                }
                khác{}
        }
        # Đặt cột hộp kiểm
        hàm công khai qlccf_checkbox ($ cột) {
                $ column ['suscriptor'] = __ ('Suscriptor');
                trả về các cột $;
        }
        # Đặt cột của thư thay thế
        public function qlccf_email ($ column1) {
                $ column1 ['altmail'] = __ ('Thư thay thế');
                trả về $ column1;
        }
        # Bao gồm trường Thư thay thế trong miếng đệm email WC
        hàm công khai qlccf_email_template ($ order_obj) {
            $ is_set = get_post_meta ($ order_obj- & gt; get_order_number ());
                // trả về nếu không có trường tùy chỉnh nào được đặt
            if (trống ($ is_set))
trở về;
// được rồi, chúng ta tiếp tục và echo trường tùy chỉnh
            $ alt_email = get_post_meta ($ order_obj- & gt; get_order_number (), 'altmail', true);
            echo '& lt; h2 & gt; Trường tùy chỉnh của tôi & lt; / h2 & gt; & lt; p & gt; Email thay thế:'. $ alt_email. '& lt; / p & gt;';
        }
    }
  $ run = new qlccf_back_class;
endif;

Trong tệp này, chúng tôi xác định một hàm tạo để chạy các hook front-end mà chúng tôi đã nêu trong tệp khác của chúng tôi. Sau đó, chúng tôi thêm các móc cần thiết để hiển thị các trường tùy chỉnh trong danh sách đơn đặt hàng phụ trợ và các mẫu email WooCommerce bằng cách sử dụng if () có điều kiện và hàm WordPress is_admin () để áp dụng nó chỉ khi người dùng ở màn hình phụ trợ quản trị viên. Móc management_shop_order_posts_custom_column () chèn một cột trong danh sách đơn hàng, vì vậy chúng tôi có thể hiển thị các trường trong hàm qlccf_column_content () .

Sau khi chúng tôi bị mắc kẹt trong vòng lặp WooCommerce, chúng tôi sẽ kiểm tra xem tên trường có thuộc một trong các trường tùy chỉnh của chúng tôi hay không và nếu có, chúng tôi sẽ in ra. Sử dụng if () else có điều kiện, chúng ta có thể kiểm tra tất cả các trường tùy chỉnh của mình trong cùng một hàm.

Sau đó, chúng tôi tạo một hộp kiểm và các cột trường tùy chỉnh văn bản trong danh sách đơn đặt hàng phụ trợ. Chúng tôi cần đặt các cột tùy chỉnh để hiển thị các trường WooCommerce tùy chỉnh sau khi khách hàng hoàn tất quy trình thanh toán và đơn đặt hàng được tạo.

Cuối cùng, trong phương pháp cuối cùng, chúng tôi sử dụng hook woocommerce_email_order_meta để hiển thị trường văn bản tùy chỉnh của chúng tôi trong mẫu email quản trị. WordPress & amp; Các chức năng WooCommerce được sử dụng:

wc_get_order () : Lấy đối tượng đơn hàng hiện tại với tất cả dữ liệu được đính kèm với nó

get_meta () : Để lấy siêu dữ liệu của đơn đặt hàng

get_post_meta () : Nhận các giá trị của các trường tùy chỉnh của chúng tôi được lưu trong cơ sở dữ liệu

get_order_number () : Để lấy số id của đơn hàng hiện tại

Kết thúc

Nói chung, tùy chỉnh trang thanh toán là điều bắt buộc đối với bất kỳ cửa hàng trực tuyến nào. Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách thêm các trường tùy chỉnh vào trang thanh toán WooCommerce theo lập trình với một chút mã hóa. Bạn đã học cách tạo plugin tùy chỉnh từng bước để tối ưu hóa việc thanh toán.

Ngoài ra, nếu bạn muốn tùy chỉnh trang thanh toán và đưa nó lên cấp độ tiếp theo, chúng tôi khuyên bạn nên xem hướng dẫn từng bước này .

Bạn đã thử phương pháp này chưa? Bạn có thể nghĩ ra cách để cải thiện nó không? Hãy chia sẻ kinh nghiệm của bạn với chúng tôi trong phần bình luận bên dưới!

Nếu bạn muốn cải thiện chuyển đổi của mình trong WooCommerce, chúng tôi khuyên bạn nên xem các hướng dẫn sau:


Xem thêm những thông tin liên quan đến chủ đề woocommerce thêm biểu mẫu để thanh toán

[Video 7] Hướng Dẫn Cài đặt THANH TOÁN cho website Bán Hàng WordPress

alt

  • Tác giả: Nguyễn Xuân Hòa
  • Ngày đăng: 2019-01-12
  • Đánh giá: 4 ⭐ ( 9985 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đăng ký nhận danh sách mạng tiếp thị liên kết hoa hồng cao: https://bit.ly/50_mạng_affiliate
    huong dan cai dat thanh toan san pham cua website ban hang
    Link download Theme: https://4hsoft.net/san-pham/woocart-mythemeshop-theme-ban-hang-de-su-dung/
    =================================
    Hãy đăng ký kênh để nhận video mới nhất:
    Click here: http://bit.ly/2lCXeEK
    ================================

    Facebook: https://www.facebook.com/xuanhoablog
    Twitter: https://twitter.com/xuanhoablog
    Instagram: https://www.instagram.com/xuanhoablog

    Websites: https://xuanhoablog.com
    ================================
    Tag
    tạo web bán hàng,
    hướng dẫn tạo website miễn phí,
    tạo website bằng wordpress,

[Thủ Thuật WordPress] Thêm Field vào trang đăng ký Tài Khoản WooCommerce

  • Tác giả: nguyenphudung.com
  • Đánh giá: 3 ⭐ ( 3996 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Thủ Thuật WP] Thêm Field vào trang đăng ký Tài Khoản WooCommerce là một snippet ngắn hữu ích dành cho các lập trình viên WordPress muốn “Thêm field First name và Last name vào Biểu mẫu đăng ký trên trang Tài khoản của WooCommerce”….

Thêm một biểu tượng vào nút Thêm vào giỏ hàng

  • Tác giả: netweb.vn
  • Đánh giá: 4 ⭐ ( 6188 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cập nhập: 05/06/2021 – Hello xin chào các bạn hôm nay lại là mình đây, tiếp tục code WooCommerce nhé cả nhà, hôm nay mình sẽ hướng dẫn các bạn cách thêm 1

Cách tùy chỉnh trang thanh toán WooCommerce (Cách dễ dàng)

  • Tác giả: pluginthanhtoan.com
  • Đánh giá: 3 ⭐ ( 6327 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tùy chỉnh trang thanh toán WooCommerce (Cách dễ dàng)

Cách thiết lập WooCommerce thanh toán bằng một cú nhấp chuột

  • Tác giả: www.vietmis.com
  • Đánh giá: 5 ⭐ ( 3163 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: VietMis.com – Kinh doanh và Đầu tư 4.0 – Gọi: 0939 68 19 66 (Hotline) để được tư vấn – HOÀN TOÀN MIỄN PHÍ. VietMis thiết kế phát triển website, xây dựng thương hiệu online, cung cấp các giải pháp phần mềm quản lý kinh doanh, quản lý phòng khám trực tuyến.

Cách tạo mẫu trang thanh toán WooCommerce với Divi

  • Tác giả: codewatchers.com
  • Đánh giá: 5 ⭐ ( 7705 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Việc tạo Trang kiểm tra WooCommerce thường đòi hỏi sự tùy chỉnh đáng kể đối với tệp mẫu PHP trong phần phụ trợ và một lượng đáng kể CSS tùy chỉnh. Tuy nhiên, quy trình này đã trở nên thú vị và đơn gi…

[WooCommerce] Bỏ field không cần thiết khi thanh toán

  • Tác giả: kobite.wordpress.com
  • Đánh giá: 4 ⭐ ( 7299 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mặc định trong WooCommerce khi khách hàng tới trang thanh toán (Checkout) thì hệ thống đều bắt khách phải nhập một số thông tin không cần thiết đối với người dùng Việt Nam như Address 2, Post Code, States..v..v..Nhưng khổ nỗi WooCommerce lại không có tùy chọn để thiết lập vô hiệu hóa các field…

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Tự động hóa E-Learning với LMS tất cả trong một: Tất cả những gì bạn cần biết - tất cả trong một lms

By DEVTEAM