Como aumento la fuente del titulo y precio de un producto?

Plugins WooCommerce
1

Busque mil maneras y no puedo, mi tema Astra no tiene la opcion, en el constructor tampoco, probe codigo y no pude, no se si sea yo o que

2

@Ivan_Montero podrás compartir el código con el que probaste ?
Y por otro lado que modelo y builder estás usando ? Porque creo que Astra permite varios.

Un saludo.

3

Hola @Ivan_Montero
Si lo manejas con Astra, generalmente está en Apariencia → Personalizar → Woocommerce → Catalogo o página individual, o archivo si es la tienda en sí…
Si lo armaste con Elementor, revisa por fuentes globales y/o en el elemento de los productos en Estilos.
Es raro que no se pueda, ya que es de los más utilizados tanto con Elementor como con Gutenberg el theme Astra…
Es el free o pro?

Saludos
Leo

4

Hola le pregunte a chatgpt porque seguro hay que hacerlo con pho o css, yo siempre prefiero en estos casos ccs y me dio estas opciones:

A continuación le detallo las formas más seguras y controladas para aumentar el tamaño de fuente del título y el precio de un producto en WooCommerce, sin tocar functions.php y manteniendo buena compatibilidad con temas y actualizaciones.

1. Identificar qué está mostrando WooCommerce

WooCommerce utiliza estas clases estándar:

  • Título del producto en fichas/listados (archive/shop):
    .woocommerce-loop-product__title

  • Precio del producto en fichas/listados:
    .price

  • Título dentro de la página individual del producto:
    .product_title

  • Precio dentro de la página individual:
    .summary .price

Según su tema (posiblemente Astra, Storefront, Blocksy, GeneratePress, etc.) puede haber variaciones, pero estas clases funcionan en el 95% de los casos.

2. Dónde colocar el CSS (según sus preferencias)

Como usted prefiere evitar modificar functions.php, las mejores opciones son:

Opción A: Apariencia → Personalizar → CSS adicional

(Seguro, persistente y fácil de editar.)

Opción B: Usar un plugin de snippets de CSS

(por ejemplo: “Simple Custom CSS”, “Code Snippets” para CSS).

Las dos opciones son igual de válidas.

3. CSS para aumentar la fuente

A) Listado de productos (Shop / Categorías / Archivo)

/* Título en las fichas de productos */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.4rem;
    font-weight: 700;
}

/* Precio en las fichas de productos */
.woocommerce ul.products li.product .price {
    font-size: 1.3rem;
}

Puede ajustar las medidas:

  • 1.4rem ≈ 22.4px

  • 1.3rem ≈ 20.8px

B) Página individual de producto

/* Título dentro del producto */
.single-product .product_title {
    font-size: 2rem;
    font-weight: 700;
}

/* Precio dentro del producto */
.single-product .summary .price {
    font-size: 1.6rem;
}

4. Si su tema usa constructores o bloque de productos

Si su tienda usa bloques de WooCommerce (editor de bloques), podría necesitar este selector:

.wc-block-grid__product-title {
    font-size: 1.5rem;
}

.wc-block-grid__product-price {
    font-size: 1.4rem;
}

5. Ajustar solo un área específica

Si quiere aumentar solo en shop, pero no en categorías, o viceversa, también se puede segmentar por página utilizando:

body.post-type-archive-product .woocommerce-loop-product__title { ... }
body.tax-product_cat .woocommerce-loop-product__title { ... }