Cómo añadir campos de producto personalizados en WooCommerce – Guía completa

Los campos de producto personalizados son puntos de datos adicionales que pueden añadirse a los productos de una tienda online. Estos campos permiten a los propietarios de las tiendas recopilar y mostrar más información sobre sus productos, más allá de los detalles básicos que suelen incluirse (como nombre, precio, color y descripción).

Al añadir campos de producto personalizados de WooCommerce, los propietarios de tiendas pueden proporcionar a sus clientes información más detallada y precisa sobre sus productos, lo que puede ayudar a mejorar la experiencia del cliente y aumentar las ventas.

En este tutorial, te mostraré cómo puedes añadir campos de producto personalizados a tu tienda WooCommerce.

¿Qué son los campos de producto personalizados en WooCommerce?

Los campos de producto personalizados de WooCommerce son una herramienta para pespuntear la información del producto para satisfacer necesidades empresariales específicas. Estos campos ofrecen la posibilidad de añadir detalles o atributos adicionales a los productos más allá de los datos de producto estándar de WooCommerce.

Los campos personalizados de WooCommerce te permiten recopilar y mostrar detalles a medida sobre tus productos, atendiendo a requisitos o especificaciones únicos.

¿Por qué deberías añadir campos de producto personalizados en WooCommerce?

Los campos de producto personalizados ofrecen flexibilidad a la hora de presentar la información del producto. Los comerciantes pueden crear campos con diversos fines, como mostrar las dimensiones del producto, los materiales utilizados, las instrucciones de cuidado o cualquier otro detalle pertinente que pueda influir en la decisión de compra de un cliente.

Los campos personalizados de WooCommerce pueden mejorar significativamente la experiencia del usuario ofreciendo opciones o configuraciones personalizadas. Al utilizar campos personalizados en la configuración de tu WooCommerce, te das a ti mismo y a tus clientes un conocimiento más completo de los productos que se ofrecen, facilitando transacciones más fluidas.

Cómo añadir campos de producto personalizados en WooCommerce (Tutorial paso a paso)

Añadir campos de producto personalizados en WooCommerce implica varios pasos, pero es relativamente sencillo. Aquí tienes un tutorial paso a paso para guiarte en el proceso:

Paso 1 – Personalizar la Página de Datos del Producto

• Como en la captura de pantalla siguiente, te mostraré cómo editar el archivo functions.php (que se encuentra en la carpeta del tema) para añadir campos personalizados a la página Datos del producto.

Paso 2 – Añadir ganchos en WooCommerce

• El primer paso es enganchar a woocommerce_product_options_general_product_data. La función vinculada a este gancho se encarga de mostrar los nuevos campos.
• Un segundo gancho, woocommerce_process_product_meta, guardará los valores de los campos personalizados.
• Ambas acciones se llevan a cabo en el siguiente código:

// The code for displaying WooCommerce Product Custom Fields
add_action( 'woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields' ); 

// Following code Saves  WooCommerce Product Custom Fields
add_action( 'woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save' );

Paso 3 – Añadir campos de producto personalizados

• Para añadir los campos personalizados, utilizaré las funciones predeterminadas de WooCommerce, que incluyen:

woocommerce_wp_text_input

• Paquete: WooCommerce\Admin\Funciones
• Se encuentra en: includes/admin/wc-meta-box-functions.php

woocommerce_wp_textarea_input

• Paquete: WooCommerce\Admin\Funciones
• Situado en includes/admin/wc-meta-box-functions.php

function woocommerce_product_custom_fields () {
global $woocommerce, $post;
echo '<div class=" product_custom_field ">';
// This function has the logic of creating custom field
//  This function includes input text field, Text area and number field
echo '</div>';
}

Paso 3.1: Incluir la estructura del campo

Nota: el uso de desc_tip para mostrar esas simpáticas burbujitas a la derecha del campo en lugar de mostrar la descripción del campo por defecto. Este atributo funciona para todos los tipos de campo.

// Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id'          => '_custom_product_text_field',
            'label'       => __( 'My Text Field', 'woocommerce' ),
            'placeholder' => 'Custom Product Text Field',
            'desc_tip'    => 'true'
        )

    );

• El valor por defecto del paso es 1, con el mínimo fijado en cero. Básicamente, esto significa que aquí espero un valor positivo (al menos mayor que cero).

// Custom Product Number Field
woocommerce_wp_text_input(
    array(
        'id' => '_custom_product_number_field',
        'placeholder' => 'Custom Product Number Field',
        'label' => __('Custom Product Number Field', 'woocommerce'),
        'type' => 'number',
        'custom_attributes' => array(
            'step' => 'any',
            'min' => '0'
        )
    )
);

• Utiliza lo siguiente para crear un textarea.

// Custom Product Textarea Field
woocommerce_wp_textarea_input(
    array(
        'id' => '_custom_product_textarea',
        'placeholder' => 'Custom Product Textarea',
        'label' => __('Custom Product Textarea', 'woocommerce')
    )
);

• Utiliza el siguiente código para los campos de entrada personalizados, debes pegar este código en functions.php que se encuentra en la carpeta del tema.

