Agregar una descripción adicional a las categorías de productos en WooCommerce

¿Sabías que agregar contenido adicional a las categorías de productos en WooCommerce puede ayudarte a mejorar el posicionamiento en Google?

En mi experiencia, una de las mejores prácticas para lograrlo es añadir descripciones detalladas que proporcionen más contenido semántico y permitan abarcar un mayor número de búsquedas. Sin embargo, me encontré con un pequeño inconveniente: por defecto, WooCommerce solo ofrece un campo de texto que se muestra arriba de la página de categorías. Esto resulta limitante si deseas redactar una descripción larga, ya que los productos aparecerían demasiado abajo en la página.

Agregar funcionalidad con Code Snippets

Afortunadamente, descubrí una solución para este problema. Te mostraré cómo crear un nuevo campo de texto, para que tengamos un campo tanto en la parte superior como en la parte inferior de las categorías de productos de WooCommerce. Para lograrlo, utilicé un plugin llamado Code Snippets. Este plugin no solo me ayudó a agregar esta funcionalidad, sino que también resultó útil para otros ajustes y personalizaciones que necesitaba realizar.

El primer paso fue instalar y activar el plugin Code Snippets. Fue muy fácil encontrarlo en el repositorio oficial de WordPress, y además cuenta con una excelente calificación por parte de los usuarios. Una vez activado, apareció una nueva opción en el menú lateral de WordPress llamada «Fragmentos de código».

Añadiendo código para aumentar la funcionalidad de la tienda online

Al hacer clic en ella, se abrió el panel de administración de Code Snippets. Al principio, pude ver algunos fragmentos de código por defecto, pero decidí eliminarlos para tener un espacio limpio. Luego, seleccioné la opción «Añadir nuevo» para agregar mi propio fragmento de código.

En la pantalla de creación del fragmento, tuve la posibilidad de proporcionar un título descriptivo y agregar el código necesario en el campo principal. También encontré un campo de descripción donde pude detallar en qué consistía exactamente el código que estaba añadiendo.

Una vez que ingresé el código y la descripción, simplemente guardé y activé el fragmento.

¡Y voilà! Con estos sencillos pasos, logré crear un nuevo campo de descripción adicional para mis categorías de productos en WooCommerce. Ahora tengo la flexibilidad de redactar una breve introducción en la parte superior y una descripción más detallada debajo del catálogo de productos. Esto me permitió agregar contenido relevante a mis categorías sin comprometer la visibilidad de los productos.

Te dejo el código utilizado para añadir un campo de texto en la parte inferior en las categorías de WooCommerce

// Agregar una descripción adicional a las categorías de productos en WooCommerce
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="seconddesc"><?php echo __('Descripción adicional', 'woocommerce'); ?></label>
        <?php
        $settings = array(
            'textarea_name' => 'seconddesc',
            'quicktags' => array('buttons' => 'em,strong,link'),
            'tinymce' => array(
                'toolbar1' => 'bold,italic,strikethrough,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,unlink',
                'toolbar2' => '',
                'quicktags' => true,
                'media_buttons' => false,
            ),
            'editor_css' => '<style>#wp-seconddesc-editor-container .wp-editor-area{height:100px; width:100%;}</style>',
        );

        wp_editor('', 'seconddesc', $settings);
        ?>
        <p class="description"><?php echo __('Esta descripción se mostrará debajo de las categorías', 'woocommerce'); ?></p>
    </div>
    <?php
}

// Mostrar el campo de texto al editar una 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="seconddesc"><?php echo __('Descripción adicional', 'woocommerce'); ?></label>
        </th>
        <td>
            <?php
            $settings = array(
                'textarea_name' => 'seconddesc',
                'quicktags' => array('buttons' => 'em,strong,link'),
                'tinymce' => array(
                    'toolbar1' => 'bold,italic,strikethrough,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,unlink',
                    'toolbar2' => '',
                    'quicktags' => true,
                    'media_buttons' => false,
                ),
                'editor_css' => '<style>#wp-seconddesc-editor-container .wp-editor-area{height:100px; width:100%;}</style>',
            );

            wp_editor($second_desc, 'seconddesc', $settings);
            ?>
            <p class="description"><?php echo __('Esta descripción se mostrará debajo de las categorías de productos', 'woocommerce'); ?></p>
        </td>
    </tr>
    <?php
}

// Guardar el contenido del campo
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', wp_kses_post($_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 '<div class="term-description">' . wpautop(get_woocommerce_term_meta($term->term_id, 'seconddesc', true)) . '</div>';
        }
    }
}

A partir de aquí no hace falta que lo copies pero te explico que realiza el código anterior. 

Este código realiza varias acciones:

Agrega un campo de texto en el formulario de creación de categorías de productos mediante el gancho product_cat_add_form_fields. El campo de texto se muestra utilizando la función wp_editor() y se guarda en la base de datos con el nombre seconddesc.

Agrega un campo de edición de texto en el formulario de edición de categorías de productos mediante el gancho product_cat_edit_form_fields. El contenido previamente guardado en la base de datos se recupera y se muestra en el editor de texto.

Define una función dl_wc_guardar_campo() que se ejecuta cuando se guarda o se crea una categoría. Esta función verifica si existe un valor para el campo seconddesc y, de ser así, lo guarda en la base de datos utilizando la función update_woocommerce_term_meta().

Agrega un gancho woocommerce_after_shop_loop para mostrar el contenido del campo seconddesc en la página de la categoría de productos. El contenido se recupera de la base de datos y se muestra utilizando la función wc_format_content().

Este código tiene como objetivo agregar una descripción adicional a las categorías de productos en WooCommerce y mostrarla en la página correspondiente de la tienda. Veamos el propósito y la función de cada sección:

dl_wc_anadir_editor_1(): Esta función se ejecuta cuando se está creando una nueva categoría de productos. Agrega un campo de texto en el formulario de creación de categorías, donde los usuarios pueden ingresar una descripción adicional. El campo se muestra utilizando la función wp_editor() y se configuran las opciones de edición, como las etiquetas de formato y los botones de la barra de herramientas.

dl_wc_anadir_editor_2(): Esta función se ejecuta al editar una categoría existente. Agrega un campo de texto similar al anterior en el formulario de edición de categorías, pero esta vez muestra la descripción guardada previamente en la base de datos. Utiliza la función get_woocommerce_term_meta() para obtener el valor del campo seconddesc y lo muestra en el editor de texto.

dl_wc_guardar_campo(): Esta función se encarga de guardar el contenido del campo seconddesc cuando se edita o crea una categoría. Utiliza la función update_woocommerce_term_meta() para almacenar el valor en la base de datos.

dl_mostrar_desc_abajo_cat(): Esta función muestra el contenido del campo seconddesc en la página de la categoría de productos. Se ejecuta después de que se muestra el bucle de la tienda, utilizando el gancho woocommerce_after_shop_loop. Recupera el valor del campo seconddesc de la base de datos y lo muestra dentro de un contenedor HTML.

Es importante tener en cuenta que el contenido adicional que agregues debe ser informativo, relevante y estar optimizado para los motores de búsqueda. Aprovecha al máximo esta funcionalidad para resaltar las características de tus categorías de productos, incluir palabras clave relevantes y proporcionar información valiosa para tus clientes.

No subestimes el poder de las descripciones adicionales en el posicionamiento de tus categorías de productos en WooCommerce. Te animo a que pruebes esta técnica y descubras por ti mismo cómo puede mejorar la visibilidad y el rendimiento de tu tienda en línea. ¡Verás cómo marca la diferencia!