DecodeCMS

Tu WordPress a otro Nivel ...

Inicio / Tutoriales / Themes / Campos personalizados en productos de WooCommerce
Anuncio banner webservi

Campos personalizados en productos de WooCommerce

Campos personalizados en productos de WooCommerce

[ ] [ Actualizado: ] [ Autor: ][ Themes - Básico] [ ]

En un artículo anterior vimos cómo usar los campos personalizados de WordPress en entradas. Puesto que se puede aplicar lo mismo a cualquier Custom Post Type, en este artículo veremos cómo crear campos personalizados en productos de WooCommerce.

 

Resultado Final

Al final, obtendremos algo similar a lo que se muestra en la siguiente imagen.

Campos personalizados mostrándose en el front-end del sitio

 

Generalidades

WooCommerce te permite agrupar productos por categorías y etiquetas, además puedes agregar atributos de productos, sin embargo, si quieres añadir características adicionales como parte de la información del producto, puedes evaluar usar campos personalizados.

Por ejemplo para una tienda de libros podríamos considerar los siguientes campos personalizados:

  • Edición
  • Autor(es)
  • Género
  • Editorial
  • Enlace a recursos externos, etc

Seguro estarás pensando que esto podría ir como parte de la descripción del producto, y es cierto, sin embargo usar campos personalizados te dará más flexibilidad

 

Crear campos personalizados

Para añadir los campos personalizados de manera simple, usaremos el plugin Advanced Custom Fields.

Tras instalar el plugin verás que te aparece una opción en el menú del dashboard llamada custom fields, tras ingresar lo primero que tienes que hacer es agregar un nuevo Field Group e ir añadiendo cada uno de los campos personalizados.

Campos personalizados usando el plugin Advanced custom fields

Es importante definir el Custom Post Type, que en nuestro caso será Product
Con el plugin Advanced Custom Fields puedes agregar campos personalizados para cualquier Custom Post Type

 
Es posible añadir campos de tipo de selección, tal como se ve en la imagen.

Creación de un campo de tipo selección

 
Los campos de selección permiten definir condicionales para nuevos campos basado en los valores de selección.

Condicional en campos personalizado

 
Al final tras ingresar los campos personalizados podrás ver en la pantalla de edición de producto los campos creados, listos para ser usados como parte de la información del producto.

Edición de producto con nuevos campos personalizados agregados

 

Mostrar Campos personalizados en el front-end de tu sitio

Todo lo realizado anteriormente de momento no se esta mostrando a los usuarios de tu tienda, para mostrar esta información en el detalle de producto puedes hacer uso de los hooks de WooCommerce y de las funciones del plugin Advanced custom field.

Coloca el siguiente código al final del archivo functions.php de tu theme.


add_action( 'woocommerce_single_product_summary', "dcms_caracteristicas_producto", 8 );

function dcms_caracteristicas_producto(){
   
  if (function_exists('get_field')){
    echo "<p><strong>Edición:</strong> ". get_field('edicion')."</p>"; 
    echo "<p><strong>Autor: </strong>". get_field('autor')."</p>"; 
    echo "<p><strong>Género: </strong>". get_field('genero')."</p>"; 
    echo "<p><strong>Editorial: </strong>". get_field('editorial')."</p>";
  }
  
}

En el código anterior:

  • Usamos el hook woocommerce_single_product_summary que hace referencia a la función dcms_caracteristicas_producto
  • Dentro de la función comprobamos si la función get_field del plugin Advanced Custom fields existe
  • Si la función existe, entonces la usamos para recuperar los campos creados

Para complementar, puedes añadir datos estructurados o microdatos a los campos adicionales, revisa: Cómo Agregar Microdatos en campos de productos en WooCommerce

 
¿Aún con dudas?, en el siguiente video se detalla los puntos anteriores.

 

Artículos Relacionados

Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (4 votos, promedio: 5,00 de 5)
Cargando…

Interacciones con los lectores

