Crear un campo en los productos visible en la edición de pedidos de WooCommerce

Gestionar los pedidos es el día a día de cualquier tienda online. Teniendo en cuenta esto, es ideal optimizar el proceso lo máximo posible para mejorar los tiempos de procesar pedidos y minimizar los fallos. Es por esto, que muchos clientes me piden que cree un campo editable en los productos para que se muestre esa información interna en el mismo. Os dejo un ejemplo:

Estos dos campos, los podemos personalizar en nuestra ficha de producto:

Crear campo editable en la ficha de producto

Para poder crearlo, primero debemos de crear el campo, para ello, añadiremos el siguiente código al functions.php de nuestro Child Theme o a nuestro plugin de funcionalidades como explico aquí:

add_action( 'wp_enqueue_scripts', 'digitek_child_enqueue_styles', 101 );

// Crear campo ficha de producto diegol.top
add_action('woocommerce_product_options_general_product_data', 'add_custom_field_to_product_edit');
function add_custom_field_to_product_edit()
{
    echo '<div class="options_group">';
    
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_field', // ID del campo importante localizarlo
            'label' => __('Localización', 'woocommerce'), // Edita entre comillas el texto del campo
            'placeholder' => __('Introduce la localización', 'woocommerce'), // Lo que muestra la caja
            'desc_tip' => 'true',
            'description' => __('Escribe el valor para que salga en pedidos.', 'woocommerce') // Texto de ayuda
        )
    );
    
    echo '</div>';
}

// Guardar el campo anterior diegol.top
add_action('woocommerce_process_product_meta', 'save_custom_field_value');
function save_custom_field_value($post_id)
{
    $custom_field_value = isset($_POST['_custom_field']) ? sanitize_text_field($_POST['_custom_field']) : '';
    update_post_meta($post_id, '_custom_field', $custom_field_value);
}

Una vez añadimos este código ya podremos ver el campo editable en la ficha de producto. Ahora necesitamos mostrarlo.

Mostrar campo en la edición de pedidos

Al igual que antes, añadimos el siguiente código:

// Mostrar el campo en la página de pedidos después de los datos del cliente
add_action('woocommerce_admin_order_data_after_order_details', 'display_custom_field_on_order_edit');
function display_custom_field_on_order_edit($order)
{
    $items = $order->get_items();
    
    foreach ($items as $item_id => $item) {
        $product = $item->get_product();
        $custom_field_value = $product->get_meta('_custom_field', true);
        
        if ($custom_field_value) {
            echo '<p><strong>' . __('Localización', 'woocommerce') . ':</strong> ' . $custom_field_value . '</p>';
        }
    }
}

// Mostrarlo en la fila de cada producto
add_action('woocommerce_after_order_itemmeta', 'display_custom_field_on_product_page_in_order_edit', 10, 3);
function display_custom_field_on_product_page_in_order_edit($item_id, $item, $product)
{
    // Check if item type is 'line_item'
    if ($item->is_type('line_item')) {
        $product_id = $item->get_product_id();
        $custom_field_value = get_post_meta($product_id, '_custom_field', true);
        if ($custom_field_value) {
            echo '<p><strong>' . __('Localización', 'woocommerce') . ':</strong> ' . $custom_field_value . '</p>'; //Cambia aqui otra vez el nombre del campo
        }
    }
}

Y con esto por fin, conseguimos lo que hemos visto en las dos imágenes anteriores. Esto es solo para un campo, para poner dos, usa los mismos códigos creando un nuevo campo con otra ID y listo.

Cualquier duda como siempre en comentarios o si queréis que adapte el código para vosotros, podeís contratar mis servicios!