Añadir texto arriba o abajo en la página de tienda de WooCommerce

En WooCommerce, tenemos que asignar una página por defecto para que se muestre la tienda. Esta se configura en WooCommerce > Ajustes > General > Página de tienda:

Podemos poner la que queramos. El problema es… Que da igual el texto que haya en esa página, no se mostrará. Es por eso que en este tutorial con unos pequeños fragmentos de código vamos a poder realizarlo, tanto arriba como abajo de los productos a nuestro gusto.

Insertar texto arriba de los productos

Vamos a añadir un texto antes de que se muestren los productos y las categorías. Añade este código en el fichero functions.php de tu Child Theme o en tu plugin de funcionalidades como explico aquí. Modifica el texto dentro de la etiqueta echo, te recomiendo usar HTML.

/* Añade un texto arriba de la tienda */
add_action( 'woocommerce_before_shop_loop', 'dl_texto_arriba_tienda', 5 );
function dl_texto_arriba_tienda() {
  if( is_shop() ) {
    
	echo '<div style="text-align:center">Este es un texto de ejemplo en la parte superior donde puedes escribir. Recuerda usar el HTML</div>';
  }
}

Consiguiendo el siguiente resultado:

Insertar texto debajo de los productos

En este caso si recomiendo poner encabezados y bastante texto si la queremos posicionar. Añade este código en el fichero functions.php de tu Child Theme o en tu plugin de funcionalidades como explico aquí. Modifica el texto dentro de la etiqueta echo, te recomiendo usar HTML.

/* Añade un texto abajo de la tienda */
add_action( 'woocommerce_after_shop_loop', 'dl_texto_debajo_tienda', 5 );
function dl_texto_debajo_tienda() {
  if( is_shop() ) {
    echo '<h2 style="text-align:center">Compra en nuestra tienda</h2>';
	echo '<div style="text-align:center">Este es un texto de ejemplo de la parte inferior donde puedes escribir. Recuerda usar el HTML</div>';
  }
}

Se mostraría de la siguiente forma:

Añade texto en otras zonas

Además de arriba y abajo de los productos, también se puede añadir texto en cada producto dentro en diferentes zonas, os dejo los add_action que podemos usar por defecto:

// These are actions you can unhook/remove!
 
add_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10 );
add_action( 'woocommerce_before_main_content', 'woocommerce_breadcrumb', 20 );
 
add_action( 'woocommerce_archive_description', 'woocommerce_taxonomy_archive_description', 10 );
add_action( 'woocommerce_archive_description', 'woocommerce_product_archive_description', 10 );
 
add_action( 'woocommerce_before_shop_loop', 'woocommerce_output_all_notices', 10 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_result_count', 20 );
add_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );
 
add_action( 'woocommerce_before_shop_loop_item', 'woocommerce_template_loop_product_link_open', 10 ); 
 
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_show_product_loop_sale_flash', 10 );
add_action( 'woocommerce_before_shop_loop_item_title', 'woocommerce_template_loop_product_thumbnail', 10 );
 
add_action( 'woocommerce_shop_loop_item_title', 'woocommerce_template_loop_product_title', 10 );
 
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_price', 10 );
add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5 );
 
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_product_link_close', 5 );
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
 
add_action( 'woocommerce_after_shop_loop', 'woocommerce_pagination', 10 );
 
add_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10 );

Espero que os haya servido, cualquier duda os leo en comentarios!

Añade diegol.top como fuente preferida de Google.

Últimas noticias de actualidad para tu tienda online.

Escrito porDiegolEspecialista en Comercio electrónico con Woocommerce. Te ayudo a crear, gestionar y publicitar tu Ecommerce en función de tu sector y público objetivo. Puedes encontrarme en Diegol.topSobre míLinkedInYouTube