¿Cómo agregar productos en WooCommerce mejor y personalizarlos? Guía completa con ejemplos

Vender computadoras y maximizar las ganancias con ventas adicionales puede ser un desafío. En esta guía, aprenderá cómo agregar productos a WooCommerce. Luego, le mostraré cómo usar un complemento gratuito para personalizar la página del producto WooCommerce. Verá un constructor de computadoras WooCommerce con una MacBook Pro como ejemplo. Al final, estará listo para vender productos personalizables en su tienda WooCommerce y obtener más ganancias.

️ ¿Cree que WooCommerce tiene pocas opciones o es demasiado complicado al agregar productos?

¡Hoy te mostraré cómo agregar productos y personalizarlos en tu WooCommerce con un complemento gratuito !

Tabla de contenido

• Cómo agregar productos WooCommerce - Guía rápida
• Personalice los productos de WooCommerce: ejemplo de creación de computadoras
• Personalice la página del producto del generador de computadoras WooCommerce
• Productos de WooCommerce con campos personalizados
• Resumen y más sobre el complemento

Cómo agregar productos WooCommerce - Guía rápida

Veamos cómo crear productos en unos pocos pasos:

1. Productos en WooCommerce

   

   Primero, vaya al menú Productos para agregar, eliminar y administrar sus artículos.

2. Agregar o editar un producto

   Luego, haga clic en el botón Agregar nuevo o edite el producto existente.

   

3. Configurar el producto WooCommerce

   Ahora, elige el nombre del producto, su descripción y una imagen. Además, ve a la sección Datos del producto para decidir precio, stock, atributos, impuestos, etc.

   

   Luego, publique el nuevo producto (o actualice el existente). ¡Eso es todo!

4. Elige el tipo de producto

   También puede elegir el tipo de producto:

   

5. Categorías y etiquetas de productos

   Por supuesto, hay muchas cosas adicionales que puede configurar, como la categoría del producto o las etiquetas para organizar mejor sus artículos. Me gustaría señalar que también puede editar rápidamente algunos datos del producto con la opción Editar en la pantalla principal del Producto:

   

6. ¿Cómo personalizar productos en WooCommerce?

   ️ Creo que estás listo para agregar productos . Gracias al creador de productos de WooCommerce, puede preparar productos y usar datos adicionales (como atributos, etiquetas y la galería de productos).

   En la siguiente parte, te mostraré cómo personalizar los productos de WooCommerce con campos personalizados para ofrecer mucho más .

Personalice los productos de WooCommerce: ejemplo de creación de computadoras

¿Alguna vez has estado en el sitio web de Apple? Por lo general, te permiten elegir los componentes de una computadora que quieres comprar.

Como mencioné, decidí usar una MacBook Pro como ejemplo para esta guía. Trabajaremos en un ejemplo real en este punto.

Básicamente, así es como se ve su asistente:

Configuraremos las opciones del asistente de manera idéntica en esta guía para crear un producto personalizable de WooCommerce: el constructor de su computadora .

Se verá así una vez que lo configuremos:

Obviamente, no se ve exactamente como el que está en el sitio web de Apple. Esta es la configuración básica solo para demostrarle cómo funciona.

Mira otra cosa que quiero mostrarte antes de continuar:

Esta calculadora aparece cuando selecciona una opción en el generador de computadoras WooCommerce.

Personalice la página del producto del generador de computadoras WooCommerce

Primero, necesita Campos de productos flexibles , nuestro complemento que permite a los propietarios de las tiendas agregar campos personalizados y complementos a los productos de WooCommerce (y, opcionalmente, cobrar por ellos) . Usaremos este complemento en esta guía.

Puede descargarlo gratis desde WordPress.org o instalarlo directamente desde la sección de complementos de su tienda buscando campos de productos flexibles :

️ Para cubrir todos los casos de uso que discutimos aquí, necesitará la versión PRO del complemento . En resumen, la versión gratuita no te ofrece cobrar a los clientes por opciones adicionales . Sin embargo, puede verificar si el método de campos adicionales se ajusta a sus necesidades.

️ Una vez que hayas instalado el complemento, vamos a configurarlo. Elija Productos → Campos de productos en su menú de WordPress (1). Luego debe agregar un nuevo grupo de campo (2):

Personaliza los productos de WooCommerce con campos personalizados

Finalmente llegamos al apartado de configuración de campos. Quiero que este artículo sea fácil para ti, por lo tanto, te guiaré paso a paso. Próximamente, podrá crear un asistente de MacBook en su tienda usted mismo .

La configuración general de nuestro generador de computadoras WooCommerce se ve a continuación:

Puede que te parezca abrumador, pero no te preocupes. Como he señalado, te guiaré paso a paso a través de la configuración para personalizar la página del producto WooCommerce con nuevos campos . ¡Comencemos entonces!

Ajustes principales

En la configuración de la sección , puede elegir dónde mostrar los campos en la página del producto.

Entonces puedes asignar este grupo a :

• un producto(s) seleccionado(s),
• todos los productos en tu tienda,
• o categorías seleccionadas.

En este punto, asigno los campos a un producto (MacBook Pro). Es la única opción disponible en la versión gratuita . Puede usar la asignación a una categoría, por ejemplo, computadoras, en su tienda. En este caso, necesitará la versión PRO.

