Cómo editar/borrar campos y correos electrónicos en los campos de pago personalizados de WooCommerce

WooCommerce 提供了在结账流程中用Campos personalizados的功能。非常适合收集客户的其他信息，例如他们的首选收货地址或电话号码。不过，有时候需要编辑或删除这些字段。

在本教程中，会展示如何编辑或删除附加字段，例如删除账单地址、添加/编辑自定义结账字段，并将这些自定义字段保存到数据库中。可以根据自己的业务需求自定义 WooCommerce 的结账流程。

从 WooCommerce Checkout 中删除附加信息

下面的代码会从账单页面删除地址字段。

function woocommerce_remove_additional_information_checkout($fields){
    unset( $fields["billing_first_name"] );
    unset( $fields["billing_last_name"] );
    return $fields;
}
add_filter( 'woocommerce_billing_fields', 'woocommerce_remove_additional_information_checkout' );

将这段代码片段添加到 WordPress 网站主题文件夹中的 funciones.php papelesMedio.

添加 WooCommerce 自定义结账字段

下面代码会在结账页面添加一个字段，将数据保存到订单元数据，并在订单管理页面显示该订单元数据。之前就收到了一些关于如何添加多个字段的询问。为了解决这个问题，代码片段已被修改以添加两个字段。

function cloudways_custom_checkout_fields($fields){
    $fields['cloudways_extra_fields'] = array(
            'cloudways_text_field' => array(
                'type' => 'text',
                'required'      => true,
                'label' => __( 'Input Text Field' )
                ),
            'cloudways_dropdown' => array(
                'type' => 'select',
                'options' => array( 'first' => __( 'First Option' ), 'second' => __( 'Second Option' ), 'third' => __( 'Third Option' ) ),
                'required'      => true,
                'label' => __( 'Dropdown field' )
                )
            );

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

function cloudways_extra_checkout_fields(){

    $checkout = WC()->checkout(); ?>

    <div class="extra-fields">
    <h3><?php _e( 'Additional Fields' ); ?></h3>

    <?php
       foreach ( $checkout->checkout_fields['cloudways_extra_fields'] as $key => $field ) : ?>

            <?php woocommerce_form_field( $key, $field, $checkout->get_value( $key ) ); ?>

        <?php endforeach; ?>
    </div>

<?php }
add_action( 'woocommerce_checkout_after_customer_details' ,'cloudways_extra_checkout_fields' );

保存 WooCommerce 自定义结帐字段的数据

function cloudways_save_extra_checkout_fields( $order_id, $posted ){
    // don't forget appropriate sanitization if you are using a different field type
    if( isset( $posted['cloudways_text_field'] ) ) {
        update_post_meta( $order_id, '_cloudways_text_field', sanitize_text_field( $posted['cloudways_text_field'] ) );
    }
    if( isset( $posted['cloudways_dropdown'] ) && in_array( $posted['cloudways_dropdown'], array( 'first', 'second', 'third' ) ) ) {
        update_post_meta( $order_id, '_cloudways_dropdown', $posted['cloudways_dropdown'] );
    }
}
add_action( 'woocommerce_checkout_update_order_meta', 'cloudways_save_extra_checkout_fields', 10, 2 );

显示 WooCommerce 自定义结帐字段的数据

function cloudways_display_order_data( $order_id ){  ?>
    <h2><?php _e( 'Extra Information' ); ?></h2>
    <table class="shop_table shop_table_responsive additional_info">
        <tbody>
            <tr>
                <th><?php _e( 'Input Text Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_text_field', true ); ?></td>
            </tr>
            <tr>
                <th><?php _e( 'Drop Down Field:' ); ?></th>
                <td><?php echo get_post_meta( $order_id, '_cloudways_dropdown', true ); ?></td>
            </tr>
        </tbody>
    </table>
<?php }
add_action( 'woocommerce_thankyou', 'cloudways_display_order_data', 20 );
add_action( 'woocommerce_view_order', 'cloudways_display_order_data', 20 );

显示 WooCommerce 管理端自定义订单字段

这段代码片段会作为配送和账单地址数据使用，并在用户点击小铅笔图标时显示输入框。

function cloudways_display_order_data_in_admin( $order ){  ?>
    <div class="order_data_column">

        <h4><?php _e( 'Additional Information', 'woocommerce' ); ?><a href="#" class="edit_address"><?php _e( 'Edit', 'woocommerce' ); ?></a></h4>
        <div class="address">
        <?php
            echo '<p><strong>' . __( 'Text Field' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_text_field', true ) . '</p>';
            echo '<p><strong>' . __( 'Dropdown' ) . ':</strong>' . get_post_meta( $order->id, '_cloudways_dropdown', true ) . '</p>'; ?>
        </div>
        <div class="edit_address">
            <?php woocommerce_wp_text_input( array( 'id' => '_cloudways_text_field', 'label' => __( 'Some field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>
            <?php woocommerce_wp_text_input( array( 'id' => '_cloudways_dropdown', 'label' => __( 'Another field' ), 'wrapper_class' => '_billing_company_field' ) ); ?>
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );

将 WooCommerce 自定义字段添加到订单电子邮件

function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['instagram'] = array(
                'label' => __( 'Some field' ),
                'value' => get_post_meta( $order->id, '_cloudways_text_field', true ),
            );
    $fields['licence'] = array(
                'label' => __( 'Another field' ),
                'value' => get_post_meta( $order->id, '_cloudways_dropdown', true ),
            );
    return $fields;
}
add_filter('woocommerce_email_order_meta_fields', 'cloudways_email_order_meta_fields', 10, 3 );

如果想要自定义邮件输出，可以在邮件模板中可用的任何钩子中添加一些文本。

function cloudways_show_email_order_meta( $order, $sent_to_admin, $plain_text ) {
    $cloudways_text_field = get_post_meta( $order->id, '_cloudways_text_field', true );
    $cloudways_dropdown = get_post_meta( $order->id, '_cloudways_dropdown', true );
    if( $plain_text ){
        echo 'The value for some field is ' . $cloudways_text_field . ' while the value of another field is ' . $cloudways_dropdown;
    } else {
        echo '<p>The value for <strong>input text field</strong> is ' . $cloudways_text_field. ' while the value of <strong>drop down</strong> is ' . $cloudways_dropdown . '</p>';
    }
}
add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );

resúmenes

在教程中，演示了如何在 WooCommerce 结账页面添加、编辑和保存自定义字段。还添加了编辑邮件模板的代码，并将自定义字段的信息添加到邮件中。如果你们在用代码时遇到问题或想参与讨论，可以在文章下面留言。

Preguntas frecuentes

问：如何自定义 WooCommerce 的结账字段？

1. 安装并激活“Editor de campos de pago”插件。
2. 进入结账字段编辑器。
3. Pulse "Add Field”并选择字段类型。
4. 要编辑现有字段，点击字段旁边的铅笔图标.
5. 要移除字段，点击字段旁边的垃圾桶图标.
6. Pulse "Save Changes”按钮更新结账页面。

问：如何在 WooCommerce 中添加自定义字段？

1. salir para WooCommerce > Checkout Fields.
2. 点击“Add Field”创建自定义字段。
3. opción字段类型.
4. 选择自定义字段显示的位置。
5. 添加并配置自定义字段后，点击“Save Changes”。

问：如何自定义 WooCommerce 的结账按钮？
方法 1：通过 WooCommerce 设置修改

1. 前往 WooCommerce > Settings > Checkout（或 WooCommerce > Settings > Payments）。
2. 查找“Checkout button text”设置，将其更改为所需文本。

方法 2：使用 CSS 自定义

salir para Appearance > Customize > Additional CSS，添加以下代码：

.woocommerce-checkout .button {
    background-color: #FF5733; /* Change the background color */
    color: #fff; /* Change the text color */
    font-size: 16px; /* Adjust the font size */
}