Administrar una tienda en línea en WooCommerce ofrece grandes oportunidades de personalización y mejora, ¡pero utilizarlas puede ser un poco complicado! Muchos propietarios de tiendas WooCommerce encuentran limitaciones cuando quieren agregar información específica a sus productos o administrar datos que no encajan en las opciones predeterminadas proporcionadas por WooCommerce.

Ya sean identificadores únicos, detalles de precios adicionales o puntos de datos personalizados relevantes para su modelo de negocio, no poder incorporar estos elementos directamente en el panel y en las páginas de edición de productos puede generar ineficiencias y soluciones manuales.

Por suerte, existe una solución: woocommerce_wp_text_input. Esta es una práctica función PHP diseñada específicamente para el backend de WooCommerce (es decir, el área de administración de WooCommerce y las páginas de edición de productos) en lugar del frontend de la tienda. Permite a los administradores del sitio adaptar su tienda WooCommerce interna a sus requisitos exactos al permitirles agregar campos de entrada de texto personalizados.

En esta guía, explicaremos en profundidad qué es woocommerce_wp_text_input y cómo usarlo. Como beneficio adicional, también le mostraremos cómo agregar de manera eficiente campos de entrada personalizados a su interfaz.

¡Vamos a ver!

¿Qué es woocommerce_wp_text_input y por qué es importante?

woocommerce_wp_text_input está diseñado para operaciones de backend dentro de WooCommerce. Permite agregar campos de entrada de texto personalizados a varias secciones de los metacuadros de datos del producto y aplicaciones backend personalizadas específicas de WooCommerce.

Esta versatilidad lo convierte en un activo vital para los desarrolladores y propietarios de tiendas que buscan personalizar el backend de su tienda más allá de las opciones estándar proporcionadas por WooCommerce.

woocommerce_wp_text_input es esencialmente un contenedor que genera HTML para un campo de entrada de texto, diseñado para usarse dentro de las páginas de productos de administración de WooCommerce. Su objetivo principal es simplificar el proceso de agregar campos personalizados a varias secciones del backend de WooCommerce, incluidas las páginas de edición de productos. Esto permite a los desarrolladores personalizar las secciones de datos de productos de manera más eficiente, lo que la convierte en una herramienta vital para ampliar la funcionalidad de WooCommerce para satisfacer necesidades comerciales específicas.

Esta función acepta una serie de argumentos ($campo) que determinan las características del campo de entrada. Algunos de estos parámetros incluyen:

• IDENTIFICACIÓN: Esencial para distinguir el campo y recuperar datos al enviar el formulario.
• Etiqueta: Proporciona una orientación clara sobre la información esperada dentro del campo.
• Descripción: Ofrece más información sobre el propósito del campo, mejorando la usabilidad.
• Tipo: Si bien el tipo predeterminado es texto, se puede ajustar para diferentes tipos de datos, como «número» para entradas numéricas.
• Valor: Útil para establecer un valor predeterminado o existente, ayudando en las operaciones de edición.
• Marcador de posición: Actúa como una pista sobre el contenido o formato esperado, mejorando la orientación del usuario.
• Atributos_personalizados: Le permite agregar atributos HTML adicionales para un control más preciso sobre la funcionalidad del campo.

Para utilizar la función woocommerce_wp_text_input, debe estar conectada a la acción de WooCommerce adecuada según dónde desee que aparezca el campo. Por ejemplo, para agregar un campo personalizado al General sección de la Datos del producto meta box, se conectaría a woocommerce_product_options_general_product_data (¡el tutorial se publicará más adelante en el artículo!).

La flexibilidad de la función en términos de dónde puede colocar campos y cómo se pueden configurar permite una amplia gama de personalizaciones.

Casos de uso de ejemplo para woocommerce_wp_text_input

Agregar un campo personalizado de proveedor o fabricante

