WooCommerce Campos personalizados: cómo crearlos y mostrarlos

¿Busca una forma de recopilar y mostrar información adicional sobre sus productos de WooCommerce? Los campos personalizados de WooCommerce son la solución y aprenderá cómo usarlos en esta publicación. Específicamente, aprenderá dos partes muy importantes del rompecabezas:
Agregar campos personalizados al backend de WooCommerce donde puede usarlos para agregar información adicional sobre un producto.
Tome esos campos personalizados de WooCommerce y muestrelos en el front-end para sus visitantes (esta es a menudo la parte más difícil, pero le mostraré un código sin código)
Para la segunda pieza de rompecabezas, me centraré especialmente en ayudarlo a mostrar los campos personalizados en un aspecto de tabla como este a continuación. La razón es que el procedimiento permite una solución completamente sin código:

Si desea mostrar campos personalizados de WooCommerce en una sola página de producto, este no es el punto central de este artículo, aunque cubriré el enfoque básico que debe adoptar y iré en la dirección correcta. Lo que deberá seguir este tutorial de WooCommerce con campos personalizados para seguir esta guía, necesitará la ayuda de algunos complementos. En primer lugar, para administrar la adición de los campos personalizados de WooCommerce en sí, utilizará el complemento de campos avanzados gratuitos de wordpress.org. Luego, para mostrar realmente esos campos personalizados en una tabla fácil de comprar, utilizará el complemento de la tabla de productos de WooCommerce. La apariencia de la tabla que ofrece este complemento es particularmente excelente para:
Tiendas al por mayor
Productos digitales (por ejemplo, libros electrónicos, fotos, audio, video, etc.)
Los restaurantes (incluido un sistema de pedidos) construyen sus propios productos
y así
Básicamente, es una excelente opción para crear cualquier tipo de formulario de comando wooCommerce. ¿Estas listo para empezar? Penetremos … Parte 1: Use campos personalizados avanzados para agregar campos después de instalar y activar el complemento de campos avanzados gratuitos de WordPress.org, vaya a campos personalizados → Agregue nuevo en el tablero de WordPress para crear los campos personalizados para los productos su WooCommerce.
1. Cree un nuevo grupo de campos allí, dé un nombre a su grupo de campo (el nombre no es muy importante, solo deja claro y fácil de recordar). Luego, utilizando las reglas de ubicación, elija mostrar este grupo de campos si el tipo de publicación es igual al producto. Esto le dice a los campos personalizados avanzados que desea que estos campos personalizados aparezcan solo para los productos de WooCommerce. ¡Y eso es! Aunque puede cambiar las opciones de configuración si lo desea, es perfecto para dejarlos como valores predeterminados y hacer clic en Publicación:
2. Agregue los campos personalizados de WooCommerce al grupo de campo y luego use el campo + Agregar para agregar el primer campo personalizado:

Para comenzar, dale una etiqueta de campo. Después de agregar la etiqueta, los campos personalizados avanzados completarán automáticamente el nombre del campo. Una opción importante para prestar atención es el tipo de campo. Deberá cambiar este menú de caída de acuerdo con la información que desea recopilar. Los campos personalizados avanzados le brindan muchas opciones que incluyen:

Texto: bueno para un texto corto, con una sola línea
Área de texto: está bien si desea ingresar múltiples oraciones/párrafo
Sitio web
Imagen
Expediente
Por ejemplo, suponga que vende granola casera y quiere:
Use un emoji o un emoji para indicar productos que forman parte de un comercio justo
Adjunte un documento PDF con información detallada sobre la fuente de cada ingrediente en su granola
Nota secundaria: este es un mal ejemplo, pero los mismos principios básicos se aplican independientemente de lo que desee usar campos personalizados. Nota de bonificación secundaria: este ejemplo me hace pensar en ese contorno de pollo en Portland. Te gustaría dos campos personalizados:
Emoji: puede usar un campo de texto o un enfoque fácil de usar sería usar un botón de radio con las dos opciones ya seleccionadas
Archivo: el uso de un campo de tipo de archivo le permitirá cargar un documento PDF (u otros tipos de archivos que especifique)
Asegúrese de actualizar el grupo de campo cuando haya agregado todos los campos personalizados de WooCommerce que desea usar.
3. Ingrese los datos en campos personalizados al editar productos ahora, cuando va a crear un nuevo producto o editar un producto existente, debería ver los nuevos campos personalizados. Por defecto, aparecerán justo debajo del editor de texto, aunque también puede usar la configuración del grupo de campo para moverlos en el cuadro de datos del producto si lo desea:

Deberá ingresar los datos relevantes en los campos personalizados para todos los productos a los que se aplican los campos personalizados. En este momento, ha creado con éxito campos personalizados en el backend y ha guardado esa información en la base de datos.
Sin embargo, si accede a la página del producto, los datos en el campo personalizado no se pueden ver en ningún lado: ¡la parte 2 de este tutorial ingresa al juego! Parte 2: Mostrar campos personalizados de WooCommerce con la tabla de productos de WooCommerce, recuerde, para este tutorial, nos centramos principalmente en tomar datos de campo personalizados e ingresar a un formulario de comando de WooCommerce como este:

