ReInSpirit

  • Contacto
  • Blog
  • Servicios
    • Alojamiento Web
    • Desarrollo y diseño web
  • Descuento E T
  • Sobre Nosotros

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

22 diciembre, 2017 por Pedro Mendez 2 comentarios

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?.

Para cambiar el color del mismo botón puedes visitar este post .
También puedes visitar esta entrada para cambiar el tamaño del precio.

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…

..Entradas Relacionadas

  • Mejores Plugins varios Vendedores en WooCommerce
  • 5 Plugins para Dividir Productos en WooCommerce
  • ¡Tu mañana más brillante con los 10 mejores temas de WordPress compatibles con WooCommerce para sitios de agencias!
  • Los Mejores Plugins de Videos en Productos de Woocommerce
  • Los Mejores Plugins Shopify para integrar con WordPress

Publicado en: Wordpress Etiquetado como: css, woocommerce

Sobre el autor

Pedro Mendez. Webmaster apasionado de WordPress. Autodidacta empedernido buscando siempre nuevas fuentes de conocimientos.

Comentarios

  1. Luis dice

    11 marzo, 2019 a las 9:08 PM

    Eres un Crack del diseño woocommerce. Te felicito.
    Estoy haciendo una pequeña tienda con Woocommerce y tus artículos me han venido de maravilla, pero hay una cosa que no logro hacer. Por favor, ¿podrías publicar como cambiar el tamaño de la fuente del nombre de los productos?. He cambiado el tamaño de la fuente del nombre de las categorías, pero una vez dentro de la categoría los productos se muestran con la foto muy grande y el nombre muy pequeño que no se lee bien. Me gustaría que publicases un post con el código para hacerlo. Gracias.

    Responder
    • Pedro Mendez dice

      12 marzo, 2019 a las 11:09 AM

      Hola Luis,
      Incluye este código y me dices:

      .single-product .product_title{ font-size:20px !important; }

      Saludos!

      Responder

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.


Descarga gratis la guía

guia 14 plugins

Política de privacidad


Más un correo a la semana con algún truco y consejo. ¿Te apuntas?

También con regalos y ofertas

icono Twittericono Facebookicono YouTube

Archivos

Categorías

  • Blogging (5)
  • Comercio Eléctronico (48)
  • Diseño (40)
  • Email Marketing (3)
  • Genesis (4)
  • Google (14)
  • herramientas (23)
  • hosting (8)
  • Marketing en Internet (13)
  • Prestashop (4)
  • Programación (4)
  • Redes Sociales (9)
  • SEO (24)
  • Sin categoría (22)
  • Trabajo (7)
  • Wordpress (510)

© Copyright 2021 ReInSpirit.com · Todos los derechos reservados ·Aviso legal·Política de Privacidad·Dos Hermanas (Sevilla)