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.

Imagen [1] - Guía completa sobre cómo a?adir, editar y personalizar los campos de pago de WooCommerce

Eliminación de información adicional de WooCommerce Checkout

Imagen [2] - Guía completa sobre cómo a?adir, editar y personalizar los campos de pago de WooCommerce

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.

Imagen [3] - Guía completa sobre cómo a?adir, editar y personalizar los campos de pago de WooCommerce

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 ){ ? &gt;
    <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 );
Imagen [4] - Guía completa sobre cómo a?adir, editar y personalizar los campos de pago de WooCommerce

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 ){ ? &gt;
    <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' );
Imagen [5] - Guía completa sobre cómo a?adir, editar y personalizar los campos de pago de WooCommerce

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-&gt;id, '_cloudways_text_field', true );
    $cloudways_dropdown = get_post_meta( $order-&gt;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.

Imagen [6] - Guía completa sobre cómo a?adir, editar y personalizar los campos de pago de WooCommerce

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 */
}

Contacte con nosotros
?No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de peque?as empresas
Servicio de atención al cliente WeChat
Servicio de atención al cliente WeChat
Tel: 020-2206-9892
QQ咨詢:1025174874
(iii) Correo electrónico: info@361sale.com
Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres
? Declaración de reproducción
Este artículo fue escrito por Banner1
EL FIN
Si le gusta, apóyela.
felicitaciones73 compartir (alegrías, beneficios, privilegios, etc.) con los demás
comentarios compra de sofás

Por favor, inicie sesión para enviar un comentario

    Sin comentarios