Agregar un campo de proveedor o fabricante personalizado a sus productos WooCommerce puede ser valioso por varias razones, especialmente si, para su tienda, la distinción entre diferentes fabricantes es crucial para sus clientes o sus procesos backend.

Tener un campo de fabricante le permite rastrear más fácilmente qué productos provienen de qué proveedor, lo que puede ayudar en la gestión de inventario, reordenamiento y análisis de ventas por fabricante.

Entrada del número de seguimiento

Al incorporar este campo de entrada en la pantalla de edición de pedidos, los gerentes de tienda pueden agregar o actualizar fácilmente el número de seguimiento de los envíos. Esto mejora el proceso de gestión de pedidos, permitiendo un manejo más eficiente de la información de envío y mejorando la comunicación de los detalles de seguimiento a los clientes.

Habilitar compras con crédito de la tienda

Si ofrece productos que se pueden comprar usando créditos (recompensas de fidelidad, moneda virtual en un juego o crédito de tienda prepago) en lugar de moneda tradicional, puede usar woocommerce_wp_text_input para agregar un campo personalizado para ingresar el monto del crédito asociado con ese producto. .

Desarrollo de plugins personalizados de WooCommerce

Por ejemplo, si está desarrollando una extensión de WooCommerce que calcula tarifas dinámicamente en función de factores como la moneda base del producto o la cantidad del producto agregado al carrito, puede usar woocommerce_wp_text_input para crear una opción para calcular automáticamente las tarifas según el importe base en la moneda del producto o permitir que los administradores introduzcan los importes de las tarifas manualmente.

También puede usar woocommerce_wp_text_input para crear los campos de entrada en el panel de control de su plugin personalizado para permitir que los administradores del sitio configuren sus ajustes.

La forma de utilizar woocommerce_wp_text_input se reduce a su objetivo específico y a lo que desea lograr. ¡Los escenarios son más o menos ilimitados!

Otras funciones para agregar campos personalizados para diferentes tipos de datos en el backend de WooCommerce

Puede utilizar otras funciones para ayudar a agregar campos personalizados para diferentes tipos de datos, como:

• Campos de casilla de verificación con woocommerce_wp_checkbox: Ideal para funciones de suscripción voluntaria, como suscripciones a boletines informativos o reconocimientos de términos y condiciones. Las casillas de verificación son fundamentales para garantizar el cumplimiento y fomentar la participación de marketing a través de acciones de usuario basadas en el consentimiento.
• Seleccionar campos con woocommerce_wp_select: mejore la experiencia del usuario administrador con menús desplegables para opciones como tamaño o color. Este método agiliza el proceso de selección y ofrece una solución ordenada para variaciones que no requieren un mantenimiento de stock separado.
• Campos numéricos con woocommerce_wp_text_input (tipo ‘número’): al establecer el tipo en ‘número’, esta función limita las entradas a datos numéricos, atendiendo a requisitos únicos del producto, como longitudes personalizadas para telas, que son indispensables para tipos de inventario específicos.

Sin embargo, también es crucial reconocer las limitaciones aquí:

• Estos campos personalizados están diseñados para uso backend, lo que significa que no facilitan directamente las interacciones con los clientes en el frontend de la tienda.
• Implementarlos puede afectar los tiempos de carga de la página si se usan en exceso, debido al procesamiento requerido.
• Para crearlos, necesita conocimientos de codificación, incluidos PHP, HTML y ganchos de WooCommerce.
• Las opciones para personalizar el estilo son algo limitadas.

Usando la función woocommerce_wp_text_input, paso a paso

Puedes escribir el código en el tema hijo. funciones.php archivo o crear un plugin personalizado en el wp-content/plugins/ Carpeta de instalación de WordPress.

Para este tutorial, veremos el proceso de creación de su propio plugin.

Agregar un campo de entrada de texto personalizado en la pestaña General en la página de edición del producto

1. Dentro de wp-content/plugins/ carpeta de su instalación de WordPress, cree un archivo PHP y asígnele un nombre como campo-de-página-de-edición-de-producto-personalizado.php.
2. Al principio de este archivo, agregue un bloque de comentarios PHP que WordPress lea como metadatos del plugin (nombre del plugin, descripción, autor, etc.) así:
   /**
* Plugin Name: My Custom WooCommerce Product Edit page Field
* Plugin URI: (If any)
* Description: Adds a custom field to the WooCommerce products edit page.
* Version: 1.0
* Author: Your Name
* Author URI: http: (If any)
*/
3. Debajo de la información del encabezado del plugin, agregue el código PHP para crear y guardar el campo de producto personalizado.
   // Hook to add custom field to product general options
   add_action( 'woocommerce_product_options_general_product_data', 'add_my_custom_product_field' );
   function add_my_custom_product_field() {
   woocommerce_wp_text_input(
   array(
   'id' => '_my_custom_product_text_field',
   'label' => __( 'New Custom Product Edit Page Field', 'woocommerce' ),
   'placeholder' => __( 'Enter value here', 'woocommerce' ),
   'desc_tip' => 'true',
   'description' => __( 'Enter the custom value here.', 'woocommerce' ),
   )
   );
   }

   // Hook to save custom field value
   add_action( 'woocommerce_admin_process_product_object', 'save_my_custom_product_field' );
   function save_my_custom_product_field( $product ) {
   $custom_field_value = isset( $_POST['_my_custom_product_text_field'] ) ? $_POST['_my_custom_product_text_field'] : '';
   $product->update_meta_data( '_my_custom_product_text_field', sanitize_text_field( $custom_field_value ) );
   }

Explicación:

• El gancho de acción woocommerce_product_options_general_product_data agrega un nuevo campo de entrada de texto al General pestaña del metabox de datos del producto en la página de edición del producto WooCommerce. Si desea mostrar este campo en otro lugar, consulte los otros enlaces de acción.
• Se llama a la función woocommerce_wp_text_input para generar un campo de entrada de texto. Los argumentos de la función definen las características del campo, como su ID (_my_custom_product_text_field), etiqueta (nuevo campo de página de edición de producto personalizado) y texto de marcador de posición.
• El gancho de acción woocommerce_admin_process_product_object activa la función save_my_custom_product_field, que recupera el valor ingresado en el campo personalizado, lo desinfecta para garantizar que sea seguro almacenarlo y luego lo guarda como metadatos del producto.

