En un post anterior vimos como crear taxonomías personalizadas para los productos de WooCommerce. Esto está bien cuando las categorías y etiquetas no son suficientes, como en el caso de una tienda de libros que necesita ordenar los productos por autores o editoriales.

Sin embargo hay productos que tienen infinidad de características que no nos interesa convertir en taxonomías.

Por ejemplo puedes necesitar añadir:

  • Un documento pdf a cada producto para que el cliente pueda descargarlo.
  • Información personalizada como el itinerario de un viaje.
  • Añadir otras fotos además de las incluidas en la galería de producto.
  • Otro tipo de datos como enlaces, vídeos etc.

En mi caso he estado creando una tienda online de relojes donde necesitaba añadir información como: materiales, diámetro, garantía etc.

Este es un ejemplo de los campos personalizados que necesitaba para el proyecto:

campos-personalizados-en-productos-de-woocommerce-con-advanced-custom-fields

Cómo crear los campos personalizados

Para hacer esto de forma rápida y sencilla, puedes hacerlo con el plugin gratuito Advanced Custom Fields. Este plugin también puedes utilizarlo para añadir campos personalizados a las páginas o posts de WordPress, pero en este caso lo voy a utilizar para los productos de WooCommerce.

Una vez instalado y activado, busca en el menú de la izquierda de WordPress > Campos personalizados > Añadir nuevo.

El plugin te pide que añadas un título y especifiques a que tipo de post vas a aplicar los nuevos campos, en este caso a “productos”:

advanced custom fields en woocommerce

Una vez hecho esto, puedes añadir tantos campos como quieras.

Necesitas darle una “Etiqueta del campo”, este es el nombre del campo para que tu sepas de que se trata.

También es necesario el “Nombre del campo”, este es el nombre que utilizará internamente WordPress, por lo que no debe contener ni mayúsculas, ni tildes, ni espacios, ni caracteres que no estén en el alfabeto inglés.

Tienes varios tipos de campos, el más habitual es el campo de texto, para que la persona que va a añadir los productos pueda escribir lo que quiera.

Sin embargo el campo select facilita la tarea si se trata de elegir entre varios valores ya especificados:

campo select

Una vez que tengas tus campos creados, verás que al añadir o editar un producto de WooCommerce ha cambiado la página, ya que aparecerá una nueva caja pidiendo que rellenes los nuevos campos:

rellenar campos personalizados

Mostrar los campos personalizados en la tienda online

Pero nada de esto tendría sentido si no muestras la información de los campos a los usuarios de tu tienda online. Para esto hay que añadir algo de código al archivo functions.php de tu tema o bien crear un plugin propio.

// Show advanced custom fields in product detail page
add_action( 'woocommerce_single_product_summary', "ACF_product_content", 8 );

function ACF_product_content(){
   
  if (function_exists('the_field')){
    echo '<b>Modelo: </b>';
    the_field('modelo');
    echo '<b>Diámetro: </b>';
    the_field('diametro');
  }
  
}

Lo que hace este trozo de código es engancharse a la acción “woocommerce_single_product_summary” que es la encargada de mostrar el título y la descripción corta del producto entre otros campos.

El número 8 que aparece al final hará que se muestre justo después del título del producto, puedes jugar con este valor para moverlo a una posición diferente.

La función comprueba primero si tenemos el plugin “Advanced Custom Fields” activado y por lo tanto la función “the_field” existe.

Si es así, solo debes indicarle que campos quieres mostrar con la función the_field(); Sustituyendo el nombre del campo entre las comillas simples de la función.

Eso es todo! ya tienes tus nuevos campos mostrándose en la ficha de cada producto. Además la gestión de la tienda online será más fácil y organizada ya que la información de los productos aparecerá siempre en el mismo orden dando un aspecto más profesional.

Si te ha sido de ayuda comparte este post y si tienes cualquier duda deja un comentario!