// Display Fields
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

// Save Fields
add_action('woocommerce_process_product_meta', 'woocommerce_product_custom_fields_save');


function woocommerce_product_custom_fields()
{
    global $woocommerce, $post;
    echo '<div class="product_custom_field">';
    // Custom Product Text Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_text_field',
            'placeholder' => 'Custom Product Text Field',
            'label' => __('Custom Product Text Field', 'woocommerce'),
            'desc_tip' => 'true'
        )
    );
    //Custom Product Number Field
    woocommerce_wp_text_input(
        array(
            'id' => '_custom_product_number_field',
            'placeholder' => 'Custom Product Number Field',
            'label' => __('Custom Product Number Field', 'woocommerce'),
            'type' => 'number',
            'custom_attributes' => array(
                'step' => 'any',
                'min' => '0'
            )
        )
    );
    //Custom Product  Textarea
    woocommerce_wp_textarea_input(
        array(
            'id' => '_custom_product_textarea',
            'placeholder' => 'Custom Product Textarea',
            'label' => __('Custom Product Textarea', 'woocommerce')
        )
    );
    echo '</div>';

}

Paso 3.2: Guardar Datos en la Base de Datos

Una vez creados los campos de producto personalizados, se necesita otra función para guardar los valores para el botón de actualizar o publicar.

Voy a crear una función woocommerce_product_custom_fields_save. Esta función está conectada a woocommerce_process_product_meta. Primero comprueba si el campo está vacío o lleno. Si no lo está, se crea un post meta mediante update_post_meta(). He utilizado esc_attr() y esc_html() para asegurar los datos.

Aquí tienes el código para guardar el valor de todos los campos:

function woocommerce_product_custom_fields_save($post_id)
{
    // Custom Product Text Field
    $woocommerce_custom_product_text_field = $_POST['_custom_product_text_field'];
    if (!empty($woocommerce_custom_product_text_field))
        update_post_meta($post_id, '_custom_product_text_field', esc_attr($woocommerce_custom_product_text_field));
// Custom Product Number Field
    $woocommerce_custom_product_number_field = $_POST['_custom_product_number_field'];
    if (!empty($woocommerce_custom_product_number_field))
        update_post_meta($post_id, '_custom_product_number_field', esc_attr($woocommerce_custom_product_number_field));
// Custom Product Textarea Field
    $woocommerce_custom_procut_textarea = $_POST['_custom_product_textarea'];
    if (!empty($woocommerce_custom_procut_textarea))
        update_post_meta($post_id, '_custom_product_textarea', esc_html($woocommerce_custom_procut_textarea));

}

Paso 3.3: Obtener los valores de la base de datos

Ahora que los campos han sido creados y sus valores guardados, voy a mostrarlos en el frontend. En este caso, te recomiendo que trabajes con las plantillas personalizadas de WooCommerce.

Utilizaré la popular función get_post_meta() para obtener esos valores.

<?php while (have_posts()) : the_post(); ?>
<?php wc_get_template_part('content', 'single-product'); ?>
<?php
// Display the value of custom product text field
    echo get_post_meta($post->ID, '_custom_product_text_field', true);
// Display the value of custom product number field
    echo get_post_meta(get_the_ID(), '_custom_product_number_field', true);
// Display the value of custom product text area
    echo get_post_meta(get_the_ID(), '_custom_product_textarea', true);
    ?>
<?php endwhile; // end of the loop. ?>

Paso 4: Añadir campos personalizados en la página de producto

Lo bueno es que estos campos personalizados pueden añadirse fácilmente a través del backend. Luego, estos cambios se reflejan en el frontend como campos personalizados en las páginas de producto, las páginas de carrito y áreas similares. De hecho, estos campos personalizados también pueden aparecer en las páginas de estado del pedido.

Para ello, te mostraré cómo añadir un nuevo campo personalizado en la sección Datos del producto de una página de producto de WooCommerce:

 function woocommerce_product_custom_fields()
{
  $args = array(
        'id' => 'woocommerce_custom_fields',
        'label' => __('Add WooCommerce Custom Fields', 'cwoa'),
  );
  woocommerce_wp_text_input($args);
}
 
add_action('woocommerce_product_options_general_product_data', 'woocommerce_product_custom_fields');

Así es como aparecería el fragmento en el frontend. Como puedes ver, el campo personalizado tiene la misma etiqueta que la mencionada en la matriz $args.

Paso 5: Guardar los datos del campo personalizado

• Utiliza el siguiente fragmento de código para añadir campos personalizados a las páginas de producto.
• Lo importante del fragmento es que utiliza funciones y acciones estándar de WooCommerce.

function save_woocommerce_product_custom_fields($post_id)
{
    $product = wc_get_product($post_id);
    $custom_fields_woocommerce_title = isset($_POST['woocommerce_custom_fields']) ? $_POST['woocommerce_custom_fields'] : '';
    $product->update_meta_data('woocommerce_custom_fields', sanitize_text_field($custom_fields_woocommerce_title));
    $product->save();
}


add_action('woocommerce_process_product_meta', 'save_woocommerce_product_custom_fields');