1. Nuevamente, dentro de la carpeta wp-content/plugins/, cree un archivo PHP y asígnele un nombre como submenu-woo-personalizado.php. Luego, agregue un bloque de comentarios PHP al principio de este archivo.
2. Utilice el código de muestra a continuación para crear un submenú en WooCommerce:
   
   /**
   * Plugin Name: My Custom WooCommerce Tab
   * Plugin URI:
   * Description: Adds a custom tab under WooCommerce in the WordPress admin with a custom setting.
   * Version: 1.0
   * Author: Your Name
   * Author URI:
   * License:
   */

   function add_woocommerce_custom_submenu() {
   add_submenu_page(
   'woocommerce', // Parent slug
   'My Custom Submenu in WooCommerce', // Page title
   'My Custom Submenu in WooCommerce', // Menu title
   'manage_woocommerce', // Capability
   'my-custom-submenu', // Menu slug
   'woocommerce_custom_page_content' // Callback function
   );
   }

   function woocommerce_custom_page_content() {
   ?>

   echo esc_html(get_admin_page_title()); ?>

   
   // Output security fields for the registered setting "woocommerce_custom_options"
   settings_fields('woocommerce_custom_options');
   // Output setting sections and their fields
   do_settings_sections('my-custom-submenu');
   // Output save settings button
   submit_button('Save Settings');
   ?>
   

   
   }

   function woocommerce_custom_settings_init() {
   // Register a new setting for "woocommerce_custom_options" page
   register_setting('woocommerce_custom_options', 'my_custom_option');

   // Register a new section in the "woocommerce_custom_options" page
   add_settings_section(
   'woocommerce_custom_section',
   'Custom settings',
   'woocommerce_custom_section_callback',
   'my-custom-submenu'
   );

   // Register a new field in the "woocommerce_custom_section" section, inside the "woocommerce_custom_options" page
   add_settings_field(
   'my_custom_option', // As used in the 'id' attribute of tags
   'Custom text field title', // Title of the field
   'woocommerce_custom_field_callback', // Callback for the field
   'my-custom-submenu', // Page it will be displayed on
   'woocommerce_custom_section' // Section it belongs to
   );
   }

   function woocommerce_custom_section_callback() {
   echo '

   Custom settings description.

   ';
   }

   Explicación:

   • El add_woocommerce_custom_submenu() La función agrega una página de submenú en el menú de WooCommerce. Utiliza la función add_submenu_page() para registrar una nueva página de submenú.
   • El woocommerce_custom_page_contentLa función () es la devolución de llamada para el contenido de la página del submenú personalizado. Genera marcado HTML para la página de configuración. Dentro del formulario, llama a las funciones de WordPress para manejar los campos de configuración, las secciones y el botón de envío.
   • El woocommerce_custom_settings_init() está enlazada al enlace de acción admin_init. Registra la configuración del plugin utilizando funciones de WordPress como Register_setting(), add_settings_section() y add_settings_field().
   • El woocommerce_custom_section_callbackLa función () es la devolución de llamada para la sección personalizada agregada en woocommerce_custom_settings_init(). Simplemente hace eco de una descripción de la sección de configuración personalizada.
3. Agregue el campo de entrada de texto personalizado usando woocommerce_wp_text_input.
   function woocommerce_custom_field_callback() {
// Get the value of the setting we've registered with register_setting()
$setting = get_option('my_custom_option');
// Display the field
woocommerce_wp_text_input(
array(
'id' => 'my_custom_option',
'label' => 'Custom text field in custom submenu in WooCommerce',
'value' => $setting ? $setting : '',
'desc_tip' => true,
'description' => 'Description for the input.',
)
);
}
4. Añade los ganchos de acción.
   add_action('admin_menu', 'add_woocommerce_custom_submenu');

   add_action('admin_init', 'woocommerce_custom_settings_init');

   Explicación:

   • Esta primera línea de código conecta la función add_woocommerce_custom_submenu al enlace de acción admin_menu. Esto significa que cuando se crea el menú de administración de WordPress, la página del submenú personalizado se agregará en el menú de WooCommerce.
   • La segunda línea de código conecta la función woocommerce_custom_settings_init al enlace de acción admin_init. El enlace admin_init se activa antes que cualquier otro enlace cuando un usuario accede al área de administración. Entonces, cuando se inicialice el área de administración de WordPress, se mostrará el contenido del submenú.

Consejo profesional: Asegúrese siempre de que los datos de entrada estén limpios y seguros para evitar vulnerabilidades, utilizando las funciones integradas de WooCommerce como wc_clean para saneamiento.

Personalizando campos en el frontend

Los campos de backend personalizados son una gran adición a cualquier tienda WooCommerce, pero esos campos personalizados también son muy importantes en el frontend. Brindan a los clientes una experiencia de compra más personalizada, desde opciones de productos personalizados hasta interacciones únicas con el usuario.

Para introducir manualmente campos personalizados en la interfaz, necesitará usar ganchos y filtros, como ya hemos visto, que son una forma poderosa de ampliar y personalizar la funcionalidad de WordPress y WooCommerce.

Los ganchos le permiten «conectarse» a una parte de un sitio web o plugin para agregar nuevas funciones o modificar funciones existentes sin alterar el código principal. Hay dos tipos de ganchos: acciones y filtros.

