Cómo añadir un campo de texto a un producto WooCommerce

A diario, muchos vendedores eligen configurar su tienda en WooCommerce por varias razones. Algunos lo hacen por la comodidad de utilizar una herramienta gratuita para reducir los gastos, otros porque WooCommerce se enorgullece de ser extremadamente fácil de configurar y gestionar, reduciendo la inversión inicial y continua necesaria para sus plataformas.

Por último, algunos vendedores prefieren utilizar WooCommerce por su flexibilidad, ya que es una de las herramientas más personalizables que existen en la actualidad.

Precisamente en lo que se refiere a la flexibilidad, aunque uno pueda personalizar su página de producto como mejor le parezca, a veces busca funcionalidades más allá de las que ofrece la plataforma, lo que le obliga a actuar directamente en el código del sitio.

Y esto puede parecer un reto para el usuario promedio.

Hoy, nuestro objetivo es simplificarte las cosas. Entendemos lo que necesitas, así que nuestros desarrolladores han creado un código especial para una función que se solicita a menudo.

La petición es: «¿cómo añadir un campo personalizado en la página del producto?», es decir, cómo añadir un pequeño campo en el que el cliente pueda añadir una nota al producto durante la compra.

Después de haber visto en qué casos puede ser útil esta función, vamos a ver qué código utilizar en tu sitio y dónde insertarlo para conseguirlo en unos pocos clics y de forma gratuita.

¿Por qué añadir un campo de texto en tu página de producto en WooCommerce?

Como prometimos, a continuación veremos por qué deberías añadir campos personalizados a tu producto en WooCommerce. De hecho, esta opción aporta numerosas ventajas.

Evidentemente, es esencial para aquellos modelos de negocio en Internet basados precisamente en la personalización, pero, como verás enseguida, cualquier tienda puede disfrutar de las ventajas que ofrece esta técnica de venta.

Comunicación personalizada

La primera necesidad a la que responde un campo personalizable es la de comunicar las necesidades al vendedor. Esto puede ser especialmente útil en el caso de los productos personalizables, como en el sector de la confección y la joyería (más adelante veremos algunos ejemplos con más detalle).

Existen muchas otras alternativas, pero estas son algunas de las más comunes. Evidentemente, la personalización puede avanzar por diferentes vías, muchas de las cuales pueden conseguirse aprovechando la naturaleza de los productos variables o utilizando un plugin especializado (como veremos más adelante).

Además de los artículos personalizados que hemos mencionado antes, siempre es una buena idea que los clientes tengan la opción de incluir un mensaje personalizado o una petición especial, independientemente del tipo de producto que compren. De este modo, pueden comunicar fácilmente cualquier necesidad o mensaje específico al vendedor.

Optimización de las conversiones

Añadir un campo personalizable a la página del producto puede desempeñar un papel crucial en el aumento de las conversiones. En efecto, permitir a los clientes personalizar los productos según sus preferencias crea un sentimiento de compromiso y propiedad, estimulando el interés y la empatía.

Esto puede ser de gran ayuda para «forzar» al cliente hacia la finalización de la compra, especialmente durante una fase crítica del proceso de compra en la que muchos carritos quedan abandonados.

No olvides también cómo este campo puede influir en la creación de una sensación de exclusividad y singularidad, incitando a los clientes a realizar una compra inmediata para obtener un producto personalizado.

Existen numerosos estudios que ponen de manifiesto cómo ofrecer una experiencia personalizada puede beneficiar a tu negocio. Epsilon ha elaborado un informe según el cual el 80% de los clientes se inclinan por una tienda que ofrece una experiencia personalizada, una cifra confirmada también por Deloitte, que afirma que el 36% de los clientes se sienten motivados a gastar más en estos casos.

Así es como un campo de este tipo puede no solo aumentar tus ventas, sino también incrementar el AOV (Average Order Value) de algunos clientes.

Por último, el campo personalizable puede recopilar información valiosa sobre las preferencias de los clientes, lo que le permitirá ofrecer ofertas y sugerencias específicas en el futuro. Recopilar este tipo de información es vital para el éxito de tu negocio.

Mejora la experiencia del usuario

Recuerda que el éxito de tu trabajo influye directamente en el grado de satisfacción de tus clientes. Así que es crucial tenerlo siempre presente.

Permitir a los usuarios personalizar los productos según sus preferencias crea una sensación de inclusión y satisfacción, al igual que darles la oportunidad de obtener un producto que se adapte perfectamente a sus necesidades y gustos, lo que aumenta la satisfacción y la probabilidad de compra.

