[Resuelto] Botones Woocommerce Pequeños y Feos  

Hola Jésica, 

Para configurar el botón prueba añadir el siguiente código CSS en el apartado de Apariencia → personalizar → CSS Adicional

.woocommerce a.button {
background: #f68712;
color: #ffffff;
width: 100%;
text-align: center;
}

Por otro lado, para la altura de los productos te recomiendo abras un tema para ello, ya que son consultas diferentes y de esta forma podemos ayudarte con mayor detalle. 

Un saludo

@karen Muchísimas gracias. Funciona perfectamente en los botones del listado de productos de la tienda, pero no en el botón de los productos individuales (cuando acceder al producto). Muchas gracias.

Hola Jesica, 

En este caso verifica el siguiente codigo CSS

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
background: #f68712;
color: #ffffff;
width: 100%;
text-align: center;
}

Revisalo y nos comentas como va todo

Un Saludo 

@karen;uchas gracas Karen, ahora sí, solo que el botón aparece demasiado cerca de la descripción corta del producto. ¿Se podría separar un poco más? Muchas gracias por todo, eres una fenómena!

Hola Jesica, 

En este caso prueba el siguiente código CSS

button.single_add_to_cart_button.button.alt {
margin-top: 30px;
}

Un saludo 

@karen Perfecto, muchas gracias. Me di cuenta que los códigos que me pasaste antes, tanto para el botón de la tienda como para el del producto individual, pese a que funcionan como pedía, al pasar el ratón se ponen de colores diferentes, uno gris y otro morado. ¿Hay posibilidad de modificar los códigos para que al pasar el ratón salga el botón de color #54c5bb (con letras blancas)¿

Hola Jesica, 

En este caso para cambiar el color en el estado del Boston en hover prueba el siguiente codigo CSS

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button:hover, .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button:hover, :where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button:hover {
background-color: #54c5bb;
color: #ffffff;
}

Verificalo y nos comentas como va todo

Un Saludo

Mil gracias por tu ayuda!!!

Hola Jesica, 

Gracias a ti, es un placer siempre poder ayudarte. 

No dudes en escribirnos si tienes cualquier otra consulta. 

Un Saludo 😊