• Ganchos de acción le permite insertar código personalizado en puntos específicos dentro de la ejecución de WordPress, como agregar un nuevo campo dentro de un formulario.
• Filtrospor otro lado, le permiten modificar datos, como el contenido de una publicación de blog, antes de enviarla a la base de datos o mostrarla al usuario.

El uso de ganchos y filtros requiere insertar su código personalizado en el archivo funciones.php de su tema o en un archivo específico del sitio. plugin ic. Por ejemplo, para agregar un campo personalizado a la página de un producto WooCommerce, puede usar el gancho de acción woocommerce_before_add_to_cart_button para insertar su campo justo antes del botón «Agregar al carrito».

Si no tiene ganas de escribir código para campos personalizados de interfaz, le recomendamos utilizar un plugin dedicado, que es mucho más rápido y conveniente.

Presentamos campos de productos avanzados para WooCommerce

Advanced Product Fields for WooCommerce (APF) ofrece una solución optimizada para el complejo mundo de la personalización de WooCommerce, eliminando la necesidad de codificación manual en las páginas de sus productos. Con APF, puedes superar las limitaciones de las opciones de personalización nativas de WooCommerce y presentar tus productos exactamente como deseas.

Este plugin le permite agregar sin esfuerzo hasta 16 tipos de campos diferentes a sus productos, incluidos campos de texto y área de texto, campos numéricos, listas de selección, casillas de verificación, botones de opción y muestras de imágenes y colores, entre otros.

APF simplifica la adición de campos personalizados, habilitando funciones como instrucciones de grabado personalizadas, opciones de envoltura de regalos o variaciones especiales de productos sin tocar una línea de código.

Si desea ver cómo se ven en la práctica, eche un vistazo a la página de demostración de APF.

Beneficios de utilizar campos de productos avanzados para WooCommerce

El uso de campos de productos avanzados mejora significativamente la experiencia de WooCommerce tanto para los propietarios de tiendas como para sus clientes.

Te lo dá:

• Mayor flexibilidad de personalización: La amplia gama de tipos de campos de APF proporciona las herramientas para satisfacer diversas necesidades de personalización de productos, lo que permite una experiencia de compra más personalizada.
• Usabilidad mejorada y potencial de conversión: Al facilitar a los clientes la búsqueda y selección de opciones de productos que satisfagan sus necesidades, APF puede ayudar a mejorar la experiencia general del usuario y aumentar las tasas de conversión.
• Gestión de tienda simplificada: Funciones como la validación y el manejo de datos más sencillo significan que los propietarios de las tiendas pueden gestionar ofertas de productos personalizados de manera más eficiente, reduciendo la posibilidad de errores y mejorando la funcionalidad general de la tienda.
• Complejidades técnicas reducidas: Tanto para los desarrolladores web como para los propietarios de tiendas, APF reduce los obstáculos asociados con la personalización de las tiendas WooCommerce, lo que la convierte en una herramienta valiosa para mejorar el rendimiento del sitio y la satisfacción del cliente.

Transforme su tienda WooCommerce con campos personalizados hoy

La personalización de campos, tanto en el backend como en el frontend, puede mejorar significativamente la funcionalidad y el atractivo de su tienda de comercio electrónico. El empleo de funciones como woocommerce_wp_text_input equipa a los propietarios de tiendas con las herramientas necesarias para ampliar las capacidades de su tienda en línea, permitiendo especificaciones de producto más detalladas y mejores interacciones con el usuario.

Mientras tanto, Advanced Product Fields ofrece una solución perfecta para la personalización del frontend, eliminando la necesidad de codificación compleja. Su conjunto completo de tipos de campos y su interfaz fácil de usar hacen que la personalización del producto y una experiencia de usuario mejorada sean muy sencillas. No pierda la oportunidad de mejorar su tienda: ¡pruebe los Campos de productos avanzados hoy!