Cómo cambiar el tamaño de fuente WooCommerce Storefront Theme

Publicado: 2020-10-02

¿Desea cambiar el tamaño de fuente en su tienda WooCommerce y está utilizando el tema Storefront? En este breve artículo, aprenderá cómo cambiar el tamaño de fuente en su tienda en línea. Es posible que desee aumentar el tamaño de fuente de todo el contenido de su página o hacer una línea o un párrafo más grande. En última instancia, aprenderá no solo cómo cambiar el tamaño de fuente en sus publicaciones de WordPress, sino también cómo hacerlo en todo su sitio web.

WooCommerce Storefront Cambiar tamaño de fuente

El tema Storefront se desarrolló con una clara visualización del producto. Sin embargo, los tamaños de fuente en los temas se configuran por defecto según las preferencias de los espectadores. Al igual que puede cambiar fácilmente el tamaño de la imagen del producto en WooCommerce, también puede cambiar el tamaño de la fuente si los visitantes de su tienda están interesados en una fuente de mayor tamaño.

Estos son los tamaños de fuente que se incluyen:

Cambiar el tamaño de fuente del párrafo en el tema Storefront.
Aumente el tamaño de fuente del encabezado de la barra lateral.
El tamaño de fuente del menú en Storefront.

a) Pasos para aumentar el tamaño de fuente de párrafo en el tema Storefront

Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú Panel de control, haga clic en Menú de apariencia > Personalizar .
Aparecerá una barra lateral en el lado izquierdo. Desplácese hacia abajo y haga clic en CSS adicional.
Agregue el siguiente código para aumentar el tamaño de fuente del párrafo en el tema Storefront.

 pags {

 tamaño de fuente: 18px;

}

Sin embargo, es posible que desee tener un párrafo o incluso toda su publicación en una fuente más grande. Esto se puede hacer fácilmente usando el editor de bloques predeterminado de WordPress.

Todo lo que necesita hacer es simplemente hacer clic en cualquier bloque de párrafo. Después de eso, seleccione el tamaño de fuente en 'Configuración de texto' en el lado derecho.

Cuando hace clic en el tamaño preestablecido, puede seleccionar del menú desplegable, que cubre Pequeño, Normal, Mediano, Grande y Enorme. Si no le gustan los cambios, simplemente haga clic en el botón 'Restablecer' para restablecer su párrafo al texto predeterminado.

Además, hay una opción 'Personalizada' en la que simplemente puede escribir el tamaño de píxel que desea. Además, también puede configurar una letra capitular grande para que aparezca al comienzo de su párrafo. Sin embargo, estas opciones no están disponibles en el antiguo editor clásico de WordPress.

b) Pasos para cambiar el tamaño del encabezado de la barra lateral en el tema de la tienda

En las actualizaciones recientes del tema Storefront, el título del widget tiene una fuente normal. Esto significa que los usuarios deben agrandarlos para tener un encabezado visible en la barra lateral de Storefront.

Escribieron el estilo correcto en el código CSS, pero no funcionó porque el título del widget debe incluir el indicador !important para anular el estilo predeterminado.

Estos son los sencillos pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú Panel de control, haga clic en Menú de apariencia > Personalizar .
Aparecerá una barra lateral en el lado izquierdo. Desplácese hacia abajo y haga clic en CSS adicional.
Agregue el siguiente código para aumentar el tamaño de fuente del encabezado de la barra lateral:

 .widget-título{

tamaño de fuente: 50px! importante;

}

Este será el Resultado:

Sin embargo, ¿qué pasa si se trata de un encabezado para una publicación en particular? Puede usar encabezados en su contenido para captar la atención del usuario. Esto se debe a que solo toma un par de segundos decidir si quieren quedarse o abandonar su sitio web.

Los encabezados le permiten dividir sus publicaciones y páginas en secciones usando diferentes subtítulos. Son excelentes para SEO, por lo que debe proporcionar encabezados adecuados con más peso que el texto de párrafo normal.

Puede usar el editor de bloques predeterminado simplemente agregando el bloque 'Título'. Puede encontrarlo en la sección 'Bloques comunes' en el editor de bloques de WordPress.

El valor predeterminado es el Título 2, pero puede cambiarlo según su tamaño preferido. H2 por defecto

c) Pasos para aumentar el tamaño del enlace del menú en el tema Storefront

Los menús son un poco más pequeños, de acuerdo con las preferencias de muchos usuarios. Sin embargo, necesitan actualizar el tamaño de fuente de los enlaces de menú en el tema Storefront. Estos son los pasos que debe seguir:

Inicie sesión en su sitio de WordPress y acceda al Panel como usuario administrador.
En el menú Panel de control, haga clic en Menú de apariencia > Personalizar .
Aparecerá una barra lateral en el lado izquierdo. Desplácese hacia abajo y haga clic en CSS adicional.
Agregue el siguiente código para aumentar el tamaño de fuente del encabezado de la barra lateral:

 .navegación principal ul.menu > li > a, .navegación principal ul.nav-menu > li > a {

tamaño de fuente: 28px;

}

Este será el Resultado:

Conclusión

En este artículo, te he mostrado diferentes formas que puedes usar para cambiar fácilmente el tamaño de fuente en tu tienda en línea. He usado el tema Storefront, ya que es el tema más utilizado en la mayoría de los sitios de WooCommerce.

Primero, te mostré cómo puedes cambiar el tamaño de fuente de un párrafo en una publicación. Aquí usé el estilo CSS y te mostré cómo puedes usar el editor de bloques predeterminado de WordPress para cambiar el tamaño de la fuente.

Además, compartí un código CSS que puedes agregar para cambiar el encabezado de la barra lateral. Para encabezados en publicaciones, puede usar el editor de bloques predeterminado de WordPress para cambiar la fuente del encabezado usando el bloque 'Título', que se encuentra en la sección 'Bloques comunes' en el editor de bloques de WordPress. Los encabezados le permiten dividir sus publicaciones y páginas en secciones y es una excelente manera de captar la atención de los usuarios. También son buenos para SEO.

Finalmente, destaqué algunos pasos simples que puede seguir para cambiar el tamaño de fuente de los enlaces del menú en el tema Storefront usando un código CSS personalizado. Sin embargo, si no se siente cómodo usando el editor de bloques predeterminado de WordPress o el estilo CSS, puede usar el complemento avanzado TinyMCE, que facilitará su trabajo.