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.
Esto ya no es solo bueno para tus clientes, sino que también te ayuda a posicionarte mejor en los buscadores, como en Google ya que con este tipo de acciones, con aquellos textos que responden a las intenciones de búsqueda de sus usuarios, atraemos más tráfico, las personas se acaban quedando y van navegando por el distinto contenido que ofrecemos. Pero hay que ser sinceros, este contenido debe ser útil y debe responder a esas búsquedas, ya que sino podemos llegar a conseguir el efecto contrario, es decir, que las personas huyan de nuestra web porque no estamos respondiendo su pregunta.
Después de ver el último directo de DinoRank que pude visionar por parte de José de Lanzamiento web en el canal de youtube, hubo un momento que me picó la curiosidad e investigué sobre cómo podríamos modificar la página de las categorías que tiene por defecto Woocommerce para poder añadir primeramente más contenido al pie de la página y a partir de él, realizar un mejor enlazado interno.
La idea es que se nos transmitió a aquellas personas que pudimos ver el directo que Leroy Merlin está trabajando ciertas secciones como si se tratasen de una propia categoría, sin productos, como si se tratase de una landing page pero integrado en una subcategoría… Ciertamente describir esto es algo complejo, por tanto, os animo a que veáis el directo ya que con ello os quedará más claro.
En este post, lo que quiero mostraros, es cómo hacer una modificación en la plantilla de las categorías para que podáis añadir una breve descripción sobre la categoría y luego, justo debajo de los productos, podáis crear un texto más extendido en el que podáis extenderos más para realizar este enlazado interno a otras categorías o responder a ciertas intenciones de búsqueda.
¿Qué necesitarás?
Lo primero de todo, contar con un proyecto que esté creado con WordPress y Woocommerce. Antes de ponernos con la faena, ¡realizar siempre una copia de seguridad de vuestro proyecto! Vale más prevenir que lamentar.
A continuación paso a mostraros el paso a paso para realizar esta modificación:
- 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é añadir el texto ahora para que salga debajo de los productos?
Pues ahora deberás dirigirte al apartado de Productos > Categorías y entrar a editar cualquier categoría de tu ecommerce. En ella verás un nuevo apartado denominado «Descripción pie de página».
En este bloque te animo a agregar contenido que resulte útil a tus usuarios como puede ser temáticas relacionadas con los productos:
- ¿Cómo escoger un producto dentro de esa categoría?
- ¿Qué otros productos relacionados tienes?
- ¿Qué publicaciones cuentas en tu blog/canal que ayuden a tomar la decisión de compra?
Todo esto ayudará a que la categoría cuente con más contenido útil, no solo una muestra de productos a modo de catálogo. Finalizo la publicación enseñándote a modo de ejemplo cómo lo hace Leroy Merlin y cómo podrías comenzar tú a aplicarlo a tu propio comercio electrónico. ¡Espero que os resulte de utilidad! y cualquier duda os leo en los comentarios 🙂
