WooCommerce viene con páginas de archivo y bucles que hacen un gran trabajo, pero a veces puede que tengas que mostrar un poco más de información en tu tienda principal y en otras páginas de archivo.

En este tutorial, te mostraré cómo Agregar la descripción corta del producto a las páginas de archivo y mostrar a continuación el título del producto.

Qué Vas a Necesitar

Para seguir el tutorial, necesitarás:

• Una instalación en desarrollo de WordPress
• Un editor de código
• WooCommerce instalado y activado
• Añadir productos - yo he importado el contenido de demostración que viene con WooCommerce; para más detalles sobre cómo hacer esto, mira esta guía.
• Un tema compatible con WooCommerce activado - yo uso Storefront.

Ante de empezar, asegúrate de tener configurado WooCommerce. Para añadir las descripciones cortas de producto, sigue estos tres pasos:

1. Crea un plugin para la función y activa el plugin.
2. Añade una función que muestre la descripción corta del producto.
3. Identifica el hook en WooCommerce que necesitamos para enganchar a función a el, y añade la función a ese hook.

¡Comencemos!

Crear el Plugin

En tu directorio wp-content/plugins, crea un nuevo fichero PHP. Yo llamo al mío tutsplus-product-archive-short-descriptions.php.

Abre tu fichero en tu editor de código. En la parte superior del fichero, añade esto:

<?php
/**
 * Plugin Name: Tutsplus Display Product Short Descriptions in WooCommerce Archive pages
 * Plugin URI: https://code.tutsplus.com/tutorials/woocommerce-adding-the-product-short-description-to-archive-pages--cms-25435
 * Description: Add product short descriptions to the loop in product archive pages (requires WooCommerce to be activated)
 * Version: 1.0
 * Author: Rachel McCollin
 * Author URI: http://rachelmccollin.co.uk
 *
 */

Esto configura el plugin y de da a WordPress todo lo que necesita para activarlo.

Ahora vete a la pantalla de Plugins en el panel de administración de WordPress y buscar el plugin:

Ahora actívalo.

Al principio no habrá ninguna diferencia ya que todavía no tiene código. Así es como se muestra la página principal de la tienda online ahora mismo:

Escribir una Función para Mostrar la Descripción Corta

La descripción corta para los productos en WooCommerce usa el extracto que puedes encontrar en una entrada normal, por lo que para mostrarlo todo lo que necesitas es mostrar el extracto de la entrada.

En el fichero de tu plugin, añade el siguiente código:

function tutsplus_excerpt_in_product_archives() {
    
  the_excerpt();
	
}

¡Es tan sencillo como eso! Pero ahora necesitas enganchar tu función a la acción correcta, por eso se muestra en el sitio correcto en tus páginas de archivo.

Enganchar la Función a la Acción Correcta

Echemos un vistazo al fichero de WooCommerce que muestra el contenido del bucle en las páginas de archivo. Este fichero es content-product.php, y lo puedes encontrar en el directorio templates del plugin WooCommerce.

El fichero incluye un número de hooks de acción, los cuales se usan por WooCommerce para mostrar diferente contenido.

Como nosotros queremos mostrar nuestro extracto debajo del título del producto, el hook que necesitamos es woocommerce_after_shop_loop_item_title. Como puedes ver en el fichero content-product.php, ya tiene dos funciones, woocommerce_template_loop_rating() y woocommerce_template_loop_price(), que tienen prioridades de 5 y 10 respectivamente. Por lo que necesitamos enganchar nuestra función con una prioridad mayor, para asegurarnos de que se ejecuta antes que esas funciones. Dejaré cierto margen y usaré 40 como prioridad.

Debajo de tu función, añade esto:

add_action( 'woocommerce_after_shop_loop_item_title', 'tutsplus_excerpt_in_product_archives', 40 );

Ahora guarda el archivo de tu plugin y actualiza la página de la tienda en tu navegador. Ahora verás las descripciones cortas de producto por debajo de los nombres de los productos:

Estas descripciones (proporcionadas por los datos de demostración) son un poco largas: personalmente yo usaría descripciones más cortas en un sitio real. Pero puedes ver claramente las descripciones que aparecen en las páginas de archivo.

Resumen

Debido a que WooCommerce muestra casi todo su contenido mediante ganchos de acción, es muy fácil agregar más contenido escribiendo funciones y adjuntándolas a los ganchos. En este tutorial has aprendido cómo añadir las descripciones cortas de producto a los archivos del producto. Si quieres ahondar en esto, podrías incluir una o más etiquetas condicionales en tu función para hacer esto en páginas de archivo específico.