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

LucusHost, el mejor hosting

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:

anadir texto pagina tienda woocommerce

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 arriba pagina tienda

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:

escribir debajo de los productos en tienda woocommerce

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!

¡Haz clic para puntuar esta entrada!
(Votos: 6 Promedio: 5)
mailerlite diegol

Especialista 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.top

¿Necesitas ayuda con este tutorial? Mándame un correo y te resuelvo todas las dudas!


Ver servicios Curso de WooCommerce

También puedes realizar una donacion para seguir apoyando la salida de nuevos tutoriales y actualizaciones

mailerlite diegol

Reader Interactions

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *