Cómo añadir subtítulos a los productos de tu tienda Woocommerce

07-09-2019

¿Necesitas añadir un subtítulo a los productos de una tienda hecha con Woocommerce? En este tutorial encontrarás las instrucciones y el código necesarios para hacerlo en menos de media hora.

Veremos cómo añadir un subtítulo en las páginas de archivo de producto y en las propias páginas de producto. Y lo haremos de tal manera que el subtítulo solo se mostrará en los productos que lo tengan asignado.

Para seguir este tutorial necesitarás:

Una instalación de WordPress con Woocommerce
Al menos un producto en la tienda
Acceso al archivo functions.php
El plugin Advanced Custom Fields (ACF)

1. Crear el campo para el subtítulo con ACF

Para empezar, instalaremos el plugin Advanced Custom Fields (ACF) y crearemos un nuevo grupo de campos. Puedes llamarlo como quieras, pero te recomiendo usar un nombre descriptivo; yo he optado por ‘Campos de producto’.

Dentro de este grupo de campos, crearemos el campo ’Subtítulo’ (de tipo texto) y se lo asignaremos a los posts de tipo producto (fíjate en la captura que sigue).

2. Introducir los subtítulos de los productos

Para poder mostrar el subtítulo, deberemos informar este campo en los productos que haga falta. En la siguiente captura verás dónde aparece este campo:

El subtítulo ya está añadido, pero si vas al front-end de la web verás que no se muestra ni en la ficha de producto ni en el listado de productos.

Esto es perfectamente normal: hemos creado el subtítulo, pero aún nos falta añadir el código que hará que se muestre donde es debido.

3. Mostrar subtítulos en listados de producto

Para mostrar el subtítulo tendrás que editar el archivo functions.php del tema que estás usando en tu instalación de WordPress.

Este archivo es muy delicado, si metes la pata editándolo puedes cargarte la web. Así que antes de tocar nada, haz una copia de seguridad del archivo. De esta manera, podrás deshacer el error en un par de clics.

Abre el functions.php (lo encontrarás en la ruta /wp-content/themes/elnombredetutema/) y copia este bloque de código al final del archivo:

// Add product subtitle in archives
add_action( 'woocommerce_after_shop_loop_item_title', 'add_product_subtitle_in_archive', 40 );
function add_product_subtitle_in_archive() {
if (function_exists('the_field')){

        if (get_field('subtitulo')){
            echo '<span class="product-subtitle">', the_field('subtitulo'), '</span>';
        }
    }

}

Guarda los cambios, recarga la página del listado de productos y, violà, tu subtítulo se mostrará.

El estilo no es el ideal, por eso le he añadido una clase que nos permitirá cambiarle el aspecto con unas pocas líneas de CSS.

Para hacer esto tendrás que buscarte la vida, cada web necesitará un diseño específico. Pero como ejemplo te muestro qué código he usado yo para reducir el tamaño de la tipo y cambiarle el color:

.product-subtitle { color: #666; font-size: 0.8em; }

Así se ve después de tocar la hoja de estilos CSS.

Si te fijas, verás que solo un producto tiene subtítulo. ¿Por qué? Porque solo he añadido esta información para ese producto.

Si has seguido los mismos pasos que yo, en cuanto añadas un subtítulo a un producto, se mostrará en los listados. Y si no necesitas subtítulo, pues no lo pones y listo. Esa es la ventaja de haber usado un condicional en el código.

4. Mostrar subtítulos en las fichas de producto

Muy bien, ya tenemos el subtítulo en las páginas de archivo (listados).

Ahora vamos a ponerlo también en las páginas de producto; si quieres, claro está, también podrías dejarlo como está si eso es lo que necesitas.

Para realizar este cambio, vamos a añadir el siguiente código al final del functions.php (antes recuerda hacer un backup):

// Add product subtitle in product pages
add_action( 'woocommerce_before_single_product_summary', 'add_product_subtitle_in_product_page', 40 );
function add_product_subtitle_in_product_page() {
if (function_exists('the_field')){

        if (get_field('subtitulo')){
            echo '<span class="product-subtitle">', the_field('subtitulo'), '</span>';
        }
    }

}

Si te fijas en el resultado, verás que el subtítulo queda mal alineado:

Pero, otra vez más, podemos arreglarlos con una pizca de CSS:

.product-page-subtitle { float: right; width: 48%; clear: none; }

Queda mejor, ¿verdad?

Ahora solo te queda investigar un poco para aprender a ajustar los estilos de este elemento en las media queries del CSS para que se vea como quieras en anchos de pantalla menores (móviles).

¡Personaliza tu tienda Woocomerce!

Woocommerce nos ofrece decenas de hooks y filters para personalizar tu tienda. Te animo a investigar y, sobre todo, a experimentar.

Replica tu tienda en una instalación local –nunca trastées con la versión de producción– y juega con el código hasta conseguir los resultados que deseas.

O contrata a un profesional si prefieres dedicar tu tiempo a otra cosa.

Lo importante es que sepas que Woocommerce es un sistema de ecommerce que nos ofrece mucha flexibilidad para hacer lo que nos dé la gana con nuestra tienda online.

Por si te animas a experimentar, te dejo enlaces a algunos recursos muy útiles: