Paso a Paso: Cómo Añadir Campos Personalizados a los Productos de WooCommerce

Si estás buscando mejorar las páginas de producto de tu tienda WooCommerce con campos personalizados, estás en el lugar adecuado. Si quieres mostrar información adicional del producto, recopilar detalles únicos de tus clientes o simplemente hacer que tu tienda destaque, añadir campos personalizados es justo lo que necesitas.

Sin embargo, aunque las ventajas son abundantes, la implantación de campos personalizados puede resultar compleja. Requiere una sólida comprensión de PHP y WooCommerce. La adición incorrecta de campos personalizados puede provocar caídas del sitio o incluso vulnerabilidades de seguridad.

Para quienes los obstáculos técnicos les resulten abrumadores, Saucal ofrece servicios expertos de desarrollo de WooCommerce. Nuestro equipo puede manejar el trabajo pesado, asegurando que los campos personalizados que desea se implementan de manera eficiente y que su sitio está optimizado para el rendimiento y la seguridad.

Pero si estás listo para abordar este proyecto por ti mismo, sigue leyendo. Te proporcionaremos los conocimientos y una guía paso a paso para mejorar tu tienda WooCommerce con campos personalizados.

Pasos para agregar campos personalizados al metabox de productos en WooCommerce

Añadir campos personalizados al metabox de producto de WooCommerce implica unos pocos pasos usando hooks y funciones de WordPress. He aquí una guía sencilla para ayudarle a conseguirlo:

Paso 1. Crear una función para agregar campos personalizados

Deberá utilizar la función woocommerce_product_options_general_product_data para añadir campos personalizados a la sección Configuración general del producto. Puede añadir el código directamente a la sección funciones.php archivo o crear un plugin personalizado que se ejecuta independientemente del archivo functions.php y puede utilizarse para añadir y activar código personalizado.

Para crear un plugin personalizado para esto, vaya a la sección wp-content/plugins de su instalación de WordPress y cree un nuevo archivo PHP para su plugin. Puede nombrarlo algo como campos-producto-personalizados.php.

Necesitará añadir una cabecera como esta al principio del archivo PHP para ayudar a WordPress a reconocer su archivo como un plugin:

php
/*
Nombre del Plugin: SAU/CAL Campos de producto personalizados
Descripción: Añade un campo de entrada de texto personalizado a la página de edición de productos WooCommerce.
Versión: 1.0
Autor: Su Nombre
*/

A continuación, añadirás el código para crear el campo de entrada personalizado (que explicaremos más adelante) y guardarás el archivo. Podrás encontrarlo en la lista de plugins instalados en WordPress y tendrás que activarlo. 

Pero, para este tutorial, nos ceñiremos a la edición de los temas hijo de funciones.php (el código funcionará para ambos métodos):

function saucal_add_custom_fields_to_general_tab() {
	// Crear un campo de texto personalizado
	woocommerce_wp_text_input(
		array(
			'id' => '_saucal_custom_field_id', // Obligatorio, debe ser único
			'label' => esc_html__( 'Tu nuevo campo personalizado', 'saucal-custom-code' ), // Etiqueta para el campo
			'placeholder' => esc_html__( 'Introduzca un valor', 'saucal-custom-code' ), // Texto del marcador de posición
			'desc_tip' => true, // Habilitar la descripción emergente
			'description' => esc_html__( 'Esta es la descripción de un campo personalizado.', 'saucal-custom-code' ), // Descripción para el tooltip
		)
	);
}
add_action( 'woocommerce_product_options_general_product_data', 'saucal_add_custom_fields_to_general_tab' );

Desglose de códigos:

• add_action() es una función de WordPress utilizada para enganchar una función a un hook de acción específico. Permite manipular código en puntos determinados del ciclo de vida de la plataforma.
• woocommerce_product_options_general_product_data es el hook proporcionado por WooCommerce. Se activa en el punto en el que se muestran los campos de datos generales del producto en el área de edición de productos de WooCommerce en el panel de administración. Aquí es donde normalmente ves las opciones para configurar el SKU, el estado del producto y otra información general.
• saucal_add_custom_fields_to_general_tab es el nombre de la función que se ejecutará cuando se ejecute el hook de acción. Esta función es la que se define para añadir campos personalizados.
• El saucal_add_custom_fields_to_general_tab() es donde especificamos los campos personalizados que se van a añadir.
• Dentro de esta función, se llama a la función woocommerce_wp_text_input() para crear un nuevo campo de entrada de texto. Esta función es parte de WooCommerce y está específicamente diseñada para facilitar la adición de campos a los formularios de WooCommerce. Acepta un array de opciones que definen las propiedades del campo de entrada de texto:
  • id: Es un identificador único para el campo. Se utiliza para recuperar y guardar el valor. Cada ID de campo debe ser único en todo el formulario de datos del producto.
  • label: Es el texto visible asociado al campo de entrada en la interfaz de usuario.
  • placeholder: Se trata de un texto ligero dentro del cuadro de entrada que proporciona una pista al usuario sobre lo que debe introducir. Desaparece cuando el usuario empieza a escribir.
  • desc_tip: Se trata de un valor booleano que activa una información sobre herramientas que aparece cuando se pasa el ratón por encima de la etiqueta. Es útil para proporcionar información adicional sin saturar la interfaz de usuario.
  • description: Es el texto que aparece dentro de la información sobre herramientas o debajo del campo, según el diseño. Permite explicar la finalidad del campo u orientar sobre lo que debe introducirse.