Comentarios

  1. Fernando

    Le agradezco su aporte me ha resuelto parte del problema que tengo. He incluido las campos personalizados en la página de producto. Ahora necesito añadir alguno de los campos personalizados en el listado de productos. Me podrías ayudar. De antemano muchas gracias.

  2. VIVIANA ORTEGA

    Siento que estaba tan cerca de solucionar mi problema hasta que me salio este aviso

    Los cambios en tu código PHP se han revertido debido a un error en la línea 65 del archivo wp-content/themes/north-wp/functions.php. Por favor, arréglalo y trata de guardar de nuevo.

    syntax error, unexpected ‘>’

    QUÉ PUEDO HACER ? NO SE QUE ES LO QUE FALLA.

    • Jhon Marreros Guzmán

      Hola, revisa bien el código, prueba con el código de ejemplo sin realizar cambios, te sugiero además usar el Administrador de Archivos de tu Cpanel en lugar de hacer los cambios con el editor de tu WordPress, ya que este último es muy limitado y te reportará a veces errores cuando no los hay.

  3. Juan Maristany

    Un buen tutorial,gran ayuda, gracias.
    Tengo una consulta, voy a hacer una importación masiva de datos de productos por CSV, a la hora de importar te pregunta donde quieres cada columna de datos. He hecho una prueba y los que vienen en origen estan todos pero no salen los nuevos campos creados. ¿Hay alguna solución?

  4. estorde

    Parece ser que existe un error en la sintaxis, al menos para las versiones más recientes de WordPress.

    Este código, al menos no da un error en la sintaxis al intentar guardarlo:

    
add_action( 'woocommerce_single_product_summary', "dcms_caracteristicas_producto", 10 );

if ( ! function_exists( 'dcms_caracteristicas_producto' ) ) :
function dcms_caracteristicas_producto(){ ?>
    Autor: 
    ISBN:
    Nº. páginas:  
<?php  }
endif;

    sin embargo por algún motivo, no me pinta el valor del campo en el front….

    • Jhon Marreros Guzmán

      Hola, cuando es un error de sintaxis es PHP quien lo valida, no WordPress, qué error te aparece cuando usas el código de este artículo, el código que envías no veo que imprima los campos.

      • Trips 

        
add_action( 'woocommerce_single_product_summary', "dcms_ubicacion", 8 );

function dcms_ubicacion(){
   
  if (function_exists('get_field')){
    echo "Departamento: ". get_field('Departamento')."";
    echo "Municipio: ". get_field('Municipio').""; 
    echo "Dirección: ". get_field('direccion').""; 
    
  }
  
}

        hola exente tutorial , todo perfecto lo único es que no se imprimen los datos capturados en el frot…. espero su valiosa colaboración

        • Jhon Marreros Guzmán

          Hola, tal como lo tienes si que debería mostrarse, asegúrate de usar los nombres de los campos en lugar de labels, los nombres son usualmente escritos siempre en minúsculas y sin caracteres especiales. Si sigues con problemas prueba activar y colocar el código en otro theme, usa alguno de los que viene por defecto.

  5. Freddy

    Muy buen aporte me ayudo mucho, me gustaria saber como agrego esos campos creados a la zona de widgets para poder usarlos en un sidebar, estoy en proceso de creacion de una tienda web y los necesito para crear el catalogo de filtros.

    Gracias

    • Jhon Marreros Guzmán

      Hola, parece que hay un plugin que te puede ayudar con los filtros y que veo que se integra con ACF (Advanced Custom Fields)

  6. joaquin

    Hola
    Vuelvo a releer éste post y a visionar el video anexo buscando información sobre la manera en qué podría implementar la opción de que al pagar el cliente con PayPal se sume ése porcentaje que cobra PayPal al total del pedido, y que dicho sobreprecio salga especificado en la orden de pedido antes de aceptar; para que el cliente puede continuar o pagar el pedido por Stripe sin pagar el sobreprecio de PayPal.
    Imagino que quizá no sea objeto de éste tutorial
    Enhorabuena por el contenido tan valioso que generas y gracias por compartirlo.
    Un saludo

  7. Jose Carlos

    Perfecto!! Funciona perfectamente. Solo que no sé cómo hacer para que esos campos se muestren en otro color para destacarlos sobre el resto del texto.

    • Jhon Marreros Guzmán

      Hola, usa código CSS al mostrar los campos en el front-end, por ejemplo en:

      <p style="color:red"><strong>Edición:</strong>

      Aunque lógicamente lo mejor sería que tengas clases CSS que puedas reutilizar en lugar de colocar estilos en línea.

  8. jose casasola

    Gracias por el aporte, esta excelente , pregunta que plantillas, podrias recomendar para una tienda en linea de aparatos electronicos y domesticos.

    • Jhon Marreros Guzmán

      Hola StoreFront te podría servir, es un theme liviano de los creadores de WooCommerce para tienda, tiene además child-themes que tienen diseños particulares.

  9. estorde

    Cómo se haría para que pinte una imagen añadida en un campo personalizado?

    El nombre del campo que he asignado es: «foto_del_autor», el tipo de campo es una imagen, y por defecto tengo asignado que el valor que devuelve es el «Array de imagen», aunque creo que podría ser factible que devuelva la «URL de la imagen».

    Siguiendo tu código he tratado de escribir lo siguiente, pero me da errores en la sintaxis:

     
add_action( 'woocommerce_single_product_summary', "dcms_caracteristicas_producto", 8 );

function dcms_caracteristicas_producto(){
   
  if (function_exists('get_field')){
    echo "Nombre: ". get_field('autor').""; 
    echo "Biografía: ". get_field('biografia').""; 
    echo "Foto autor: ";
  }
}

    Disculpa las molestias por enviar varios mensajes, no lograba pegar correctamente el código que he probado y muchas gracias

    • Jhon Marreros Guzmán

      Hola, no veo que hayas agregado código para mostrar la foto del autor, tienes que usar la etiqueta HTML img, revisa : https://www.w3schools.com/tags/tag_img.asp , lo que te devuelva el campo debería ser la ruta que debes ponerla en el atributo src, lo único que tienes que cuidar son las comillas, usa comillas simples par el src, es decir si tu campo se llama imagen podrías probar:

      echo "<strong>Foto autor: </strong><img src='".get_field('imagen')."' height='42' width='42'>";

      Saludos.

  10. Pedro

    De entrada gracias por toda la información Jhon.
    Tengo una duda que se ha convertido en problema.
    ¿Es posible insertar ACF a las plantillas de mail de woocommerce (customer-new-account.php, etc…)?

    Lo he probado creando un ACF Pagina de optiones para poder añadir el texto deseado y luego añado en la plantilla añado el the_field() o get_field, pero me temo que no funciona.
    ¿Alguna solución?
    Slaudos

  11. Perillán

    Hola. Te felicito por el post, muy bueno para aquellos que estamos empezando con woocommerce…
    He conseguido añadir un campo personalizado de tipo numerico sin problemas.
    Pero tengo una pregunta.
    En functions.php tengo una funcion que limita el carrito a un máximo de 3 productos añadidos.

    Y lo que quiero es reutilizar esta funció para que me sume la cantidad de ese campo númerico y cuando alcance un valor máximo, no deje de añadir más productos.
    Y el caso es que en programación php estoy totalmente perdido…
    Podrías ayudarme?
    Gracias

      • Perillan

        Hola de nuevo.
        Ya lo he solucionado.
        Si alguien está interesado cuelgo el código.
        Un saludo

  12. Bolsiportaeas

    Hola, me esta sirviendo muchisimo este tutorial para mi pagina web de colecciones.
    Lo que no consigo es poner el campo autor, como un link a la pagina del autor. ¿ Podrias ayudarme? Gracias

    • Jhon Marreros Guzmán

      Hola, tendrías que tener dos campos, el nombre del autor y la url del autor, luego tendrías que crear en enlace con PHP, tendría que quedar algo como:

      echo "Autor: <a href='".get_field('url_autor')."' target='_blank'>".get_field('autor')."</a>";

      • Bolsiportadas

        Muchisimas gracias, llevo un mes peleandome con ese tema y lo habia dejado por imposible, yo estaba intentando usar el campo enlace en vez de texto. Pero me daba error continuamente.

  13. AndresQ

    Hola, genial tu video explicativo, pero tengo una duda, tengo una tienda de zapatos y quiero 1 solo campo que muestre una imagen con las dimensiones del zapato (que muestre la medida del taco y la plataforma). Intente usar este codigo pero si bien aparece el campo en el producto solo aparece la descripcion Array, no me aparece la imagen, que esta faltando agregar?
    muchas gracias 

    add_action( 'woocommerce_single_product_summary', "dcms_caracteristicas_producto", 8 );

