Añadir un segundo campo de texto en las Categorías de WooCommerce

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:

mostrar dos campos de texto en las categorías de woocommerce
Nueva zona para editar en el backoffice

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.

¡Haz clic para puntuar esta entrada!
(Votos: 9 Promedio: 5)

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 suscribirte a mi newsletter para no perderte ninguna novedad

Reader Interactions

comentarios

  1. oscar says

    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.

    • Diegol says

      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!

  2. Guillermo says

    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

    • Diegol says

      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!

  3. Mike says

    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 😉

  4. Miguel says

    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,

    • Diegol says

      Hola Miguel,

      Problema común en Astra, debes cambiar esta parte del código final:

      // 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 '

      ' . wc_format_content( htmlspecialchars_decode( get_woocommerce_term_meta( $term->term_id, 'seconddesc', true ) ) ) . '

      ';
      }
      }
      }

      Por esta:

      // Mostrar el texto en la categoría

      add_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!

  5. Carlos says

    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

    • Diegol says

      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!

  6. ModelWC says

    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.

  7. Jesús says

    ¡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!

  8. Miguel says

    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.

  9. Leo says

    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.

    • Diegol says

      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!

  10. Pedro says

    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!!!

  11. Miquel says

    ¡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…

    • Diegol says

      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!

  12. Jorge says

    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

Deja una respuesta

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