Para hacer esto, deberá tener el complemento de la tabla de productos WooCommerce instalado y activado en su sitio web de WooCommerce.
1. Elija qué columnas mostrar para comenzar, acceda a WooCommerce → Configuración → Productos → Tablas de productos:

Lo primero que desea configurar es la opción de columnas en el contenido de la tabla. Aquí dirá la tabla de productos de WooCommerce para mostrar sus campos personalizados de WooCommerce (junto con toda la información habitual del producto). En un nivel básico, probablemente desee incluir la siguiente información genérica del producto:

Nombre: el nombre del producto

Imagen: la imagen presentada del producto

Descripción a corta descripción del producto
Precio – Producto
Agregue a la aiart-an Botón de adición en el carrito (puede controlar cómo funciona este botón en un segundo).
Cada artículo (separado por una coma) aparecerá como su propia columna con los datos del producto relevantes:
Luego, para agregar los campos personalizados como sus propias columnas, puede usar este formato: cf: nombre de campo donde el nombre del país es el nombre real del campo personalizado que desea mostrar. Recuerde, puede encontrar el nombre de un campo en la configuración de campo personalizado avanzado (ACF lo genera automáticamente en función de la etiqueta):
También puede cambiar el encabezado de una columna agregando dos puntos después. Por ejemplo, CF: Nombre de campo: el título de encabezado eventualmente podría verse así: 2. Configurar otras configuraciones Las configuraciones de la columna son la configuración más importante cuando se trata de mostrar los campos personalizados de WooCommerce. Sin embargo, la tabla de productos de WooCommerce también le ofrece una serie de otras opciones útiles que puede configurar.
No sientes que deberías, pero te recomiendo que los explore porque puedes hacer cosas como:

Agregar carga perezosa para grandes listas de productos

Cambiar cómo funciona la funcionalidad en el carrito

Agregar filtros o opciones de clasificación
Elija cómo mostrar las variantes de productos
Agregar un cuadro de búsqueda
y así
Después de haber terminado, asegúrese de haber guardado sus cambios. 3. Agregue el código corto para la tabla de productos de WooCommerce después de haber terminado de configurar el complemento, puede usar el código corto de la tabla de productos de WooCommerce para mostrar el formulario de pedido en cualquier lugar de su sitio. El código básico corto es [Product_Table]. Sin embargo, ese código corto mostrará todos los productos en su tienda, que pueden no ser siempre lo que desea. Para controlar los productos que aparecen, puede usar las muchas reglas para la inclusión/exclusión de la tabla de productos de WooCommerce. Por ejemplo, para mostrar solo productos en la categoría “Granola”, puede cambiar el código corto de la siguiente manera: [Product_Table Category = “Granola”] Después de agregar el código corto, debe ver el formulario de pedido y todos los campos personalizados relevantes en el front-end de su sitio:
¡Y eso es! Si lo desea, puede usar varios códigos cortos con diferentes reglas de inclusión/exclusión para organizar sus productos. O incluso puede agregar el código corto a la página de archivo de la tienda en lugar de usar la visualización de la cuadrícula normal. ¿Qué pasa si no quieres usar un formulario de comando wooCommerce? Si no desea acercarse al formulario de pedido y prefiere agregar sus campos personalizados al producto WoCommerce habitual, deberá obtener un poco las manos (sucio con PHP, es decir). Específicamente, puede usar WooCommerce Hooks para “conectar” los campos personalizados en la página de productos únicos de WooCommerce. Por ejemplo, si desea mostrar los campos personalizados inmediatamente después del resumen del producto, puede agregar algo como este al archivo Functions.php del tema del niño, donde Field_Name es el nombre real de su campo: // Mostrar campos en WooCommerce Página de producto único add_action (‘wooCommerce_after_single_product_summary’, “acf_product_content”, 10); function acf_product_content () {print_r (get_field (‘field_name’))} Esto le traerá el contenido del campo, pero aún tendrá que agregar otro contenido y estilo para que se vea bien. Si no es técnico, ¡puede ver por qué opté por el código sin código! Pensamientos finales sobre los campos personalizados de WooCommerce con campos personalizados avanzados y tabla de productos de WooCommerce, puede agregar y mostrar campos personalizados de WooCommerce sin tener que escribir una sola línea PHP. Recuerde, todo lo que tiene que hacer es: crear un grupo de campos personalizados avanzados y asignarlo a WooCommerce
Cree cuántos campos personalizados desea usar datos en campos personalizados al agregar/editar productos de WooCommerce
Agregue campos personalizados como columnas a la tabla de productos de WooCommerce

Coloque el código corto para la tabla de productos de WooCommerce donde desee los formularios de pedido

¿Tiene alguna pregunta sobre este método de trabajar con campos personalizados para sus productos de WooCommerce?¡Pregunte en los comentarios!Divulgación: algunos de los enlaces en este artículo son enlaces afiliados, lo que significa que, sin costo adicional, podemos ganar una comisión si hace clic y realiza una compra.