function dcms_caracteristicas_producto(){
   
  if (function_exists('get_field')){
    echo "Dimensiones: ". get_field('dimensiones').""; 
      }
}

    • Jhon Marreros Guzmán

      Hola, creo que el campo que estas intentando imprimir no tiene un solo valor, qué tipo de campo es?, podrías probar con: print_r( get_field(‘dimensiones’) ) a ver que te reportar, si es un array tendrías que usar algún key para imprimir.

  14. Inaki

    Hola. UMe ha venido genial la explicacion! Una duda que tengo. Hay manera de crear un campo privado o de uso interno? En mi caso estoy montando una tienda con woocomerce y los productos que se venden tienen un codigo de referencia unico, pero que es una informacion delicada y que no quiero que se muestre en publico, pero para llevar un control interno seria fantastico poder ver esta informacion en la ficha de cada producto. Hay alguna manera de hacerlo?

    Muchas gracias!

    • Jhon Marreros Guzmán

      Hola, podrías probar simplemente agregando el campo al producto pero no mostrarlo al usuario, es decir mostrar sólo los campos que deseas con la función get_field()

  15. Mateo

    Hola una pregunta, estoy usando un plugin llamador Yith frontend manager y no consigo que los campos personalizados se muestren en el formulario del frontend. Hay alguna solución ?

  16. Francisco

    Hola antes que nada te felicito por el tutorial muy bien explicado y sin rodeos, tengo una duda este plugin se puede utilizar para agregar marca «brand» como microdatos (que vi en otro de tus artículos) también se puede utilizar para agregar un identificador global por ejemplo el GTIN?

  17. Juan Carlos

    Ami me funciono perfectamente, gracias,

  18. vetoriano

    hola, Jhon Marreros Guzmán
    Estupendo tutorial. me funciono correctamente en la tienda . me gustaria hacer este mismo pero en las entradas de mi blog para crear eventos o recetas. Podias facilitarme un tutorial ? GRACIAS!!!!

  19. estorde

    Buenas,

    Veo que esto es para insertar los campos personalizados en la página de producto de WooCommerce, a través del hook «woocommerce_single_product_summary» pero a que hook habría que hacer referencia para insertar los campos en una página de proyecto de WordPress sin WooCommerce instalado??

    Lo que intento es mostrar un logo de una discográfica que tenga un link hacia la web de la misma y la fecha de publicación de cada disco

    Mil gracias

  20. vetoriano

    Hola Jhon Marreros Guzmán, No me aparece ese campo. busque tanto tiempo esa opcion que antes tenia y no la tengo ahora. Como soluciono ese problema. Gracias!!!

  22. vetoriano

    Ya esta solucionado, encontre el problema. Ya me quedo claro. Disculpame!!!
    Gracias por tu trabajo..

  23. Martn P

    Hola Jhon, me anduvo fantástico!
    Una consulta, como puedo hacer para que no se muestre la información html si el campo queda vacío? En tu ejemplo: para que no se muestre «Género:» si el campo «genero» está vacío.
    Abrazo y gracias por tu post!

    • Jhon Marreros Guzmán

      Hola, tendrías que poner una condicional antes, si hay algún valor diferente de vacío entonces entrará a la condición en la misma línea, es decir:

      if (get_field('genero')) echo "<p><strong>Género: </strong>". get_field('genero')."</p>";

  24. HERNÁN PADILLA

    Estimado Jhon,
    Es genial la enseñanza, y resulta super.
    Necesito crear campos en los productos, pero el precio debe variar en función de estas variaciones, es una óptica, para que puedas entender para la compra de gafas o lentes, el cliente tiene una receta de parte del medico, en esta receta haya varios datos que necesitamos para calcular el valor del lente final, estos son los datos; Tipo de Cristal, Desviación de Ojo derecho, Desviación del Ojo izquierdo; ejemplo
    Tipo de Cristal: COD0001HUYW Desviación de Ojo derecho: -2 Desviación del Ojo izquierdo: 3
    la desviación de los ojos pueden ser en uno solo ojo o en ambos, y para eso hay rangos de desviación para el ejemplo supongamos que el rango de desviación es 02/04, los valores siempre se consideran positivos, si esta en este rango y el tipo de Cristal es COD0001HUYW, esto me da un precio del Cristal, seria una matriz de desviación y de códigos de cristales, para este caso supongamos que la intersección es el valor de $30000, esto es posiblemente mas avanzado de el caso expuesto, mi duda es como puedo vincular los campos creados, para este caso si tengo la desviación de los ojos en x rango y tengo el código de Cristal el sistema arroje el valor de esta interacción, si es posible por esta camino seria de gran ayuda, espero tu ayuda sino seria genial poder contactarme vía skype y ver posibilidad de asesoría mas directa para exponer mejor el caso.
    saludos y muchas gracias

  25. Sebastian

    Hola Jhon, muy buen aporte, hace poco logre crear la integración con el plugin que mencionas en este articulo, ahora compre otro plugin que se llama producto-pdf desde https://www.enriquejros.com/plugins/descargar-producto-pdf-woocommerce/ que lo que hace es mostrar la ficha del producto
    woocomerce en formato pdf, el problema es que obviamente no muestra los campos al generar el archivo, tienes alguna idea de como lo podría hacer o por ultimo llevar los valores?

    • Jhon Marreros Guzmán

      Hola, es posible que el plugin sólo tome en cuenta los campos que vienen por defecto con WooCommerce y tendrías que implementar algo similar a lo que se ve en este artículo pero a nivel de plugin, es decir el plugin que usas no es compatible con el plugin ACF. Consulta con el soporte de tu plugin a ver que te comentan.

      • Sebastian

        Gracias por la respuesta, al final lo logre solucionar, tuve que modificar el archivo PHP que generaba el pdf y ahí llame a los campos del ACF de esta manera.
        Ejemplo: 

        $procedencia = get_field('procedencia', $this->id);

        ahí guardaba en la varialble el valor del campo y luego los escribí manteniendo el código del otro plugin:

        //escribir el valor
 $pdf->Write(6, __('Procedencia del bien: ', 'producto-pdf') . utf8_decode ($procedencia));

        Saludos

  26. Ricardo

    Hola, gran aportación. Me gustaría saber si se puede evitar en unos productos para que no salga esa info y en otros si.
    Gracias

    • Jhon Marreros Guzmán

      Hola, puedes hacer condicionales, prueba accediendo al objeto producto $product->get_id() para saber el producto específico.

      • Ricardo

        Muchas gracias, No existe un opción que habilite o no el campo específico en cada producto?

        • Jhon Marreros Guzmán

          Hola, no he visto que al momento de crear el grupo de campos con ACF tengas esta opción, por lo que podrías evaluar simplemente dejar el campo vacío en el producto y luego si esta vacío por programación no lo muestras en el detalle de producto.

  27. Ricardo

    Muchas gracias, sería este código

    My field value:

    Pero no sé donde hay que ponerlo dentro de mi tema.

    • Jhon Marreros Guzmán

      Hola, para mostrar cada campo antes tienes que validar si tiene contenido, es decir tu código quedaría:

      if (get_field('dimensiones')) echo "Dimensiones: ". get_field('dimensiones')."";

      Saludos.

      • Ricardo

        Muchas gracias, ahora funciona genial.
        Saludos

  28. federico

    Jhon,

    excelente explicación (y video!). Pero te hago una consulta: ya logramos crear el campo personalizado que se muestra en la página del producto. Pero hay forma de hacer que también se muestre en la página de la tienda (por ejemplo sobre el título del producto)?

    Desde ya, muchas gracias!

    • Jhon Marreros Guzmán

      Hola Federico, me lo anoto para revisar esto, es posible que actualice este artículo o haga uno nuevo explicándolo.

  29. erick

    Estimado te hago una consulta estoy insertando un archivo PDF en el producto pero al mirarlo en el producto como visitante me entrega el valor :»array» que debo hacer?

  30. caeto

    Muchas gracias pude añadir un campo personalizado en en la pagina de la tenda usando woocommerce_after_shop_loop_item_title

    Gracias mIl

    • Jhon Marreros Guzmán

      Hola, que bueno, efectivamente puedes usar otro Hook, el que comentas se usa en una lista de productos.
      Saludos.

  31. Gonzalo

    Hola Jhon
    Muchas gracias por la información de tu web en https://decodecms.com/campos-personalizados-en-productos-de-woocommerce/

    Estoy tratando de construir una tienda online con ayuda del plugin de campos personalizados. Mi problema es no saber como hacer lo siguiente: usando un campo personalizado tipo Checkbox se pueda elegir varias opciones, en el backend aparecen como un texto con su casilla a marcar, pero me gustaría que en el front end lo que apareciera son una imagen (70x70px) por cada opción marcada. Para mi son dos problemas, uno como configurar el campo personalizado (texto/imagen) y otro el código para que se muestre.

    Muchas gracias. Un saludo

  32. edha

    buenas, he visto en los comentarios que a la gente le funciona…no se si es que estoy haciendo algo mal:
    me marcan estos errores:

    Se ha detectado 1 elemento válido con advertencias

    4 advertencias
    Falta el campo «brand» (opcional)
    Falta el campo «review» (opcional)
    Falta el campo «aggregateRating» (opcional)
    No se ha proporcionado ningún identificador internacional, como un GTIN, un MPN o un ISBN (opcion

    estoy ya desesperadita 🙁

    gracias!!

    • Jhon Marreros Guzmán

      Hola, los datos de marca y revisiones los agregas a través de plugins, no es necesario que agregues estos datos con campos personalizados.

  33. Lucio

    HOla exelente aporte. Mi consulta es como puedo colocar en la pagina de productos el campo autor por ejemplo? Sería en una lista de productos.

  34. Esteban

    Hola, Muy buen tutorial, tenía el problema que google search console me decía que faltaba el campo agregateRating , ( es una web de venta de productos), instalé el plugin cree el campo Rating luego con el código para Mircodatos hice que direccione el campo Rating a aggregateRating el error desapareció pero me pide ahora que falta el campo ratingValue y que se debe especificar el ratingCount y el reviewCount, los cree por separado como hice con el aggregateRating pero no lo valido, pareciera que que son subcampos dentro de aggregateRating. Puede ser ? como podría solucionarlo ? Muchas Gracias por tu ayuda

  35. Nelson Huaman

    Como puedo agregar JS y CSS en un Plugin personalizado para WooCoommerce.
    JS y CSS que se ejecuten cuando carga cada producto y en las pagina de productos.
    Esos archivos de JS y CSS estén incluidos en el la carpeta del Plugin Personalizado para WooCommerce

    Ayuda soy novato en esto. Gracias

    • Jhon Marreros Guzmán

      Hola, puedes hacerlo en dos pasos, registrarlo en algún hook de inicialización usando wp_register_script(), pero para que cargue en determinadas páginas encolarlo sólo cuando estas usando algún Hook de la página de producto con la función wp_enqueue_script()

  36. moi

    Hola, cómo puedo aplicarlo para que aparezca en vez de un texto, un link?

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*