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: 2 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 Contactar

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!

Deja una respuesta

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