¿Cómo cambiar el aspecto y la sensación de su formulario de pedido?

¿Quieres que tu formulario de pedido coincida con el diseño de tu tienda? El creador de WooCommerce Wholesale Order Form incluye controles de estilo para cada elemento, cubriendo el espaciado, los colores de los botones y si las etiquetas de los campos aparecen. Este artículo te guía a través de cada opción.

Requisitos previos

• WooCommerce Wholesale Order Form instalado y activado
• Ya se ha creado al menos un formulario de pedido. Si aún no lo has hecho, consulta la Guía de inicio de WooCommerce Wholesale Order Form.

Abrir el panel de configuración del elemento

Las opciones de estilo y visualización están disponibles para cada elemento individual de tu formulario de pedido. Para abrirlas:

1. Ve a Mayorista → Formularios de pedido en tu administrador de WordPress.
2. Haz clic en el formulario de pedido que deseas editar para abrirlo en el constructor.
3. Pasa el ratón por encima de cualquier elemento del formulario. Aparecerá un icono de engranaje en la esquina superior derecha de ese elemento.
4. Haz clic en el icono de engranaje para abrir el panel de configuración en la barra lateral derecha.

La barra lateral muestra dos secciones: Estilos (ajustes visuales y de espaciado) y Opciones (configuración específica del elemento). Haz clic en el encabezado de una sección para expandirla. Las secciones siguientes explican lo que contiene cada una.

Ajustar el espaciado de los elementos

Utiliza la sección Estilos para controlar el espacio alrededor de cualquier elemento. Cada elemento admite valores de margen y relleno, por lo que puedes ajustar el diseño para que coincida con el de tu tienda.

1. Haz clic en el icono de engranaje del elemento que deseas ajustar.
2. Expande la sección Estilos en la barra lateral.
3. Introduce los valores de Margen (espacio exterior al elemento) o Relleno (espacio interior al elemento). Los valores están en píxeles por defecto. Utiliza el selector de unidades para cambiar a %, em o rem si es necesario.
4. Los cuatro lados están enlazados por defecto, por lo que un valor que introduzcas se aplica a la parte superior, derecha, inferior e izquierda a la vez. Haz clic en el icono de enlace para desenlazar los lados y, a continuación, introduce cada lado de forma independiente.
5. Haz clic en Guardar borrador (o Actualizar si el formulario ya está publicado) en la barra de herramientas superior para guardar el formulario.

Cambiar los colores de los botones

Los elementos de botón, como el botón Añadir al carrito y el botón Buscar, tienen controles de color en su sección Estilos. Puedes establecer colores separados para el fondo del botón y el texto del botón.

1. Haz clic en el icono de engranaje del elemento de botón que deseas cambiar.
2. Expande la sección Estilos en la barra lateral.
3. Haz clic en la muestra de color junto a Color del botón para abrir el selector de color y elegir el color de fondo.
4. Haz clic en la muestra de color junto a Color del texto del botón para establecer el color de la etiqueta.
5. Haz clic en Guardar borrador (o Actualizar si el formulario ya está publicado) en la barra de herramientas superior para guardar el formulario.

Mostrar u ocultar las etiquetas de los campos de metadatos del producto

Si tu formulario de pedido incluye una columna de Metadatos del producto, utilizada para mostrar datos personalizados del producto como peso, dimensiones u otros atributos almacenados en los metadatos del producto, puedes elegir si la etiqueta del campo aparece junto a cada valor. Esto es útil cuando deseas un diseño más limpio que muestre solo los valores, sin los nombres de los campos junto a ellos.

1. Haz clic en el icono de engranaje de tu columna de Metadatos del producto para abrir su configuración.
2. Expande la sección Opciones en la barra lateral.
3. Localiza la casilla de verificación Mostrar etiquetas de campo. Por defecto, está marcada, lo que significa que las etiquetas son visibles junto a cada valor.
4. Desmarca Mostrar etiquetas de campo para ocultar las etiquetas, dejando solo los valores visibles en el formulario de pedido.
5. Haz clic en Guardar borrador (o Actualizar si el formulario ya está publicado) en la barra de herramientas superior para guardar el formulario.

Nota: Las claves meta que comienzan con un guion bajo (por ejemplo, _mi_campo) son privadas en WordPress y no se mostrarán en el formulario de pedido, independientemente de esta configuración.

Solución de problemas

Mis cambios de espaciado no se muestran en el frontend

Asegúrate de haber guardado el formulario con Guardar borrador o Actualizar en la barra de herramientas superior después de introducir tus valores de espaciado. Si guardaste pero aún no ves el cambio, intenta limpiar la caché de tu navegador y cualquier plugin de caché (como WP Rocket o W3 Total Cache), y luego recarga la página.

La columna Meta del producto no muestra ningún valor

Comprueba las claves meta que has añadido en la tabla Meta del producto en la sección Opciones. La clave debe coincidir exactamente con lo que está almacenado en los campos personalizados del producto, incluida la sensibilidad a mayúsculas y minúsculas. Confirma también que la clave meta no comience con un guion bajo, ya que los campos meta privados se excluyen de la visualización.

La casilla de verificación Mostrar etiquetas de campo no se guarda

Esta opción requiere WooCommerce Wholesale Order Form versión 3.0.9 o posterior. Comprueba la versión de tu plugin en Plugins → Plugins instalados y actualiza si es necesario.

Preguntas frecuentes

¿Puedo ocultar etiquetas para algunos campos meta pero mostrarlas para otros?
No. La configuración Mostrar etiquetas de campo se aplica a todos los campos meta de esa columna a la vez. Si necesitas una visualización mixta, considera añadir dos columnas de Meta del producto separadas: una con las etiquetas visibles y otra con las etiquetas ocultas, cada una configurada con claves meta diferentes.

¿Puedo cambiar el tamaño de fuente o el color del texto de los elementos?
Los controles de estilo integrados actualmente cubren el espaciado y los colores de los botones. Para el estilo del texto, puedes añadir CSS personalizado a través de Apariencia → Personalizar → CSS adicional y apuntar a las clases CSS del formulario de pedido.

¿Necesitas ayuda?

Si tienes alguna pregunta o encuentras algún problema, estamos aquí para ayudarte.

• Usuarios premium: Abrir un ticket de soporte
• Usuarios gratuitos: Visita nuestro foro comunitario