Por último, mira la opción de pedido . Si agrega más de 1 grupo de campos a un producto, puede establecer el orden de visualización de ellos.

Agregar campos

El siguiente paso es agregar nuevos campos de productos a nuestro generador de computadoras WooCommerce. Probablemente ya hayas notado la lista de complementos. Tendrás que agregarlos uno por uno.

Tamaño (campo de radio)

Para ofrecer variaciones de tamaño, debe configurar el campo de radio.

Primero, ingrese el nombre del campo en la Etiqueta . Luego seleccione Radio desde el Tipo de campo . Requerido es la siguiente opción. Debe usarlo o un cliente podrá hacer el pedido sin seleccionar un tamaño. ¿Cómo sabrías qué tamaño necesitan entonces?

Tarde o temprano querrás cambiar el estilo de los campos a tu manera. Existe la opción Clase CSS para usar en esta situación.

En la sección de Opciones , finalmente puedes configurar las tallas que quieres ofrecer en tu tienda. En este caso, utilizamos tamaños de 13 y 15 pulgadas. El segundo cuesta $600 más. Así es como lo configura: vaya a la pestaña Precios y agregue precios adicionales:

No usamos la lógica condicional , la última opción. Sin embargo, lo usaremos más adelante en nuestro generador de computadoras WooCommerce.

Procesador (campo de radio)

El Procesador también es un campo de radio, puede configurarlo de la misma manera que el campo Tamaño . Lo mismo ocurre con la adición de un precio adicional a las opciones seleccionadas.

Mientras que en Tamaño tanto el valor como la etiqueta eran iguales, aquí usamos diferentes valores y etiquetas. El valor solo es visible para el administrador de la tienda y se almacena en la base de datos. La etiqueta es visible para los clientes en la página del producto.

Memoria (campo de radio)

Esta vez lo sabes todo. Solo necesita proporcionar opciones de memoria a nuestro creador de computadoras WooCommerce. Proceda exactamente de la misma manera que en los pasos anteriores.

Almacenamiento (campo de radio)

Ya sabes cómo configurar este campo de radio. La única diferencia es que tendrás que añadir 2 precios adicionales. Mirar:

Idioma del teclado (seleccionar campo)

En esta ocasión configurarás un nuevo tipo de campo: seleccionar campo .

La configuración es muy familiar a la anterior. La principal diferencia es la selección en el tipo de campo .

Fecha de entrega (campo de fecha)

Aquí puede ver otro tipo de campo. Este es el campo de fecha. La configuración general es bastante similar a las anteriores, pero hay algunas características adicionales en la pestaña Avanzado :

️ Algunas de las características son:

• formato de fecha
• días antes
• dias despues

Con días antes y días después, puede establecer un rango de tiempo de fechas disponibles para seleccionar por un cliente. Puede ser útil cuando ofreces el producto grabado ya que necesitas tiempo para hacerlo.

Mostrar opciones de regalo (campo de casilla de verificación)

Este campo de producto será muy importante en nuestra configuración. Por defecto se ve así:

Cuando un cliente marca este campo, aparecen nuevos campos.

Esta es la lógica condicional . Sin embargo, no establece la opción Lógica condicional para este campo. Agrega el campo de la manera normal, y en este punto debe preocuparse por la pestaña Lógica condicional .

Grabado (campo de texto)

Este es un campo simple donde un cliente puede proporcionar algún texto, por ejemplo, grabado.

Este campo debe aparecer solo cuando el cliente marca la casilla de verificación Mostrar opciones de regalo .

En esta situación, debe configurar la lógica condicional para este campo.

Comience con la personalización agregando un precio adicional en la pestaña Precios:

Y ahora vayamos a la pestaña Lógica condicional donde también agregaremos esta función adicional:

Como puede ver arriba, marqué la opción Lógica condicional . En las Reglas , configuré que este campo se muestra cuando el campo Mostrar opciones de regalo es igual a marcado .

Embalaje de regalo (campo de casilla de verificación)

Debe configurar la lógica condicional para este campo de la misma manera que se indicó anteriormente. También puede agregar precios adicionales si desea que el cliente pague dinero extra por el empaque del regalo. Ya sabes cómo agregar precios adicionales

Mensaje de regalo (campo de texto)

Finalmente, el último. También debe establecer la lógica condicional aquí.

Una vez más, veamos el efecto que hemos logrado:

Resumen y más sobre el complemento

En este artículo, expliqué cómo agregar productos de WooCommerce y luego personalizarlos con un complemento gratuito.

También aprendió cómo crear su propio generador de computadoras como resultado de leer esta Guía del desarrollador de computadoras de WooCommerce . Espero que te haya ayudado y que ahora estés listo para vender productos personalizables en tu tienda WooCommerce. ¿Estás listo para configurar un asistente informático en tu tienda?

Después de todo, es posible que tenga algunas preguntas. ¡Siéntete libre de preguntar! Utilice la sección de comentarios a continuación.

Finalmente, no he cubierto todas las características del complemento en este artículo. Creo que nuestra Guía de opciones de productos adicionales de WooCommerce puede ser interesante para usted. Es otro gran artículo. Léalo en caso de que desee conocer más casos de uso de este complemento.