[Jefferson Maldonado]

Hola Subhan.

Por defecto, WooCommerce solo permite atributos de tipo texto (como color, talla, etc.), pero no incluye la opción de mostrar un selector visual con código de color o muestras (swatches). Lo que tú ves en tu captura (el campo de código hex) corresponde a un plugin adicional que extiende WooCommerce, ya que en la instalación base no viene habilitado.

Lo que necesitas hacer es:

1. Crear primero el atributo en WooCommerce → Productos → Atributos (por ejemplo, “Color”).
2. Una vez creado, añade los valores (Blanco, Negro, Azul, etc.).
3. Para que cada valor tenga su código de color (hex) y se muestre visualmente en las variaciones, necesitas un plugin extra. Algunos de los más usados son:
4. Variation Swatches for WooCommerce (gratuito en WordPress.org, con versión Pro)
5. WooCommerce Variation Swatches and Photos (plugin oficial de WooCommerce).

Con estos plugins, podrás asignar un color (ej. #fff para blanco, #000 para negro, etc.) a cada término del atributo y luego usarlo en las variaciones del producto.

Sin el plugin adicional, WooCommerce solo mostrará el nombre del atributo como texto.

Esto lo vemos a detalle en nuestro Mastery de WooCommerce en la sección de WooCommerce Avanzado: https://uxdivi.com/cursos/mastery-en-woocommerce-con-divi-crea-tiendas-online-que-venden

uxdivi.com

Mastery en WooCommerce con Divi: Crea Tiendas Online que Venden

Este Mastery en WooCommerce con Divi es el curso que te guiará paso a paso, desde los fundamentos esenciales de Woo hasta técnicas avanzadas