Poder comunicar aquí tus requisitos agiliza y facilita el proceso de compra, además de reducir significativamente la comunicación posterior a la compra. Esto, en consecuencia, reduce tu propio trabajo y el de tus empleados, que pueden así dedicarse a aspectos menos automatizados.

Ten en cuenta que cuando una herramienta de ventas se percibe como un servicio adicional, su eficacia será aún mayor.

Ejemplos de productos que utilizan campos de texto personalizados

Antes hemos citado algunos productos como ejemplo, pero veámoslos con más detalle. De hecho, muchos objetos y servicios pueden disfrutar de algún tipo de personalización.

Ropa personalizada

Entre los productos que más se suelen personalizar, la ropa es sin duda uno de los más populares.

Camisetas, gorras, zapatos, etc., son ideales para la personalización, ya que son prácticamente lienzos en blanco. Por eso no es raro que se utilicen como productos personalizados.

Además, las prendas de vestir ya suelen ser productos variables, en los que el cliente puede elegir sus preferencias en cuanto a colores, tallas y demás.

Aunque la mayoría de estas opciones están incluidas en las funciones de productos variables en WooCommerce, para llevar a cabo una personalización detallada (con la adición de una inscripción, tal vez), es necesario salir de las funciones estándar y aplicar nuevas reglas.

Joyería

Al igual que la ropa, las joyas son un tipo de producto que requiere una elección específica en muchos aspectos. Desde el tipo de metal hasta el tipo de piedra, desde el corte de la joya hasta el número de quilates.

Además, cuando se trata de campos de texto, estos artículos suelen personalizarse con letras o frases. Por ejemplo, colgantes intercambiados por parejas de novios con sus iniciales grabadas, o anillos de compromiso y alianzas de boda con el nombre de la pareja grabado en el interior.

Una vez más, WordPress y WooCommerce pueden salvar el día dándote la opción de crear un artículo variable. Sin embargo, si quieres lograr una verdadera personalización, tendrás que añadir uno o más campos adicionales.

Artículos de regalo

Los artículos de regalo personalizados son una opción popular para fiestas como el Día de la Madre y del Padre. Estos productos permiten añadir un toque especial y hacer que el regalo tenga más significado.

Tazas, almohadas, marcos de fotos o pisapapeles pueden parecer regalos genéricos, pero se tornan especiales al instante si se les añade el nombre del cumpleañero o cumpleañera o un mensaje personalizado en el interior.

Y no solo eso: hablando de regalos, otro artículo que requiere una forma de personalización es la tarjeta de felicitación. El propio Amazon, al elegir la opción «regalo», permite comprar el envoltorio y personalizar la tarjeta que acompañará al pedido.

Libros y material didáctico

Cuando se trata de publicar libros infantiles, está muy bien tener la opción de personalizar las ilustraciones para que les resulte más interesante y divertido.

El mismo cuento de hadas puede ser más especial para un niño si el protagonista tiene el mismo nombre que él.

Por eso estos libros son tan populares hoy en día, y añadir un campo de texto a tu página de producto puede marcar la diferencia en términos de conversión (por supuesto, si tienes la posibilidad de personalizar el producto).

Definitivamente hay muchas otras opciones disponibles, pero las que hemos mencionado pueden darte una idea clara de cómo la personalización de productos puede beneficiar enormemente a tu tienda.

Veamos ahora cómo añadir este campo a tu página de producto de forma gratuita.

Cómo añadir un campo de texto a una página de producto de WooCommerce

Esto nos lleva a la adición real del código a WooCommerce. Entendemos que esto puede parecer intimidante para los usuarios que no están familiarizados con la codificación, pero ten por seguro que no necesitas ser un programador para completar este paso.

En primer lugar, necesitas acceder al editor de tu tema directamente en WordPress. Para ello, ve a Apariencia > Editor de temas:

Al hacer clic, accederás a una página con el código del sitio. Antes de editar cualquier código, vete a la parte superior derecha y asegúrate de que has seleccionado el tema que estás utilizando en tu sitio:

Una vez hecho esto, en el menú lateral izquierdo tienes que hacer clic en funciones del tema, es decir, functions.php:

Nota: algunos temas no tienen un archivo functions.php (ausente en algunos temas de bloque) es posible que no puedas acceder a este menú para el editor. En ese caso, tendrás que buscar una alternativa, como utilizar el plugin que te proponemos a continuación.

En este punto, todo lo que tienes que hacer es pegar el siguiente código en este archivo:

