Como cambiar el tamaño del botón «añadir al carrito» en WooCommerce

Si necesitas cambiar el tamaño del botón «Agregar al carrito» (y el texto de dentro) en tu tienda de WooCommerce, hay una forma fácil de hacerlo.

Puede que lo hayas intentado desde Personalizar/Tipografía en tu panel admin de WordPress, pero sin éxito. También puede que buscaras en el archivo css, pero sin encontrar cómo modificarlo. ¿Vemos como se hace?.

Antes de nada hay que decir que el personalizador no funcionará para este caso, estos estilos son de WooCommerce y se encuentra dentro de sus archivos.

Pero si deseas cambiar los estilos del botón, este CSS debería funcionar. Tienes que incluir el siguiente código en el personalizador de CSS de tu tema activo. Si no plantilla no tiene esta opción lo puedes incluir en un plugin para tal efecto, o en el archivo style.css del tema hijo. Nunca el archivo CSS del tema padre o perderás los cambios al actualizar la plantilla.

Código CSS para cambiar el tamaño del botón y la fuente

.add_to_cart_button {
padding: 12px 40px;
font-size: 20px;
}

El código no funciona. Lo has insertado en en los sitio que he mencionado anteriormente pero sigue sin funcionar. Tal vez necesitamos ser más específicos en nuestro código:

.woocommerce ul.products li.product .button {
padding: 12px 40px;
font-size: 20px;
}

como ves en el código anterior puedes cambiar la altura y anchura del botón de compra de productos. So tienes que cambiar los píxeles al tamaño deseado en «padding». Para cambiar el tamaño del texto o la fuente tienes que modificar los px en «font-size» .

Puedes ver una lista de plugins para incluir css personalizado a tu sitio web de WordPress en este post.

También te puede interesar esta entrada donde muestro lo que debes hacer para no perder los cambios cuando actualizas un tema.

Como he dicho antes, intenta no editar o sobrescribir el código en el tema principal, ya que cuando actualices para una versión más nueva, todas sus modificaciones se perderán. A menos que estés usando un tema hijo ;).

Una vez introducido el código tienes que borrar la caché del navegador para ver si se han realizado los cambios correctamente. La caché del navegador hace una copia de tu sitio web para que cargue mas rápido la próxima vez que entres. Si estás haciendo los cambios en local pues no tendrás ese problema.

¿Alguna pregunta o sugerencia? Pues comentando que es gerundio…