Cómo añadir campos personalizados a un producto

Un producto por defecto tiene unos campos predeterminados, como son el título, la descripción, foto, galería, precio… pero en ocasiones es necesario que existan nuevos campos para complementar el producto. En este artículo voy a ir mostrando paso a paso como añadir campos nuevos a un producto, en este caso, en un ecommerce de plantas para que veas todo el proceso.

¿Por qué es necesario añadir nuevos campos a un producto?

Empecemos por el principio, ¿qué ventajas va a tener para tu ecommerce añadir nuevos campos al producto?

En algunas tiendas online nos llegarán los campos por defecto, pero en algunos casos, será conveniente añadir unos nuevos para:

  • poder filtrar y que los clientes puedan encontrar resultados fácilmente. En el ejemplo que estamos mostrando nos puede interesar que se pueda filtrar por plantas que no necesiten mucha luz. Así estaremos ayudando al usuario a encontrar los productos que tenemos con ese requisito. Las categorías y subcategorías deben utilizarse para agrupar productos pero no para filtrar todas las características que pueda tener un producto. Si utilizas categorías en vez de crear campos personalizados, estarás usando una mala práctica y que a la larga no te va a beneficiar ni a ti ni a tus clientes.
  • para facilitar la lectura al usuario en la ficha del producto. Así podremos colocar los nuevos campos en otro lugar distinto a la descripción corta o larga.
  • en el listado de productos de una categoría podrás mostrar algunos de esos campos si son relevantes para el usuario.
  • se podrán hacer búsquedas por esos campos.

 

Cómo añadir campos a un producto en el backend

Podrás añadir los campos que quieras con el plugin Advanced Custom Fields (ACF), tiene una versión gratuita y otra más avanzada. En el ejemplo que te voy a ir mostrando, voy a utilizar la versión avanzada (Pro), pero si lo que quieres es añadir campos sencillos te va a servir la opción gratuita.

Partimos del producto que puedes ver en la imagen:

En la descripción vienen una serie de características, y lo que queremos, es que algunos de esos elementos estén de forma independiente para poder filtrar. Vamos a filtrar por origen, y para ello vamos a crear un campo personalizado que se llame origen. Para ello seguimos los siguientes pasos:

1.- Instalamos el plugin ACF (Advanced Custom Fields)

2.- Creamos un grupo llamado productos, y dentro de este grupo, creamos un campo personalizado llamado Origen. El tipo de campo es Elige (es un selector). En opciones ponemos los valores que queremos que salgan en ese selector, cada opción en una nueva línea. También podemos escoger si queremos seleccionar valores múltiples o no. En este ejemplo, he seleccionado que sí, porque quiero que en Origen se pueda marcar por ejemplo Sudamérica y Europa, que me deje añadir las dos opciones.

3.- Asignamos donde se va a ver ese campo personalizado. En este ejemplo, decimos que se muestre siempre que sea Producto.

 

¿Cómo comprobamos si está bien creado?

Vamos a cualquier producto en la parte de administración de WordPress y vemos que tenemos un nuevo campo dentro de las opciones habituales de descripción larga, nombre…

Podemos ir rellenando las opciones deseadas dentro de cada producto. En mi ejemplo mi opción es Sudamérica. Si quisiera añadir más opciones tendría que mantener pulsado la tecla Control mientras selecciono las distintas opciones. Una vez escogido, solo hay que pulsar en Actualizar (el producto) para que los datos queden guardados.

Te he ido explicando todo el proceso de creación del campo personalizado desde el backend de WordPress pero aún no es visible en la web. Es lo que podrás ver a continuación.

 

Cómo añadir campos a un producto en el frontend

¿Cómo vamos a mostrar este campo personalizado en la web y visible a los visitantes? Eso es lo que vamos a ver en esta parte. Dependiendo del tema utilizado el proceso puede variar, te voy a dar una opción que te va a servir para cualquier tema y es modificando el archivo functions.php de tu tema. Aquí te cuento los pasos a seguir:

1.- Lo primero que tienes que tener claro es en que parte del producto quieres que se muestre ese campo personalizado, en nuestro ejemplo va a estar arriba del carrito. Esta guía visual de los hooks es muy útil: WooCommerce Visual Hook Guide: Single Product Page y te ayudará a saber como se llama el hook donde quieres colocar ese campo personalizado. Siguiendo la guía nuestro hook se va a llamar woocommerce_before_add_to_cart_form.

2.- En el archivo functions.php del tema insertamos el siguiente código (ten en cuenta que este código es para insertar el campo personalizado arriba del carrito).

add_action('woocommerce_before_add_to_cart_form', 'garciaferro_acf_carrito', 10);

function garciaferro_acf_carrito() {
the_field('origen');
}

Vemos que nos sale el resultado Sudamérica arriba del carrito, justamente donde le hemos indicado en la función.

Ahora nos falta añadirle el título del campo personalizado, añadirle espacios y algún detallito más.

Si no quieres modificar el archivo functions.php puedes instalar un plugin como Code Snippets

 

Y aquí se acaba el artículo de como añadir campos personalizados a un producto. Si te ha gustado, solo te queda compartirlo. En caso de que te queden dudas o quieras comentar algo, solo tienes que escribir más abajo.


Comentarios

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *