Personaliza WooCommerce: añade campos personalizados a tus productos simples

Quizás estés configurando tu sitio web de comercio electrónico desde cero y quieras vender diferentes tipos de productos. Quizás tengas una tienda online desde hace un par de años y quieras ampliar tus horizontes y ofrecer nuevos productos. Sea cual sea el motivo de este tutorial, lo cierto es que necesitas personalizar WooCommerce. ¡Y puedes encontrar todo lo que necesitas saber en Bright Vessel!

WooCommerce es el más popular Complemento de WordPress Para comercio electrónico y la solución preferida por muchos vendedores. ¿Por qué? Es gratis y muy versátil, ya que WooCommerce se puede personalizar fácilmente para que se ajuste a tus necesidades. Si bien el plugin ofrece varias opciones, puedes hacer muchas cosas desde dentro.

Muchos de nuestros clientes en Bright Vessel buscan una solución de comercio electrónico única que tenga en cuenta las particularidades de su negocio. Gracias a nuestra amplia experiencia con WooCommerce, podemos ayudarte a configurar tu tienda online según tus necesidades. Con esto en mente, ¡comencemos!

Lo que necesitarás Personaliza WooCommerce

A continuación, encontrará la configuración básica que necesitará para personalizar WooCommerce:

• Su sistema operativo de escritorio preferido, ya sea MacOS, Microsoft Windows, distribuciones Linux, etc.
• Preprocesador de hipertexto (PHP) al menos 5.6.25.
• Servidores HTTP Apache o Nginx.
• MySQL 5.6.33.
• Un WordPress actualizado, o al menos la versión 4.7.
• El complemento WooCommerce en al menos la versión 3.9.
• El entorno de desarrollo integrado (IDE) de su elección.

Personaliza WooCommerce para agregar campos personalizados

Dicho esto, los campos personalizados en WooCommerce difieren ligeramente de los de WordPress. En lugar de trabajar con metadatos en las entradas, como lo define WordPress, nos referiremos a los "campos personalizados" como un campo de texto real. En el menú de WooCommerce, ve a la pestaña Productos Vinculados del tipo Productos Simples.

API de WooCommerce: Ganchos

Hay un concepto crítico de WordPress que debemos aclarar antes de profundizar en cómo personalizar WooCommerce: los Hooks. Según WPBeginner Los ganchos son funciones aplicables a una acción o un filtro en WordPress. Las acciones y los filtros en WordPress son funciones que los desarrolladores de temas y plugins pueden modificar para cambiar la funcionalidad predeterminada de WordPress.

WooCommerce proporciona su API, que permite a los usuarios conectarse con los ciclos de vida de sus páginas. Sin embargo, la API de WooCommerce es un poco diferente a la de metadatos de WordPress. Hay dos enlaces principales que debes conocer:

• Woocommerce_product_options_grouping. Este gancho permite crear una descripción y un campo de texto que acepte nuestros valores.
• woocommerce_process_product_meta. Esta función se utiliza para procesar, depurar y guardar el valor del texto introducido.

Para utilizar estos ganchos, deberá definirlos y personalizar su funcionalidad.

Personalización de la funcionalidad

• Define una clase con una variable since como dato de instancia. Esta variable representará el ID del campo de entrada, tal como se muestra al usuario:

Ahora puede utilizar los ganchos anteriores agregando una función de inicialización que registre dos funciones personalizadas en el gancho.

Campo de entrada de texto

Para agregar un campo de entrada de texto, primero debe agregar una función vinculada a woocommerce_product_options_grouping:

Para implementar la función, debes:

• Crea un ID único para identificar el campo de texto. Usa los datos de instancia en el constructor.
• Utilice una etiqueta para agregar una descripción al campo de entrada.
• Si lo desea, puede especificar un marcador de posición.
• Si hace las cosas más cómodas, puede mostrar una información sobre herramientas cuando el usuario pase el mouse sobre un ícono.
• Para agregar texto a la información sobre herramientas, puede utilizar la opción de descripción.

La información anterior se incluirá en una matriz asociada y llegará a woocommerce_wp_text_input. Esta función de la API para personalizar WooCommerce genera un elemento de texto con la información que acabas de proporcionar.

Guardar información

Para guardar los cambios anteriores, deberá:

• En el método init, agregue este código:
• Comprueba que existan varios valores nonce; de lo contrario, deberías devolver "false" como medida de seguridad. Puedes detectar valores nonce consultando qué proporciona WooCommerce específicamente en el código fuente.
• En la colección $_POST correspondiente a la entrada del usuario, desinfecte los datos.
• Guarde la información previamente grabada en la tabla de metadatos de la publicación.

Representación de información en el front-end

Para renderizar información en el frontend, necesitarás crear una nueva clase. Necesitarás específicamente:

Un ID de campo de texto y su inicialización en el constructor.

• Una función de inicialización para enganchar el frontend al código creado previamente.
• Para representar el valor real.

Iniciando el complemento

¡Ya casi terminas este tutorial sobre cómo personalizar WooCommerce! El último paso es configurar un archivo de arranque para iniciar el plugin con todos los cambios recientes. Aquí tienes el código para empezar:

Un par de notas adicionales:

• Aquí es donde se incluyen las dependencias.
• Una vez que la función esté funcionando, compruebe si muestra el panel. Si es así, la parte correcta del complemento se ha cargado correctamente; si no, se muestra la pantalla estándar.

En conclusión

Ahora que sabes cómo personalizar WooCommerce para añadir campos a productos sencillos, estás en camino de ofrecer exactamente los servicios que quieres. Puedes encontrar más información. Tutoriales de WooCommerce en nuestro blog. Si buscas expertos que sepan cómo usar este popular plugin de comercio electrónico, Contáctanos ¡Para más información!