Cómo mejorar el diseño de los botones de WooCommerce: cómo personalizar el efecto de borde con los temas

existe WooCommerce En las tiendas, los botones son el elemento central de la interacción de un usuario con un sitio web, especialmente durante el proceso de compra, y el diseño de los botones afecta directamente a las tasas de clics y conversión. Un botón atractivo puede ayudar a los usuarios a encontrar y hacer clic más fácilmente, mejorando la experiencia de usuario y aumentando las ventas.

Este artículo explicará cómo añadir efectos de borde a los botones de WooCommerce a través de la función de personalización del tema.

I. Por qué para Botón WooCommerce Añadir Borde?

Los botones no sólo permiten a los usuarios realizar acciones, sino que también dirigen la atención y fomentan una mayor interacción. Añadir bordes a los botones de WooCommerce tiene las siguientes ventajas:

• Hacer más visibles los botonesLos bordes hacen que los botones destaquen más en la página e incitan a los usuarios a hacer clic en ellos.
• Mejora de la experiencia operativa: El diseño de los bordes hace que los botones parezcan más orientados a la retroalimentación y que sea más probable que los usuarios hagan clic en ellos.
• Mayor sentido de marca: Los colores y estilos de los bordes pueden ajustarse a los estilos de la marca para dar al sitio un aspecto profesional.

Cómo añadir efectos de borde a los botones de WooCommerce mediante la personalización del tema

Esto se puede hacer a través del propio WordPress Personalización de temas debido a WooCommerce para añadir un borde, la operación es sencilla y no requiere conocimientos de programación. Aquí están los pasos detallados:

2.1 Introducir la configuración personalizada de WordPress

• Acceda al backend de WordPressEn primer lugar, inicie sesión en WordPress Backend del sitio web.
• Abrir la configuración personalizada: Seleccione [Aspecto] → [Personalizar] en el menú de la izquierda.

• Seleccione CSS adicionalEn la pantalla de personalización, busque la opción [CSS adicional] y haga clic en ella.

2.2 Añadir personalización Código CSS

En el área "CSS Extra", puedes añadir código CSS personalizado para establecer el efecto de borde para los botones de WooCommerce. Aquí tienes un ejemplo sencillo:

/* Establecer botón WooCommerce con borde verde sobre fondo blanco y texto verde */
.woocommerce button.button, .woocommerce-page button.
.woocommerce a.button, .woocommerce-page a.button, .
.woocommerce input.button, .woocommerce-page input.button {
    background-color: blanco; /* el color de fondo del botón es blanco */
    border: 2px solid #7CFC00; /* borde verde hierba */
    color: #7CFC00; /* El color del texto del botón es verde hierba */
    border-radius: 5px; /* esquinas redondeadas */
    padding: 10px 20px; /* margen interior */
    transition: all 0.3s ease; /* efecto de transición suave */
}

/* Al pasar el ratón por encima, el fondo del botón cambia a verde hierba y el texto cambia a blanco */
.woocommerce button.button:hover, .woocommerce-page button.
.woocommerce a.button:hover, .woocommerce-page a.button:hover, .
.woocommerce input.button:hover, .woocommerce-page input.button:hover {
    background-color: #7CFC00; /* el color de fondo al pasar el ratón cambia a verde hierba */
    color: blanco; /* el color del texto hover cambia a blanco */
    border-color: #7CFC00; /* mantener el borde verde hierba */
}

interpretación de códigos

Explicación del código:

• color de fondo: blanco; /* Establece el color de fondo del botón en blanco */
• borde: 2px sólido #7CFC00; /* Establece el borde del botón en verde hierba con un ancho de 2px */
• color: #7CFC00. /* Establece el color del texto del botón en verde hierba */
• borde-radio: 5px; /* Ajuste el grado de redondeo de las cuatro esquinas del botón para aumentar la suavidad del botón */
• acolchado: 10px 20px; /* Establece los márgenes interiores de los botones para que tengan el tamaño adecuado */
• transición: todo 0,3s facilidad; /* Configuración de efectos de transición suaves para los botones con el fin de mejorar la experiencia del usuario */

Al pasar el ratón por encima:

• color de fondo: #7CFC00; /* El color de fondo del botón cambia a verde hierba cuando se pasa el ratón por encima */
• color: blanco; /* El color del texto del botón cambia a blanco al pasar el ratón por encima */
• color del borde: #7CFC00; /* Mantener el borde verde al pasar el ratón por encima */

2.3 Guardar y ver efectos

Una vez completada la adición, haga clic en [Publicar]. Verá que el borde del botón se ha aplicado correctamente y el botón mostrará efectos dinámicos al pasar el ratón por encima, proporcionando información visual instantánea.

Tercero, personalizado según el estilo de la marcaBordes de los botones

Puede estilizar los bordes de los botones según el tono de su marca o el color del tema de su sitio web.

Por ejemplo, si el color de la marca de su sitio web es azul, puede ajustar el color del borde a azul:

/* Añadir borde azul inicial al botón WooCommerce */
.woocommerce a.button, .
.woocommerce button.button, .
.woocommerce input.button, .
.woocommerce-page a.button, .
.woocommerce-page button.button, .
.woocommerce-page input.button {
    border: 2px solid #1E90FF !important; /* Borde inicial: azul, 2px */
    border-radius: 5px !important; /* esquinas redondeadas */
    padding: 12px 24px !important; /* margen interior */
    background-color: white !important; /* Fondo blanco */
    color: #1E90FF !important; /* El texto del botón es azul */
    transition: all 0.3s ease !important; /* Efecto de transición suave */
}

/* Al pasar el ratón por encima, el botón muestra un doble borde y el fondo cambia a azul lago */
.woocommerce a.button:hover,
.woocommerce button.button:hover, .
.woocommerce input.button:hover, .
.woocommerce-page a.button:hover, .
.woocommerce-page button.button:hover, .
.woocommerce-page input.button:hover {
    border: 4px double #32CD32 !important; /* doble borde, 4px, verde hierba */
    background-color: cyan !important; /* color de fondo cambiado a azul lago */
    color: white !important; /* Color del texto cambiado a blanco */
}

Este diseño personalizado hace que los botones parezcan más acordes con la marca y añade un toque profesional a su tienda.

IV. Optimización del diseño de los botones

Además de añadir efectos de borde a los botones, puede optimizar aún más el diseño de los botones para mejorar la experiencia del usuario de las siguientes maneras:

Botón SombraAñadir efectos de sombra a los botones para añadir dimensión y atractivo visual.

.woocommerce a.button, .
.woocommerce button.button, .
.woocommerce input.button, .
.woocommerce-page a.button, .
.woocommerce-page button.button, .
.woocommerce-page input.button {
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0, 0.1) !important; /* Establecer el efecto de sombra del botón */
}

Cambiar fuente y tamañoAjustar la fuente y el tamaño de los botones para que estén más en consonancia con el diseño general del sitio.

.woocommerce button.button, .woocommerce-page button.button { font-family: 'Arial', sans-serif; /* set font */ font-size: 16px; /* set font-size */ }

V. Resumen

Con los ajustes del tema de WordPress, puedes añadir bordes, sombras y otros efectos a los botones para que tusWooCommerceLos botones son más llamativos. Encajan perfectamente con el estilo de su marca. Esto no solo mejora el valor de su tienda, sino que también atrae a más clientes para que hagan clic en él, lo que contribuye a aumentar las ventas.

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