Este es el resultado del código:

Aquí tienes otro ejemplo si quieres añadir un campo personalizado checkbox:

function saucal_add_custom_checkbox_to_general_tab() {
	// Crear un checkbox personalizado
	woocommerce_wp_checkbox(
		array(
			'id' => '_saucal_custom_checkbox_id', // Obligatorio, debe ser único
			'label' => esc_html__( 'Tu nuevo campo checkbox personalizado', 'saucal-custom-code' ), // Etiqueta para el checkbox
			'description' => esc_html__( 'Marque esta casilla si el producto tiene características especiales.', 'saucal-custom-code' ), // Descripción de la casilla de verificación
			'desc_tip' => true, // Habilitar tooltip
		)
	);
}
add_action( 'woocommerce_product_options_general_product_data', 'saucal_add_custom_checkbox_to_general_tab' );

Desglose de códigos:

• De forma similar al campo de entrada de texto personalizado, nos engancharemos a woocommerce_product_options_general_product_data pero esta vez, llamaremos a nuestra función saucal_add_custom_checkbox_to_general_tab.
• woocommerce_wp_checkbox es la función de ayuda proporcionada por WooCommerce para añadir campos de casilla de verificación a los formularios fácilmente. Sus parámetros son similares a los de la función woocommerce_wp_text_input() del ejemplo anterior.

Y éste es el resultado:

Paso 2. Guardar los datos del campo personalizado

Cuando termines de editar tu producto desde la página de edición de productos de WooCommerce, necesitas capturar y almacenar los datos del campo personalizado. Utilice la función woocommerce_process_product_meta para este propósito. Este paso asegura la persistencia de los datos y permite el uso de estos datos personalizados en cualquier otro lugar dentro de su sitio WooCommerce, como en el front-end o dentro de varios procesos de back-end.

De nuevo, en el tema hijo funciones.php añada el siguiente código:

function saucal_save_custom_fields_data( $post_id ) {
	$custom_field_value = isset( $_POST['_saucal_custom_field_id'] ) ? wc_clean( wp_unslash( $_POST['_saucal_custom_field_id'] ) ) : ''; // phpcs:ignorar WordPress.Security.NonceVerification.Missing
	update_post_meta( $post_id, '_saucal_custom_field_id', $custom_field_value );

	$custom_checkbox_value = isset( $_POST['_saucal_custom_checkbox_id'] ) ? 'yes' : 'no'; // phpcs:ignore WordPress.Security.NonceVerification.Missing
	update_post_meta( $post_id, '_saucal_custom_checkbox_id', $custom_checkbox_value );
}
add_action( 'woocommerce_process_product_meta', 'saucal_save_custom_fields_data' );

Desglose de códigos:

• El woocommerce_process_product_meta se activa cuando se guardan los datos del producto (como precio, inventario, etc.). Pasa el ID del producto que se está guardando a la función enganchada.
• El $post_id en el parámetro saucal_save_custom_fields_data() recibe el ID del producto que se está guardando. Esto se pasa automáticamente por el hook woocommerce_process_product_meta.
• $custom_field_value = isset($_POST['_saucal_custom_field_id']) comprueba si los datos del formulario HTML (enviado a través de la página de administración) contienen el elemento denominado _saucal_custom_field_id. Si existe, se limpia y su valor se asigna a $custom_field_valuesi no, por defecto es una cadena vacía. Sanear el valor es el proceso de eliminar todo el HTML no seguro, asegurando que sólo se almacena texto plano. Esto es importante para la seguridad, en particular para prevenir ataques de cross-site scripting (XSS).
• update_post_meta() actualiza los metadatos del producto WooCommerce especificado.
• El primer argumento, $post_idespecifica qué metadatos de la entrada se están actualizando.
• El segundo argumento, _saucal_custom_field_ides la clave con la que se guardan los datos personalizados en la base de datos.
• El tercer argument, $custom_field_value, son los datos que se van a guardar.

Paso 3. Mostrar los datos de los campos personalizados en el front-end (opcionalmente)

Es posible que desee mostrar el valor del campo personalizado en algún lugar de la página del producto. Puede hacerlo conectándose a una acción apropiada, como por ejemplo woocommerce_producto_informacion_adicional.

function saucal_custom_field_display_additional_info( $product ) {
	$product_id = $product->get_id();
	$custom_field_value = get_post_meta( $product_id, '_saucal_custom_field_id', true );

	if ( ! empty( $custom_field_value ) ) {
		echo '<table class="woocommerce-product-attributes shop_attributes">';
		echo '<tr class="woocommerce-product-attributes-item woocommerce-product-attributes-item--attribute_custom-field">';
		echo '<th class="woocommerce-product-attributes-item__label">Su campo de entrada personalizado</th>';
		echo '<td class="woocommerce-product-attributes-item__value">' . esc_html( $custom_field_value ) . '</td>';
		echo '</tr>';
		echo '</table>';
	}
}
add_action( 'woocommerce_product_additional_information', 'saucal_custom_field_display_additional_info' );

Desglose de códigos:

• El woocommerce_producto_informacion_adicional nos permite añadir contenido personalizado al archivo Información adicional ficha.
• $product->get_id() recupera el ID del producto actual.
• Si el valor del campo personalizado no está vacío, genera una tabla HTML. Esta tabla se formatea para ajustarse al estilo de visualización de atributos de producto de WooCommerce.
• La salida incluye una fila con una etiqueta (que debe personalizar según la descripción real del campo) y el valor del campo personalizado. La función utiliza esc_html() para garantizar que el texto se muestra de forma segura escapando de cualquier entidad HTML, lo que evita ataques XSS y garantiza la correcta representación del texto.
• El código anterior debe ampliarse para mostrar el valor de la casilla de verificación si es necesario.

Este es el resultado en la página del producto:

Consejos adicionales de expertos para una mayor personalización

Utilice la lógica condicional: Es posible que desee mostrar los campos personalizados sólo para determinados tipos de productos o en determinadas condiciones. Utilice sentencias condicionales dentro de sus funciones para manejar esto.

Explora distintos tipos de campo: Además de las entradas de texto, WooCommerce proporciona funciones para añadir casillas de verificación, casillas de selección y otros tipos de campos de entrada. Explorar woocommerce_wp_checkbox y woocommerce_wp_select para estas variaciones.

Prácticas de seguridad: Asegúrese siempre de sanear y validar los datos de entrada al guardarlos y mostrarlos para evitar vulnerabilidades de seguridad.

Con estos pasos, deberías ser capaz de añadir y utilizar campos personalizados en productos WooCommerce de forma efectiva.

Trabaje con Saucal para añadir campos de producto personalizados a su tienda

Aunque añadir un campo de entrada personalizado en WooCommerce puede ser un proyecto de bricolaje para aquellos con conocimientos de codificación, es importante entender los riesgos que implica.

Intentar personalizar tu tienda WooCommerce sin los conocimientos técnicos adecuados puede acarrear problemas importantes. No se trata solo de los riesgos inmediatos de romper tu sitio, sino también de los problemas de seguridad y estabilidad a largo plazo.

- Kostas Seresiotis, Desarrollador de WooCommerce de Saucal

Aquí es donde asociarse con un equipo como Saucal puede marcar una diferencia significativa. Como WooExperts certificados, nos especializamos en el desarrollo de WooCommerce para empresas de nivel empresarial. Nuestro equipo es experto en agregar campos personalizados y en garantizar que cada personalización cumpla con los más altos estándares de validación y saneamiento de datos.

Trabajar con Saucal conlleva numerosas ventajas, entre ellas:

Eficacia del tiempo:

Ahorre valiosas horas que, de otro modo, dedicaría a solucionar problemas y perfeccionar su código.

Aplicación experta:

Asegúrese de que sus campos personalizados se implementan correctamente, mejorando la funcionalidad sin alterar la configuración existente.

Apoyo continuo:

Acceda a asistencia y desarrollo profesionales para mantener su sitio actualizado y en perfecto funcionamiento.

Si estás listo para mejorar tu tienda WooCommerce con campos personalizados implementados por expertos, contacta hoy mismo al equipo de Saucal. Deja que nuestra experiencia transforme tu plataforma de comercio electrónico mientras tú te concentras en hacer crecer tu negocio.