Hoy en día parece que las tiendas online ya son algo más que una web y todo un catálogo online de productos. Los ecommerce se convierten en un pequeño comercial que además de estar operativo 24/7, debe ir guiando a sus visitantes a realizar la compra más adecuada para aquello que están buscando.
No solo es beneficioso para tus clientes, sino que también te ayuda a mejorar tu posicionamiento en buscadores como Google. Añadir contenido que responda a las búsquedas de tus usuarios atrae más tráfico, hace que la gente se quede navegando por tu tienda y, en general, mejora la experiencia. Pero ojo, ese contenido debe ser útil y relevante, porque si no lo es, los usuarios podrían abandonar tu web al no encontrar lo que necesitan.
¿Por qué agregar un bloque de texto debajo de los productos?
Después de ver el último directo de DinoRank que pude visionar por parte de José de Lanzamiento web en el canal de youtube, mencionó cómo grandes tiendas como Leroy Merlin están trabajando sus categorías como si fueran landing pages. No solo muestran productos, sino que integran contenido adicional para mejorar el SEO y el enlazado interno. Esto me despertó la curiosidad y me puse a investigar cómo podríamos hacer algo similar en WooCommerce.
En este post te enseñaré cómo modificar la plantilla de categorías de WooCommerce para añadir una breve descripción arriba y un bloque de texto extendido justo debajo de los productos. Este texto puede ayudarte a realizar un mejor enlazado interno y a responder a las intenciones de búsqueda de tus usuarios.
¿Qué necesitarás?
Antes de empezar, asegúrate de tener tu proyecto creado en WordPress y WooCommerce. ¡Y no olvides hacer una copia de seguridad! Siempre es mejor prevenir que lamentar.
Pasos para agregar el bloque de texto
- Inicia sesión en tu panel de wordpress
- Ve al apartado de Apariencia > Editor de Temas
- Selecciona el functions.php de tu tema visual.
- Copia y pega a continuación el siguiente código.
add_action( 'init', 'wpm_product_cat_register_meta' );
/**
* Register details product_cat meta.
*
* Register the details metabox for WooCommerce product categories.
*
*/
function wpm_product_cat_register_meta() {
register_meta( 'term', 'details', 'wpm_sanitize_details' );
}
/**
* Sanitize the details custom meta field.
*
* @param string $details The existing details field.
* @return string The sanitized details field
*/
function wpm_sanitize_details( $details ) {
return wp_kses_post( $details );
}
add_action( 'product_cat_add_form_fields', 'wpm_product_cat_add_details_meta' );
/**
* Add a details metabox to the Add New Product Category page.
*
* For adding a details metabox to the WordPress admin when
* creating new product categories in WooCommerce.
*
*/
function wpm_product_cat_add_details_meta() {
wp_nonce_field( basename( __FILE__ ), 'wpm_product_cat_details_nonce' );
?>
<div class="form-field">
<label for="wpm-product-cat-details"><?php esc_html_e( 'Details', 'wpm' ); ?></label>
<textarea name="wpm-product-cat-details" id="wpm-product-cat-details" rows="5" cols="40"></textarea>
<p class="description"><?php esc_html_e( 'Detailed category info to appear below the product list', 'wpm' ); ?></p>
</div>
<?php
}
add_action( 'product_cat_edit_form_fields', 'wpm_product_cat_edit_details_meta' );
/**
* Add a details metabox to the Edit Product Category page.
*
* For adding a details metabox to the WordPress admin when
* editing an existing product category in WooCommerce.
*
* @param object $term The existing term object.
*/
function wpm_product_cat_edit_details_meta( $term ) {
$product_cat_details = get_term_meta( $term->term_id, 'details', true );
if ( ! $product_cat_details ) {
$product_cat_details = '';
}
$settings = array( 'textarea_name' => 'wpm-product-cat-details' );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="wpm-product-cat-details"><?php esc_html_e( 'Details', 'wpm' ); ?></label></th>
<td>
<?php wp_nonce_field( basename( __FILE__ ), 'wpm_product_cat_details_nonce' ); ?>
<?php wp_editor( wpm_sanitize_details( $product_cat_details ), 'product_cat_details', $settings ); ?>
<p class="description"><?php esc_html_e( 'Debajo de los productos de la categoría, verás este bloque de texto.','wpm' ); ?></p>
</td>
</tr>
<?php
}
add_action( 'create_product_cat', 'wpm_product_cat_details_meta_save' );
add_action( 'edit_product_cat', 'wpm_product_cat_details_meta_save' );
/**
* Save Product Category details meta.
*
* Save the product_cat details meta POSTed from the
* edit product_cat page or the add product_cat page.
*
* @param int $term_id The term ID of the term to update.
*/
function wpm_product_cat_details_meta_save( $term_id ) {
if ( ! isset( $_POST['wpm_product_cat_details_nonce'] ) || ! wp_verify_nonce( $_POST['wpm_product_cat_details_nonce'], basename( __FILE__ ) ) ) {
return;
}
$old_details = get_term_meta( $term_id, 'details', true );
$new_details = isset( $_POST['wpm-product-cat-details'] ) ? $_POST['wpm-product-cat-details'] : '';
if ( $old_details && '' === $new_details ) {
delete_term_meta( $term_id, 'details' );
} else if ( $old_details !== $new_details ) {
update_term_meta(
$term_id,
'details',
wpm_sanitize_details( $new_details )
);
}
}
add_action( 'woocommerce_after_shop_loop', 'wpm_product_cat_display_details_meta' );
/**
* Display details meta on Product Category archives.
*
*/
function wpm_product_cat_display_details_meta() {
if ( ! is_tax( 'product_cat' ) ) {
return;
}
$t_id = get_queried_object()->term_id;
$details = get_term_meta( $t_id, 'details', true );
if ( '' !== $details ) {
?>
<div class="product-cat-details">
<?php echo apply_filters( 'the_content', wp_kses_post( $details ) ); ?>
</div>
<?php
}
}Deciros que este código ha sido generado por Mickelsen y localizado en StackOverflow, una comunidad de programadores y desarrolladores que entre todos ayudan a que tengamos soluciones como éstas a nuestro alcance.
¿Dónde podré agregar el texto?
Una vez hayas añadido el código, dirígete a Productos > Categorías y edita la categoría que desees. Verás un nuevo campo llamado «Descripción pie de página». Aquí puedes añadir el contenido adicional que aparecerá justo debajo de los productos.
¿Qué contenido es recomendable incluir?
Te sugiero aprovechar este espacio para añadir información útil que oriente a tus usuarios y mejore la experiencia de compra. Algunas ideas son:
- ¿Cómo elegir el mejor producto dentro de esa categoría?
- ¿Qué productos relacionados puedes recomendar?
- ¿Tienes algún artículo en tu blog o vídeo que ayude a los usuarios a tomar una decisión de compra?
Este contenido extra no solo mejorará la navegabilidad de tu tienda, sino que también ayudará a que tus categorías sean mucho más que un simple catálogo, convirtiéndolas en espacios de valor para tus clientes.
Ejemplo: Cómo lo hace Leroy Merlin
Para que lo veas en acción, te muestro cómo Leroy Merlin utiliza esta técnica para optimizar sus categorías. Tú puedes hacer algo similar en tu eCommerce, personalizando la información según lo que mejor funcione para tu público.
Espero que este tutorial te haya sido útil. Si tienes alguna duda, ¡te leo en los comentarios! 😊
