existe WooCommerce Los estilos de botones en el dise?o de tiendas tienen un impacto directo en la experiencia del usuario y las tasas de conversión. Los estilos de botón predeterminados de muchos temas pueden no cumplir los requisitos de unidad de marca o estética de la página. En este artículo, explicaremos cómo a?adir bordes uniformes a todos los botones de WooCommerce en bloque mediante CSS para crear un efecto visual de página más profesional y coordinado.

1. ?Por qué armonizar los estilos de los bordes de los botones?

unificarBordes de los botonesSe pueden obtener los siguientes beneficios:

• Mejorar la coherencia de la marca: mantenga la misma especificación visual para las distintas páginas y botones funcionales.
• Aumentar la sensación de jerarquía visual: El dise?o del borde hace que los botones destaquen más en la página y dirige al usuario a hacer clic en ellos.
• Ahorro en costes de mantenimiento: Después de la configuración unificada, no es necesario modificar cada botón individualmente más adelante.

2. Nombre de clase común del botón WooCommerce

en preparación CSS Antes de eso, necesitas saber la clase de los botones comunes en WooCommerce, para que puedas configurar el selector con precisión.

Las clases de botones más comunes son:

• .botón (Clase común para todos los botones de WooCommerce)
• .add_to_cart_button (Botón A?adir a la cesta)
• .checkout-button (Botón de pago)
• .single_add_to_cart_button (Botón A?adir a la cesta en la página de detalles del producto)
• .woocommerce-cart .button (Botón de la página de la cesta de la compra)
• .woocommerce-checkout .button (Botón de la página de pago)

3. Ejemplo de código CSS para a?adir un borde uniforme

El siguiente código puede utilizarse para WooCommerce Se a?aden estilos de borde uniformes a todos los botones, incluidos el ancho del borde, el color, las esquinas redondeadas y los efectos hover.

3.1 Ejemplos de códigos

/* A?adir un borde uniforme a todos los botones de WooCommerce */
.woocommerce .button, .
.woocommerce-page .button, .
.woocommerce a.button, .
.woocommerce button.button, .
.woocommerce input.button, .
.woocommerce input[type="submit"], .
.woocommerce .add_to_cart_button, .
.woocommerce .checkout-button, .
.woocommerce .single_add_to_cart_button {
    border: 2px solid #0071a1; /* definir ancho y color del borde */
    border-radius: 4px; /* definir esquinas redondeadas */
    background-color: #ffffff; /* establecer el color de fondo en blanco, se puede ajustar según sea necesario */
    color: #0071a1; /* establecer el color de la fuente */
    padding: 10px 20px; /* establecer el margen interior para asegurarse de que los botones son del mismo tama?o */
    transition: all 0.3s ease; /* Efecto de transición suave */
}

/* Cambios de borde y fondo en estado hover */
.woocommerce .button: hover, .
.woocommerce-page .button:hover, .woocommerce a.button:hover, .woocommerce-page
.woocommerce a.button:hover, .woocommerce button.
.woocommerce button.button:hover, .
.woocommerce input.button:hover, .
.woocommerce input[type="submit"]:hover, .
.woocommerce .add_to_cart_button:hover, .
.woocommerce .checkout-button:hover, .
.woocommerce .single_add_to_cart_button:hover {
    background-color: #0071a1; /* color de fondo para hover */
    color: #ffffff; /* color de fuente en hover */
    border-color: #00557a; /* color del borde al pasar el ratón por encima */
}

3.2 Métodos de utilización

• Regístrese WordPress Entre bastidores, vaya a [Apariencia] > [Personalizar].

• Pegue el código anterior en el cuadro de edición [CSS adicional

• Haga clic en [Publicar] para guardar la configuración, actualice el primer plano para ver el efecto

Haz clic aquí:

Haz clic en él:

4. Precauciones

Cobertura temática de las inspecciones
Algunos temas a?aden un estilo obligatorio a los botones (Importante), y si el código no funciona, puede a?adir el CSS Importante Prioridad elevada.

Compatibilidad con plug-ins
Si utiliza Elementor u otros creadores de páginas, también tendrán que confirmar la coherencia del selector de botones o a?adir el código anterior a su CSS personalizado.

Combinación de colores de la marca
comandante en jefe (militar) #0071a1 responder cantando #00557a Sustitúyalo por los colores primarios y oscuros de su marca para mantener la coherencia.

5. Optimización avanzada: uso de la gestión de variables CSS

Para facilitar aún más el mantenimiento, puede utilizar variables CSS para unificar los estilos de los bordes de los botones. Por ejemplo

:root {
  --btn-border-color: #0071a1; --btn-hover-border-color: #00557a; :root {
  --btn-hover-border-colour: #00557a;
  --btn-radio: 4px;
}

.woocommerce .button, --btn-hover-border-colour
.woocommerce-page .button {
  border: 2px solid var(--btn-border-colour); border-radius: var(--btn-radius); }
  border-radius: var(--btn-radius); }
}

/* hover */
.woocommerce .button:hover, .woocommerce-page .
.woocommerce-page .button:hover {
  color-borde: var(--btn-hover-border-color);
}

Esto permite actualizaciones posteriores en todo el sitio simplemente cambiando los valores de las variables.

Haz clic aquí:

Haz clic en él:

resúmenes

Con un simple CSS, es posible a?adir una nueva función a la función WooCommerce Todos los lotes de botones a?aden un borde unificado, de modo que, tras el ajuste, el estilo de los botones queda unificado, el sitio tiene un aspecto más profesional y la experiencia operativa es más fluida.

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