if ( ! function_exists( 'yith_wc_custom_input_text' ) ) {
  /**
   * Display input text before add to cart button.
   */
  function yith_wc_custom_input_text() {
    global $product;

    $product_id       = $product ? $product->get_id() : 0;
    $products_to_show = array( 11, 28 );

    if ( $product_id && in_array( $product_id, $products_to_show ) ) {
      $label = __( 'Write your comments', 'yith-wc-input-text' );
      printf(
  	  '<div class="yith_wc_input_text__wrapper">
  	  <label for="yith_wc_input_text">%s</label>
  	  <input type="text" id="yith_wc_input_text" name="yith_wc_input_text" class="yith_wc_input_text__field" value="">
  	  </div>',
  	  esc_html( $label )
      );
    }
  }
  add_action( 'woocommerce_before_add_to_cart_button', 'yith_wc_custom_input_text' );
}

if ( ! function_exists( 'yith_wc_add_cart_item_data' ) ) {
  /**
   * Add the input text value - item data.
   *
   * @param array   $cart_item_data cart item data.
   * @param integer $product_id     product id.
   * @param integer $variation_id   variation id.
   * @param boolean $quantity       quantity
   */
  function yith_wc_add_cart_item_data( $cart_item_data, $product_id, $variation_id, $quantity ) {
    if ( ! empty( $_POST['yith_wc_input_text'] ) ) {
      $cart_item_data['yith_wc_input_text'] = sanitize_text_field( wp_unslash( $_POST['yith_wc_input_text'] ) );
    }
    return $cart_item_data;
  }
  add_filter( 'woocommerce_add_cart_item_data', 'yith_wc_add_cart_item_data', 10, 4 );
}

if ( ! function_exists( 'yith_wc_get_item_data' ) ) {

  function yith_wc_get_item_data( $cart_data, $cart_item ) {
    if ( ! empty( $cart_item['yith_wc_input_text'] ) ) {
      $cart_data[] = array(
        'name'    => esc_html__( 'Your comments', 'yith-wc-input-text' ),
        'display' => $cart_item['yith_wc_input_text'],
      );
    }
    return $cart_data;
  }
  add_filter( 'woocommerce_get_item_data', 'yith_wc_get_item_data', 25, 2 );
}

if ( ! function_exists( 'yith_wc_order_line_item' ) ) {
  /**
   * Add the input text to the order.
   */
  function yith_wc_order_line_item( $item, $cart_item_key, $values, $order ) {
    foreach ( $item as $cart_item_key => $data ) {
      if ( isset( $data['yith_wc_input_text'] ) ) {
        $item->add_meta_data( 'your_comments', $data['yith_wc_input_text'], true );
      }
    }
  }
  add_action( 'woocommerce_checkout_create_order_line_item', 'yith_wc_order_line_item', 10, 4 );
}

if ( ! function_exists( 'yith_wc_add_inline_styles' ) ) {
  /**
   * Add CSS style
   */
  function yith_wc_add_inline_styles() {
    $styles = "
    .yith_wc_input_text__wrapper{
    	display: flex;
    	flex-direction: column;
    	margin: 20px 0px;
    }
    .yith_wc_input_text__wrapper .yith_wc_input_text__field{
    	max-width: 120px;
    }";
    
    wp_add_inline_style( 'woocommerce-inline', $styles );
  }
  add_action( 'wp_enqueue_scripts', 'yith_wc_add_inline_styles' );
}

No es necesario entender cómo funciona, pero centrémonos en una pequeña parte.

El código hace aparecer un campo personalizable en la página del producto, pero ¿cómo elegir en qué productos se muestre? Para especificar esto, todo lo que tienes que hacer es ir a la parte:

$products_to_show = array( 11, 28 );

Aquí, donde se encuentran los números 11 y 28, debe introducir el ID del producto en el que debe aparecer el campo personalizado. Evidentemente, 11 y 28 son solo los marcadores de posición que te ayudarán a localizar la pieza a editar.

Esto es todo lo que necesita saber sobre la inclusión de este campo personalizado en tu página de producto. Si lo has hecho todo correctamente, este campo debería aparecer en todos los lugares en los que te sea útil a ti o a tu cliente.

Es decir, en la página del producto:

En la página del carrito (y de pago):

Así como en la página de pedido para que puedas verlo:

Insertar campos personalizados en WooCommerce

Como puedes ver, el proceso de añadir este campo adicional no es complejo. Sin embargo, es limitado en términos de uso y puede ser propenso a errores por distracción.

