X
Jhon Marreros Guzmán

Campos personalizados en productos de WooCommerce

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.

 

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.

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.

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

 
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.

 

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

 

Artículos Relacionados

Categorías: Themes
Etiquetas: mejoraswoocommerce

Ver comentarios (174)

  • 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.

  • 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.

    • 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.

  • 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?

  • 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....

    • 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.

      • 
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

        • 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.

  • 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

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

  • 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

  • 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.

    • 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.

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

    • 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.

  • 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

    • 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.

  • 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

Deja un comentario