Una de las mejores prácticas para posicionar las categorías de productos en Google es añadirles texto para que haya más contenido semántico y abarquemos más búsquedas.
Por defecto en WooCommerce solo se puede añadir texto en un campo y siempre sale arriba, en este tutorial expliqué como ponerlo después del catálogo de productos para que no moleste. Si aplicaste este código y vas a usar este quita este último.
El problema de esta práctica es que ya no podríamos poner texto arriba del catálogo, como Google recomienda(aunque sea pequeño). Así que en este tutorial vamos a ver como crear un nuevo campo para poner texto tanto arriba como abajo del catálogo de WooCommerce sin plugins.
Mostrar textos arriba y abajo en las categorías
Añade este código a tu archivo functions.php de tu child theme o bien en tu plugin de funcionalidades como explico aquí:
// Mostrar el campo de texto cuando creas la categoría
add_action( 'product_cat_add_form_fields', 'dl_wc_anadir_editor_1', 10, 2 );
function dl_wc_anadir_editor_1() {
?>
<div class="form-field">
<label for="
desc"><?php echo __( 'Descripción de abajo', 'woocommerce' ); ?></label>
<?php
$settings = array(
'textarea_name' => 'seconddesc',
'quicktags' => array( 'buttons' => 'em,strong,link' ),
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
'theme_advanced_buttons2' => '',
),
'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:75px; width:80%;}</style>',
);
wp_editor( '', 'seconddesc', $settings );
?>
<p class="description"><?php echo __( 'Este texto va en la zona de abajo de las categorías', 'woocommerce' ); ?></p>
</div>
<?php
}
// Mostrar el campo de editar texto en la edición de la categoría
add_action( 'product_cat_edit_form_fields', 'dl_wc_anadir_editor_2', 10, 2 );
function dl_wc_anadir_editor_2( $term ) {
$second_desc = htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) );
?>
<tr class="form-field">
<th scope="row" valign="top"><label for="second-desc"><?php echo __( 'Descripción de abajo', 'woocommerce' ); ?></label></th>
<td>
<?php
$settings = array(
'textarea_name' => 'seconddesc',
'quicktags' => array( 'buttons' => 'em,strong,link' ),
'tinymce' => array(
'theme_advanced_buttons1' => 'bold,italic,strikethrough,separator,bullist,numlist,separator,blockquote,separator,justifyleft,justifycenter,justifyright,separator,link,unlink,separator,undo,redo,separator',
'theme_advanced_buttons2' => '',
),
'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:125px; width:100%;}</style>',
);
wp_editor( $second_desc, 'seconddesc', $settings );
?>
<p class="description"><?php echo __( 'Este texto va en la zona inferior de la categoría de productos', 'woocommerce' ); ?></p>
</td>
</tr>
<?php
}
// Que se pueda guardar el contenido
add_action( 'edit_term', 'dl_wc_guardar_campo', 10, 3 );
add_action( 'created_term', 'dl_wc_guardar_campo', 10, 3 );
function dl_wc_guardar_campo( $term_id, $tt_id = '', $taxonomy = '' ) {
if ( isset( $_POST['seconddesc'] ) && 'product_cat' === $taxonomy ) {
update_woocommerce_term_meta( $term_id, 'seconddesc', esc_attr( $_POST['seconddesc'] ) );
}
}
// Mostrar el texto en la categoría
add_action( 'woocommerce_after_shop_loop', 'dl_mostrar_desc_abajo_cat', 5 );
function dl_mostrar_desc_abajo_cat() {
if ( is_product_taxonomy() ) {
$term = get_queried_object();
if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
echo '<p class="term-description">' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '</p>';
}
}
}Se que es extenso pero con esto conseguimos:
- Crear un campo de texto editable para cada categoría tanto al crearla como editarla desde el propio panel de WordPress.
- Que se guarde el contenido dentro del propio WordPress.
- Mostrar la descripción nueva abajo, sin necesidad de tener que bajar la principal.
Así es como quedaría en tu panel para cada categoría:
Resolución
Sinceramente creo que esta funcionalidad debería de venir en el core de WooCoomerce, ya que en todas las tiendas que desarrollo lo incluyo. Te recuerdo también que mi servicio de diseño de tiendas online con WooCommerce lo incluyo por defecto.
Acabo de descubrir tu blog. No sabía que se podía hacer esto en WooCommerce tan fácil eres un crack!
Que sencillo lo haces, tus post de snippets son una maravilla, gracias por compartirlo!
hola, estoy muy agradecido con este tutorial, lo tengo instalado y funciona perfecto hasta que actualizo a ultima version de wp no se si se podria actualizar el codigo para que funcione con las actualizaciones de wp.
gracias.
Hola Oscar,
Tiene que funcionar para cada actualización de WooCommerce, a no ser que cambien los hooks o su sistema. Lo suelo usar en muchas tiendas que he desarrollado y sigue funcionando.
Si te dejó de funcionar quizás es porque has añadido una nueva funcionalidad que choca.
Un saludo!
Hola Diego,
Magnífica explicación. El único problema es que solo me deja añadir texto debajo de las categorías y me gustaría también añadir algo arriba. ¿Cuál ha podido ser el problema? Saludo
Gracias por tus palabras Guillermo.
¿Qué plantilla tienes? ¿O tienes otros snippets que lo hayan podido bloquear? Muchas veces esto lo bloquea.
Un saludo
Genial como siempre, ya son algunos códigos que he utilizado de los que propones. ¡¡Y todos me funcionan genial!!
Buenos días, Diegol.
Me ha venido genial tu código.
Sabes cual puedes ser el motivo de que no se muestre el panel de diseño de contenido como en la descripción de abajo.
Te adjunto captura:
https://prnt.sc/v9669m
Un saludo.
Me alegro que te haya servido el código Mike!
Por otro lado no sé a qué se deberá ese error. ¿te pasa solo al insertar el código? Porque si venía de antes debe de ser por rpoblemas de compatibilidad con la plantilla.
Un saludo!
Hola Diegol,
Antes de introducir tu código, la zona de Descripción ya no mostraba ese campo que te comentaba.
En fin, debe de ser problema del Theme GeneratePress que estoy utilizando.
De todos modos, he tenido que quitarlo por que el código entraba en conflicto con el Plugin de Yith woocommerce ajax product filter.
Enhorabuena por tu web, pinta muy bien la info que publicas 😉
Hola Diegol.
Gracias por tu ayuda.
Mi problema es que es texto se va por debajo de las numeraciones de la paginación. ¿Es posible ponerlas por debajo de la paginación? Tengo el theme Astra.
Un saludo,
Hola Miguel,
Problema común en Astra, debes cambiar esta parte del código final:
// Mostrar el texto en la categoríaadd_action( 'woocommerce_after_shop_loop', 'dl_mostrar_desc_abajo_cat', 5 );
function dl_mostrar_desc_abajo_cat() {
if ( is_product_taxonomy() ) {
$term = get_queried_object();
if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
echo '
' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '
';
}
}
}
Por esta:
// Mostrar el texto en la categoríaadd_action( 'woocommerce_after_main_content', 'dl_mostrar_desc_abajo_cat', 5 );
function dl_mostrar_desc_abajo_cat() {
if ( is_product_taxonomy() ) {
$term = get_queried_object();
if ( $term && ! empty( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) {
echo '
' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '
';
}
}
}
Con esto hemos cambiado la localización donde se ve el texto.
Tendría que funcionarte,
Un saludo!
Diego,
Ante todo gracias por este fantástico recurso! Es genial y soluciona mucho la vida.
Pero tengo el mismo problema que el último comentario, y es que se va por debajo de las numeraciones de la paginación. He aplicado la solución que has dado en la respuesta del otro comentario, pero no me ha funcionado, no me aparece nada en el párrafo de abajo. Utilizo el theme «Ogami» , sabes porqué podría ser?
Gracias!
Un saludo
Hola Carlos,
Muchas gracias por tu comentario.
Si con el ajuste del último comentario no te funciona es que esa plantilla ha cambiado los ajustes de los hooks.No he trabajado nunca con esa plantilla así que no sabría decirte. Pídele al desarrollador que si te puede facilitar los hooks de las categorías para saber cual es y cambiarlo en el código.
Otra solución no hay,
Un saludo!
Hola Diego. Antes que nada muchas gracias por tu artículo es claro y directo ¡como debe ser!
La cosa es que me gustaría hacer exactamente lo mismo pero en WordPress, es decir campos de texto en wordpress para añadir texto arriba y debajo en las categorías. Mi tema solo me da la opción disyuntiva de colocar el texto de la descripción arriba o abajo pero no en los dos sitios que es lo que a mi me gustaría. ¿Sería posible que hicieras un poco de magia en el código para mi? Muchas gracias.
¡Hola! Yo lo he probado en la plantilla Ocean y va de cine. Muchas gracias por el aporte, de verdad.
¿Alguien sabe si el bloque de texto inferior se puede ajustar para que salga encima o debajo dela paginación (page-1, page-2, etc.)? A mí me sale encima y creo que quedaría mejor debajo para no molestar la navegación del usuario.
¡Gracias de nuevo y saludos!
Gracias!!
Muchas gracias por el aporte Diego! Estaba buscando cómo implementarlo sin tirar de plugins. Me guardo tu web en favoritos 😉
He tenido problemas (no es Astra), pero modificando con lo que tienes en comentarios funciona perfectamente.
Gracias por tu comentario Miguel, tendré que modificar el código base entonces!
Un saludo!
Hola Diego, gracias por el aporte! Es posible hacer que la descripción de abajo no se repita en todas las páginas? Qué quede igual que la de arriba que sólo se ve en la primera hoja de la categoría.
Gracias.
Hola Leo,
En este caso el código que tengo varía dependiendo del tema y la configuración del mismo, es por esto que no hay uno estándar. Lo que puedes hacer es ponerlo con scroll infinito o bien cargar más. Igualmente Google a nivel de SEO ya tiene en cuenta esto de las páginas y prioriza la 1º.
Un saludo!
Vaya crack!! Muchas gracias, me va perfecto. Para hacer lo mismo con las etiquetas que es lo que habría que cambiar? Yo las utilizo también, y me gustaría poder ponerle el texto abajo y arriba. Muchas gracias de antemano!!!
Gracias Pedro, por supuesto aquí lo tienes también: como añadir un segundo texto a las etiquetas de WooCommerce
¡Muchísimas gracias por este recurso! Para no interferir mucho en lo que es el product grid de cada categoría tenía pensado hacerlo mediante textos deplegables utilizando wpbakery, por ejemplo. ¿Es posible hacerlo? Mediante tu función solo se permite añadir texto plano…
Hola Miquel,
Gracias por tu coemntario. Para que se pueda usar el Backery ahí sería meter su función de maquetación y requiere una personalización mayor. Puedes hablar con su soporte para hacerlo, que como no uso el Backery poco más se.
Un saludo!
Muchas gracias, es genial este aporte.
Eternamente agradecido.
Excelente colaboración Diego!!!! Mil gracias por este código!!! Nos vino bárbaro para nuestra tienda. Un saludo !!!
Hola, esta solución se podría aplicar de alguna manera al resto de las categorías de wp? entradas, páginas, portfolio, etc.?
La verdad es que sería muy útil.
Gracias por la información
Hola Jorge,
Esta función solo es para las categorías de WooCommerce.
Un saludo!
Hola Diego,
La verdad es que yo también estaría muy interesado en algo así. ¿No existe una función similar aplicable a los diferentes elementos de WordPress?
¡Muchas gracias!
Saludos!
Hola, se puede hacer con elementor? osea alguna forma ya sea codigo ccorto o algo para conectar ese campos descripcion2 en elementor?
Hola Alberto,
Sí, se podría hacer con un campo dinámico de advanced custom files por ejemplo o ya manualmente editar cada categoría manualmente.
Un saludo!
Hola Diego! genial este post! me ha ido fantástico!
Una duda, se puede hacer en la página de la «tienda»; mi cliente también quiere poner un seguno texto al final de loop de productos, pero no veo la manera de hacerlo (no soy programador 🙁 )
Hola Albert,
Disculpa la demora, pero no sabes la de consultas que tengo :/
Subí ya un artículo: https://diegol.top/woocommerce/anadir-texto-arriba-o-abajo-en-la-pagina-de-tienda-de-woocommerce/
Un saludo
¡Genial tu aportación!
Siempre son súper útiles tus posts.
Una pequeña duda: ¿Se podría añadir algo en el código para que ese campo de texto cuente para Yoast Seo? He pasado las descripciones de las categorías para la zona inferior y me aparece como si no tuviera palabras en la descripción. ¿Cómo afecta este nuevo campo en el SEO? Si tienes categorías con gran volumen de productos, ¿te puede perjudicar que el texto esté en las últimas páginas de la categoría?
¡Muchas gracias!
Hola Inés,
Google si lo lee, ya que está en el código de la web. En proyectos que llevo no penaliza, siempre es bueno poner el texto si ayuda a Google a entender lo que se está vendiendo en la categoría y si es útil para el usuario.
Respecto a lo de Yoast es cierto que no lo lee ya que no está en su código, habría que crear otro snippet. De momento como no lo he necesitado no lo tengo, de hacerlo algún día lo añadiré al post.
Espero que te haya servido,
Un saludo!
Mil gracias por este post, súper útil!!!
Increíble!! Muchas gracias.
Hay alguna forma de poner un color de fondo, en Divi, a la segunda descripción?
Gracias
Hola Rubén,
En este caso, al no depender de un maquetador visial debe ser directamente por CSS