Añadir campos de esta manera puede suponer un reto, sobre todo para los productos que requieren personalización y puede afectar al coste global.

Este código puede ser ciertamente útil para quienes necesiten añadir un pequeño componente personalizable a su tienda, pero en casos más avanzados es aconsejable ir en otra dirección.

Por eso recomendamos también un plugin que permite añadir campos personalizables de diferentes tipos, con un simple clic y en una amplia variedad de productos.

El mejor plugin para insertar campos personalizados en los productos de WooCommerce

Si estás interesado en ofrecer la posibilidad de personalizar los productos, entonces el plugin adecuado para ti es WooCommerce Product Add-Ons & Extra Options.

El plugin funciona de forma extremadamente intuitiva: tras instalarlo y activarlo, basta con ir a YITH >Product Add-ons & Extra Options para crear un «bloque de opciones». Este término significa simplemente un grupo de campos adicionales, para que puedan ser combinados y aplicados a diferentes productos sin tener que recrearlos de nuevo para cada objeto.

Una vez creado el bloque, podrás elegir entre numerosas opciones para tus campos adicionales:

Veamos juntos algunos de ellos:

• Casilla de verificación – campo adicional que permite al cliente añadir una o varias marcas según sus preferencias. Por ejemplo, es un campo estupendo para los ingredientes adicionales de una pizza, ya que puedes añadir tantos como quieras y dejar la elección en manos del cliente (también puedes añadir un coste adicional por cada opción).
• Radio – como el anterior, pero la elección se limita a una única opción. Volviendo al ejemplo anterior, podría hacer que el cliente eligiera entre el tipo básico (rojo, blanco…).
• Entrada de texto – este campo realiza la misma función que el código que ofrecimos anteriormente.
• Número – opción para que se elija un número (y se añada un coste basado en el valor introducido). Esta opción es ideal para servicios como la redacción de textos publicitarios, donde el coste suele estar asociado a la cantidad de palabras.

Hay muchas otras opciones, pero esto debería darte una idea del tipo de personalización que puedes ofrecer en tu página de producto.

Pongamos un ejemplo específico: tomemos una de las categorías que hemos enumerado anteriormente y veamos cómo el plugin puede ayudar a vender el producto.

En este caso hemos elegido joyería. Creamos un anillo que permita un cierto número de personalizaciones.

En concreto, queremos que permita elegir el material y la forma de la joya.

Para ello, hemos elegido dos extensiones de tipo imagen, con el fin de mostrar la elección al cliente y facilitar el proceso de compra:

Por supuesto, podríamos haber añadido otros campos. Por ejemplo, una entrada de texto para grabar el nombre de la pareja en el interior, una casilla de verificación con una serie de servicios adicionales (como contra el deslustre de la plata) y una fecha de envío (útil para ocasiones especiales).

Para los distintos productos, entran en juego diferentes opciones, como la posibilidad de subir un archivo (por ejemplo, en el caso de la impresión personalizada en una camiseta), o la elección de un color en una muestra específica o mediante un selector de colores.

Así, tu tienda puede convertirse en una fantástica pizzería automatizada que atiende pedidos en línea:

O puedes vender camisetas personalizables sin necesidad de largas negociaciones con cada cliente:

En resumen: las opciones que ofrece el plugin satisfacen las necesidades de todo tipo de personalización. Usando YITH WooCommerce Product Add-ons & Extra Options podrás vender pizzas, cestas de comida, joyas, ropa, regalos y mucho más.

Además, el plugin es totalmente compatible con otras extensiones para conseguir resultados avanzados con el mínimo esfuerzo.

Consideraciones finales y mejores prácticas

Como hemos visto anteriormente, la posibilidad de personalización en un producto puede jugar un papel clave en el aumento de tus conversiones y en el incremento de tu Valor Medio de Pedido (AOV). Por supuesto, esto no quiere decir que debas insertar campos personalizados donde no tengan sentido, pero es importante analizar tu catálogo para comprender cómo puedes atender a tus clientes.

Aprovecha el feedback de tus clientes y trata de integrar campos personalizados donde hayan solicitado cambios en el pasado.

Confiamos en que el código que te hemos proporcionado te ayude a sacar el máximo partido a tu negocio online y te recuerde que debes darle una oportunidad al plugin YITH WooCommerce Product Add-ons & Extra Options, especialmente si has decidido crear un modelo de venta basado en la personalización de productos.

WooCommerce es como una base sólida lista para ayudar a tu tienda online a elevarse a nuevas alturas. Todo lo que necesitas es la herramienta adecuada para desbloquear su inmenso potencial.