Cómo añadir campos personalizados a la página de producto de WooCommerce

Este artículo fue creado para ayudar a los principiantes que son nuevos en WooCommerce y plantillas de productos. Vamos a mostrar cómo personalizar la plantilla de producto y añadir campos personalizados a sus productos WooCommerce.

La página de producto de WooCommerce suele mostrar los datos del producto como título, imagen, galería de imágenes, descripción corta, descripción larga, precio y descuento. Y si hay atributos y variaciones. Pero no los campos personalizados.

Hay varias formas de lograr este objetivo, y verás que mostrar los valores de los campos personalizados en una página individual de un producto es bastante sencillo, y hacerlo sin editar demasiado código.

Este artículo cubre la adición de campos personalizados sólo a la página de producto de WooCommerce. Si también está interesado en añadir campos a la página de resumen de la tienda, lea cómo mostrar campos ACF en la página de la tienda Woo.

A continuación adjuntamos un video tutorial que le mostrará cómo llegar a ella. Pero no dude en omitir el vídeo, como en el artículo siguiente proporcionamos un tutorial completo paso a paso en la versión de texto.

Los campos personalizados son una gran manera de almacenar datos adicionales acerca de un post o producto. Por cierto, el Producto técnicamente también es un post, sólo que con un tipo diferente.

Como ya sabrás, encontrar el plugin adecuado suele ser un camino arduo. Pero no deje que esto le impida la construcción de su kit de herramientas plugin.

The Best

El plugin más popular que recomendamos utilizar a la hora de crear campos personalizados es Advanced Custom Fields (ACF). Aunque hay otros plugins aquí y por aquí, pero hemos encontrado que o bien cuestan lo mismo, o incluso un poco más, o los plugins tienen características limitadas.

Así que utilizaremos ACF para nuestro método en este tutorial.

1. Descargar e instalar el plugin Advanced Custom Fields.
2. Visite la pestaña 'Campos personalizados' en el menú Admin del backend.
3. Haga clic en "Añadir nuevo" para añadir un nuevo grupo de campos.
   Nota: Los grupos de campos están ahí para ayudarle a organizar sus campos en grupos.
4. Aparecerá la pantalla "Añadir nuevo grupo de campos" donde podrá añadir campos.
5. Utilice el botón "Añadir campo" para añadir un campo y, a continuación, rellene la etiqueta y un nombre de campo en minúsculas y seleccione el tipo "Texto" en el menú desplegable.
6. Ubicación, seleccione Mostrar este grupo de campos si Tipo de Publicación es igual a Producto.
7. Seleccione otros 'Ajustes' que desee. Haga clic en "Publicar".
8. Para añadir más campos, siga utilizando el botón "Añadir campo".

Eso es todo lo que necesitas hacer para crear los campos. Así que el siguiente paso es añadir valores de campo personalizados a su(s) producto(s).

1. Visite la pestaña 'Productos' en el menú Admin del backend.
2. En la lista de productos, seleccione el producto que desea editar para rellenar los valores de sus campos personalizados.
3. Una vez en la pantalla de edición del producto, desplácese hacia abajo hasta que vea los campos personalizados.
4. Introduzca los valores de los campos personalizados. Haga clic en "Actualizar" para guardar el producto.
5. Siga estos pasos hasta que haya añadido los valores de los campos personalizados a todos sus productos.

Consejo profesional: Establecer un valor predeterminado en su grupo de campos ACF no rellenará automáticamente los valores de los campos personalizados para todos sus productos. Así que usted tendría que editar el producto y haga clic en "actualizar" para cada producto.

Es hora de mostrar los campos en la página del producto.

Desafortunadamente, ni WooCommerce ni el plugin ACF vienen con una manera de mostrar realmente los valores de campo en la parte frontal de su sitio web. Pero cualquier buen desarrollador de WordPress debe saber cómo modificar la plantilla de página de producto de Woo. Así que vamos a sumergirnos en

Para los profesionales y los lectores conocedores de la tecnología: modificar y añadir código PHP para obtener y mostrar estos campos, cómo trabajar con campos ACF se puede leer en ACF documentación.

Sin embargo, hay otra manera. Se trata de utilizar algún plugin que lo haga en nuestro lugar. En nuestro caso, usaremos el plugin Advanced Views para mostrar los campos personalizados.

Advanced Views es uno de los addons de ACF y ofrece una forma de mostrar Entradas y sus campos ACF en cualquier parte de tu sitio usando shortcodes. Esto significa que ya no tienes que escribir ningún código PHP para consultar las entradas, obtener los valores de los campos o mostrarlos. Lee cómo mostrar campos ACF sin codificar para conocer todos los beneficios del enfoque shortcode.

1. Descargue e instale el plugin Advanced Views.
2. Haga clic en "Añadir nuevo" para añadir una nueva Vista.
3. Aparecerá la pantalla "Editar vista ACF".
4. Dé a su Vista un título y una breve descripción, para poder encontrarla fácilmente más adelante.
5. Campos, Grupo, seleccione el grupo de campos que creó anteriormente.
6. Campo, seleccione el campo y asígnele una etiqueta.
7. Haga clic en "Añadir campo" y repita el paso 6 hasta que haya añadido todos los campos.

Consejo: Utilice el manejador de filas para reordenar los campos.

Para el tipo campo repetidor; Cambie la pestaña a 'Subcampos Repetidores', Subcampo, seleccione su campo repetidor, luego dele una Etiqueta. Así que ahora hemos llegado a los pasos finales.

1. Haz clic en 'Actualizar' para guardar tu Vista.
2. Copia el shortcode.
3. Conéctese a su servidor a través de FTP y navegue a su directorio de WordPress, a continuación, vaya a wp-content/plugins/woocommerce/templates/ y copie la carpeta 'single-product' a su tema dentro de una nueva carpeta llamada 'woocommerce' (por lo que la ruta es wp-content/themes/your-theme/woocommerce/)
4. En su backend de administración de WordPress, visite Apariencia > Editor de archivos de tema.
5. En la parte superior derecha seleccione tema para editar -> seleccione su-tema y luego ir a woocommerce/single-product/short-description.php para abrirlo en la ventana del editor.
6. Inserte el shortcode copiando y pegando el código siguiente al final del contenido de sus archivos y sustituyendo el "ID" por el ID de su vista ACF. <?php echo do_shortcode( '[acf_views view-id="ID"]' ); ?>
7. Consulte la página de su producto para ver el resultado.

Nota: si no ves los campos personalizados en el frontend, edita el producto y asegúrate de que has rellenado los campos personalizados con valores.

Has aprendido a añadir fácilmente campos personalizados a la página de producto de WooCommerce. Hemos utilizado sólo un par de plugins gratuitos, pero hicieron nuestra tarea fácil.

El Advanced Custom Fields plugin es increíble y permite gestionar meta campos tan fácilmente como es posible. Usando el Advanced Views addon usted no tendrá ningún problema con la visualización de los campos en la parte frontal de su sitio web más.

Además, vale la pena mencionar que estos plugins son muy útiles no sólo con respecto a las tareas de Woo. Puedes utilizarlos en cualquier lugar, para añadir y mostrar datos personalizados, es decir, campos para cualquier página o cualquier Custom Post Type.