Cómo mostrar campos personalizados en la página de producto en WooCommerce

El siguiente fragmento muestra los campos personalizados. El proceso es sencillo; primero comprueba el valor del campo personalizado y confirma que tiene un valor. Si es cierto, muestra el valor como título del campo.

function woocommerce_custom_fields_display()
{
  global $post;
  $product = wc_get_product($post->ID);
    $custom_fields_woocommerce_title = $product->get_meta('woocommerce_custom_fields');
  if ($custom_fields_woocommerce_title) {
        printf(
            '<div><label>%s</label><input type="text" id="woocommerce_product_custom_fields_title" name="woocommerce_product_custom_fields_title" value=""></div>',
            esc_html($custom_fields_woocommerce_title)
        );
  }
}
 
add_action('woocommerce_before_add_to_cart_button', 'woocommerce_custom_fields_display');

Como puedes ver en la siguiente imagen, el campo personalizado es visible en la página del producto. Observa que el título del campo es «Campos personalizados de producto WooCommerce«, igual que el valor id del fragmento.

Uso de plugins para campos de producto personalizados

Como respaldo para aquellos a los que no les gusta codificar o necesitan una solución fácil, existen numerosos plugins que puedes utilizar para ayudarte en el uso de campos de producto personalizados en WooCommerce sin codificar. Algunos de ellos son:

1. Campos personalizados avanzados (ACF)

ACF es un plugin muy potente que te permite crear campos personalizados para cualquier objeto de WordPress, incluidos los productos de WooCommerce. Tiene una interfaz de campos fácil de usar y se lleva bien con WooCommerce.

• Funciones: Ofrece una increíble colección de tipos de campo (texto, imagen, fecha, etc.), lógica condicional e integración nativa con WooCommerce.
• Ventajas: Muy flexible, admite estructuras de campo complejas y tiene una gran documentación.
• Contras: Demasiado para casos de uso sencillos, hay una curva de aprendizaje.

2. Complementos de productos WooCommerce

Este plugin te permite añadir campos personalizados a tus productos, que puedes utilizar para obtener más información de los clientes u ofrecer variaciones de los productos.

• Funciones: Ofrece soporte para campos de texto, casilla de verificación, radio y selección, y es compatible con el proceso de pago de WooCommerce.
• Ventajas: Fácil de usar, compatible con WooCommerce y ofrece lógica condicional.
• Contras: Menos centrado en las variaciones del producto que en los campos de información.

3. YITH WooCommerce Complementos de Producto y Opciones Extra

Este plugin ofrece una amplia gama de opciones para añadir campos personalizados y opciones a los productos de WooCommerce con soporte de lógica condicional.

• Funciones: Admite muchos tipos de campos, incluidos los de texto, casilla de verificación y selección, y es compatible con WooCommerce.
• Ventajas: Extremadamente flexible, compatible con la lógica condicional, y es compatible con WooCommerce.
• Contras: Su precio está fuera del alcance de las pequeñas tiendas, y la interfaz podría estar desorganizada.

Cómo utilizar estos Plugins

• Instala el plugin, yendo a tu panel de WordPress, Plugins > Añadir nuevo, y buscando el plugin que te gustaría implementar.
• Haz clic en Instalar ahora y luego en Activar.
• Ahora configura los Campos Personalizados como quieras. La mayoría de los plugins son sencillos y permiten que los campos vayan directamente a tus productos WooCommerce.

También hay campos en las páginas de producto que se pueden mostrar. Hay algunos plugins que mostrarán los campos en las páginas de producto sin que tengas que solicitarlo. Con otros plugins, puede que necesites utilizar shortcodes o widgets para mostrar los campos donde quieras. Utilizar un plugin es una forma rápida de añadir campos personalizados en los productos de WooCommerce sin codificar en absoluto. Cada plugin tiene ventajas e inconvenientes, por lo que debes elegir uno que responda a tus necesidades específicas. Comprueba siempre si el plugin es compatible con tu versión de WordPress y de WooCommerce.

Conclusión

Es importante que los propietarios de tiendas consideren cuidadosamente los tipos de campos de producto personalizados de WooCommerce que desean añadir y cómo se utilizarán y mostrarán en la página del producto. Esto puede ayudar a mejorar la experiencia del cliente y aumentar las ventas, ya que es más probable que los clientes compren si tienen toda la información necesaria sobre un producto.

add_action('woocommerce_product_options_general_product_data', 'your_custom_function');

add_action('woocommerce_single_product_summary', 'display_custom_field');

get_post_meta($product_id, 'custom_field_name', true);

Salwa Mujtaba

Salwa Mujtaba es redactora de contenidos técnicos en Cloudways. Con una sólida formación en Informática y experiencia previa como jefa de equipo en Operaciones de Cloudways, aporta a sus escritos un profundo conocimiento de la Plataforma Cloudways. Salwa crea contenidos que simplifican conceptos complejos, haciéndolos accesibles y atractivos para los lectores. Cuando no está escribiendo, puedes encontrarla disfrutando de la buena música, leyendo un libro o pasando tiempo con su familia.

Get Connected on: Twitter Community Forum