Botón de WooCommerce añadir frontera después de la disposición de la manera incorrecta de resolver el problema

En WooCommerce, cuando añades bordes a los botones, puedes encontrarte con problemas de diseños desalineados. Esto suele deberse a que el borde CSS afecta al tamaño general del elemento, lo que provoca una desviación en el cálculo del diseño. Aquí están las razones específicas y soluciones simples para ayudarle a lograr fácilmente un efecto de estilo de botón hermoso y estable.

I. Fenómenos problemáticos

Muchas empresas están ajardinandoWooCommerceCuando la tienda, como para añadir bordes CSS para hacer el botón más en línea con el estilo de la marca, pero en la práctica, a menudo se encuentran botón tipográfico fuera de lugar, los cambios de tamaño o el diseño general del problema de la disonancia.

Entre las manifestaciones más comunes del mal comportamiento del diseño causado por los botones con bordes se incluyen:

• Cambio de la anchura y altura de los botones
• Contenedor de desbordamiento de texto de botón
• La posición del botón se desplaza, lo que provoca una desalineación.
• El área de clic del botón no coincide con el área visual

Estos problemas suelen aparecer en los listados de productos, botones de pago y botones del carrito de la compra, afectando gravemente a la experiencia del usuario con eltasa de conversión.

II. Causas del problema

1. Cambios en el tamaño de los botones debido a la forma en que se calcula el borde

En CSS, la anchura y la altura de un elemento sólo se calculan por defecto para la caja de contenido; el borde y el relleno se suman al tamaño total. Si no establece el valor box-sizingañadir un borde hará que los botones sobresalgan y que el diseño quede desalineado.

2. La anchura del borde entra en conflicto con la configuración del relleno

El valor del padding de algunos botones temáticos es justo el suficiente para sostener el contenedor, y añadir un borde hará que sobrepase la anchura del contenedor padre, provocando saltos de línea o desplazamientos.

3. Problemas de adaptación de la anchura de los botones

Cuando la anchura de los botones se establece en un porcentaje (que se ajusta automáticamente con el tamaño de la pantalla) y se añade un borde de valor fijo en píxeles, puede producirse una visualización desalineada en distintos dispositivos. Por ejemplo, la posición de los botones vista en un teléfono móvil y en un ordenador puede no ser la misma.

III. Soluciones

• Regístrese WordPress Backend, vaya a Apariencia → Personalizado

• golpe (en el teclado) CSS adicional(o "CSS adicional")

• Pegue el siguiente código en el cuadro de edición

Método 1: Unificación de los modelos informáticos mediante el tamaño de las cajas

Añade el siguiente CSS a todos los botones:

.woocommerce botón, .
.woocommerce a.button, .
.woocommerce input.button, .
.woocommerce #respond input#submit {
    box-sizing: border-box;
}

Explicación:
box-sizing: border-box; incluirá el borde y el relleno en el cálculo de la anchura y altura totales del elemento, evitando que el tamaño del botón se estire después de añadir el borde.

Método 2: Ajustar el relleno para compensar la anchura del borde

Si necesita que el tamaño de los botones sea coherente visualmente, puede añadir un borde y reducir el relleno en consecuencia. por ejemplo:

.woocommerce a.button {
    borde: 2px sólido #333;
    padding: 8px 14px; /* podría haber sido 10px 16px */
}

De este modo, la anchura y la altura de los botones se mantienen próximas al diseño original del tema.

Método 3: Utilizar el contorno en lugar del borde

Si desea utilizar un contorno como efecto visual y no necesita un borde propiamente dicho, puede utilizar un contorno para conseguir un efecto de trazo que no afecte al tamaño del elemento:

.woocommerce a.button {
    contorno: 2px sólido #333;
}

Nota: los contornos no ocupan espacio, pero en algunos navegadores pueden representarse como estilos de nivel superior, lo que afecta a la animación hover, que debe probarse.

Método 4: Establecer anchuras distintas para botones específicos

Para los botones que están obviamente mal colocados, puede establecer una anchura fija para ellos individualmente para evitar que salten bajo responsive influenciado por el borde. Ejemplo:

.woocommerce-cart .button {
    anchura: 100px;
}

Método 5: Comprobar la relación de herencia CSS del tema

algunos deWooCommerceSe adoptará el temaImportanteSe han corregido los estilos de botón que hacen que falle el CSS personalizado. En este caso, es necesario aumentar la prioridad del selector o añadir un code-behindImportante.

Ejemplo:

.woocommerce a.button {
    borde: 2px sólido #333 !importante;
}

IV. Pruebas finales

Después de completar las modificaciones, pruébalas en el siguiente escenario:

• Adaptable a ordenadores de sobremesa, tabletas y móviles
• Diferentes plantillas de página (página de lista de productos, página de producto único, página de pago, página de carrito de la compra)
• Anulación de la personalización tras la actualización del temaCSS

Para ello Herramientas para desarrolladores de navegadores Compruebe el tamaño real de los botones (cuadro computado) para asegurarse de que el diseño es estable.

alcanzar un veredicto

WooCommerce Los botones con bordes hacen que el diseño esté desalineado, cuya causa principal es la Cálculos del modelo de caja CSS incoherente con la configuración predeterminada del tema. Esto se consigue mediante el uso juicioso de la función box-sizingAjustar el relleno, o utilizar el contorno en su lugar, puede resolver eficazmente el problema de los botones desalineados y mantener la coherencia y belleza de la interfaz de usuario del sitio web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres