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

WooCommerce Ofrece la posibilidad de utilizar elCampos personalizadosCaracterísticas. Ideal para recopilar información adicional sobre sus clientes, como su dirección de envío preferida o su número de teléfono. Sin embargo, a veces es necesario editar o eliminar estos campos.

En este tutorial, se mostrará cómo editar o eliminar campos adicionales, como eliminar la dirección de facturación, añadir/editar campos de pago personalizados y guardar estos campos personalizados en la base de datos. Puedes personalizar el proceso de pago de WooCommerce según las necesidades de tu negocio.

Eliminación de información adicional de WooCommerce Checkout

El siguiente código elimina el campo de dirección de la página de facturación.

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' );

Añada este fragmento de código a su sitio de WordPressTemas en la carpeta funciones.php papelesMedio.

Añadir campos de pago personalizados de WooCommerce

El siguiente código añadirá un campo a la página de pago, guardará los datos en los metadatos del pedido y mostrará dichos metadatos en la página de gestión del pedido. Ya he recibido algunas consultas sobre cómo añadir varios campos. Para solucionarlo, el fragmento de código se ha modificado para añadir dos campos.

function cloudways_custom_checkout_fields($fields){
    $fields['cloudways_extra_fields'] = array(
            'cloudways_text_field' => array(
                'type' => 'text',
                'required' => true, 'label' => __(('cloudways_extra_fields')) => array(
                'label' => __( 'Campo de texto de entrada' )
                ),
            'cloudways_dropdown' => array(
                'type' => 'select', 'options' => array(
                'options' => array( 'first' => __( 'Primera opción' ), 'second' => __( 'Segunda opción' ), 'third' => __( 'Tercera opción' ), 'required' => true, __( 'Campo de texto de entrada' ), 'cloudways_dropdown' => array( 'type' => 'select', 'options' => array(
                
                'label' => __( 'Campo desplegable' )
                )
            ).

    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>

    checkout_fields['cloudways_extra_fields'] as $key =&gt; $field ) : ? &gt;

            get_value( $key ) ); ? &gt;
    </div>

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

Guardar datos para los campos de pago personalizados de WooCommerce

function cloudways_save_extra_checkout_fields( $order_id, $posted ){
    // no olvide la desinfección adecuada si utiliza un tipo de campo diferente
    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 );

Mostrar datos de los campos de pago personalizados de 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 );

Mostrar campos de pedido personalizados del administrador de WooCommerce

Este fragmento de código se utilizará como datos de la dirección de entrega y facturación y estará disponible cuando el usuario haga clic en el botónIcono del lápiz pequeñoAparece el cuadro de introducción de datos.

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">
            '_cloudways_text_field', 'label' =&gt; __( 'Algún campo' ), 'wrapper_class' =&gt; '_billing_company_ field' ); ? &gt;
             '_cloudways_dropdown', 'label' =&gt; __( 'Otro campo' ), 'wrapper_class' =&gt; '_billing_company_ field' ); ? &gt; ? campo' ); ? &gt;
        </div>
    </div>
<?php }
add_action( 'woocommerce_admin_order_data_after_order_details', 'cloudways_display_order_data_in_admin' );

Añadir campos personalizados de WooCommerce a los correos electrónicos de pedido

function cloudways_email_order_meta_fields( $fields, $sent_to_admin, $order ) {
    $fields['instagram'] = array(
                'label' => __( 'Algún campo' ),
                'value' => get_post_meta( $order->id, '_cloudways_text_field', true ),
            );
    $fields['licencia'] = array(
                'label' => __( 'otro campo' ), ); $fields['licencia'] = array(
                '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 );

Si desea personalizar la salida del correo electrónico, puede añadir algún texto a cualquiera de los ganchos disponibles en la plantilla de correo electrónico.

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 'El valor de algún campo es ' . $cloudways_campo_texto . ' mientras que el valor de otro campo es ' . $cloudways_dropdown;
    } else {
        echo '<p>El valor de <strong>campo de texto de entrada</strong> es ' . $cloudways_text_field.' mientras que el valor de <strong>desplegable</strong> es ' . $cloudways_dropdown . '</p>';
    }
}
add_action('woocommerce_email_customer_details', 'cloudways_show_email_order_meta', 30, 3 );

resúmenes

En el tutorial, se demuestra cómo añadir, editar y guardar campos personalizados en la página de pago de WooCommerce. También se añade código para editar la plantilla de correo electrónico y añadir la información del campo personalizado al correo electrónico. Si tenéis problemas con el código o queréis participar en la discusión, podéis dejar un comentario debajo del artículo.

Preguntas frecuentes

P: ¿Cómo personalizo los campos de pago de WooCommerce?

1. Instalar y activar "Editor de campos de pago"Plugins".
2. Vaya al editor de campos de pago.
3. Pulse "Añadir campo"y seleccione el tipo de campo.
4. Para editar un campo existente, pulseIcono del lápiz junto al campo.
5. Para eliminar un campo, pulseIcono de papelera junto al campo.
6. Pulse "Guardar cambios" para actualizar la página de pago.

P: ¿Cómo añado campos personalizados en WooCommerce?

1. salir para WooCommerce > Campos de pago.
2. Haga clic en "Añadir campo" para crear un campo personalizado.
3. opciónTipo de campo.
4. Seleccione dónde se mostrarán los campos personalizados.
5. Después de añadir y configurar los campos personalizados, haga clic en "Guardar cambios".

P: ¿Cómo personalizo el botón de pago de WooCommerce?
Método 1: Modificar a través de la configuración de WooCommerce

1. Vaya a WooCommerce > Configuración > Pago (o WooCommerce > Configuración > Pagos).
2. Busque el ajuste "Texto del botón de pago" y cámbielo por el texto deseado.

Método 2: Personalización CSS

salir para Apariencia > Personalizar > CSS adicionalañade el siguiente código:

.woocommerce-checkout .button {
    background-color: #FF5733; /* Cambiar el color de fondo */
    color: #fff; /* Cambiar el color del texto */
    font-size: 16px; /* Ajustar el tamaño de la fuente */
}