Cómo ordenar y mostrar productos en WooCommerce para una mayor conversión (6 métodos)

La clasificación y la búsqueda de productos en WooCommerce desempeñan un papel clave para mejorar la experiencia del cliente y aumentar las conversiones.

Cuando los clientes pueden encontrar rápidamente los artículos en tu tienda Woo, es más probable que realicen una compra y vuelvan a por más, disfrutando de una buena experiencia de usuario.

Afortunadamente, puedes ordenar y mostrar los productos en WooCommerce mediante la configuración predeterminada, opciones personalizadas, plugins y mucho más.

Esta guía cubre 6 métodos para ordenar y mostrar los productos de WooCommerce, incluyendo ajustes básicos y avanzados, además de los plugins esenciales. También hemos incluido los pros y los contras de cada método para ayudarte a elegir el que mejor se adapte a tu negocio.

¿Por qué deberías ordenar y mostrar los productos en WooCommerce?

Clasificar y mostrar productos en WooCommerce tiene dos objetivos principales:

• Convierte clientes potenciales en compradores
• Ofrece una experiencia de usuario excelente en tu tienda

Tener control sobre la clasificación de los productos en tu tienda Woo te ayuda a conseguir ambos objetivos creando una tienda más organizada y fácil de navegar. Al hacerlo, tu tienda estará más organizada y menos desordenada.

Puedes ordenar los productos por criterios como popularidad, ventas medias o categorías como ropa para hombre y mujer.

En el ejemplo siguiente, la página de inicio está bastante ordenada y puedes encontrar fácilmente productos de categorías como Recién llegados y Más vendidos.

Además de una experiencia intuitiva en la tienda, esto también te ayuda a aumentar las conversiones. Por ejemplo, al clasificar los productos por «popularidad«, animas indirectamente a los clientes a comprar lo que otros están comprando, reforzando el atractivo de tus productos estrella.

¿La tienda crece en temporada de ventas? ¡A prueba de futuro con autónomos!

Mantén tu tienda preparada para todos los picos de tráfico inesperados con Cloudways Autonomous. Mantente a la vanguardia con escalabilidad avanzada y tecnología de vanguardia.

Empieza hoy mismo

Cómo ordenar y mostrar los productos de WooCommerce (6 métodos)

Como he mencionado antes, WooCommerce te ofrece varias formas de ordenar y mostrar los productos. He cubierto seis de los mejores métodos para hacerlo, para que puedas elegir con el que te sientas más cómodo.

Método 1: Cómo ordenar productos mediante las opciones predeterminadas de WooCommerce

WooCommerce incluye opciones de ordenación incorporadas. La forma más sencilla de ordenar los productos es utilizar estos métodos predeterminados, aunque ofrecen un control y una personalización limitados.

Utilizar el Personalizador

En las últimas versiones de WooCommerce, no encontrarás la opción de ordenación de productos por defecto en la configuración, por lo que tendrás que acceder a ella a través del Personalizador.

Para versiones anteriores:

• Ve a tu panel de control de WooCommerce > Configuración > Pestaña Producto .

En el menú desplegable, verás la clasificación de productos por defecto, que se centra en diferentes clasificaciones, como el precio y la popularidad.

Para WooCommerce 3.3 y versiones superiores:

• Ve a Apariencia > Personalizar en tu panel de administración de WordPress.

• Busca la sección WooCommerce en el Personalizador.

• Selecciona una opción de ordenación en el menú desplegable (por ejemplo, por precio, popularidad, valoración media, más reciente o alfabéticamente).

• Pulsa el botón«Publicar» para guardar los cambios.

💡Aquí he utilizado el tema Astra. Si utilizas un tema predeterminado de WordPress, es posible que tengas que ir a la sección Editor y selecciona Plantilla de Archivo de Productos WooCommerce para editar el Bucle de Consulta de Producto.

Cómo cambiar el orden del menú por producto

Sigue los pasos que se indican a continuación si quieres personalizar el orden individual de los productos en el menú de clasificación:

1. Haz clic en Editar en cualquier producto
2. Desplázate hasta el widget Datos del producto
3. Haz clic en la pestaña Avanzado
4. Ajusta la configuración del orden del Menú para cambiar la posición del producto.

En el backend, esta acción se gestiona con el hook woocommerce_catalog_order .

Pros y contras de este método

Fácil de instalar

✓ No se necesita codificación

✓Ofrece opciones básicas de ordenación (por ejemplo, por precio, popularidad, fecha)

Personalización limitada

✗No adecuado para necesidades de clasificación complejas

Método 2: Cómo ordenar productos en WooCommerce (manualmente)

Con WooCommerce, también puedes organizar manualmente tus productos. Y esto es genial para crear presentaciones de productos personalizadas y destacar artículos importantes. Sigue los pasos que se indican a continuación:

• En tu panel de WordPress, ve a Productos > Todos los productos.

• Haz clic en Ordenar en la parte superior de la página.

• Arrastra y suelta los productos para establecer el orden que prefieras.

El orden personalizado que establezcas aquí será la visualización por defecto para los clientes que naveguen por tu tienda.

Clasificación manual de productos individuales:

Para un mayor control sobre los productos individuales:

• Abre el producto en el editor y desplázate hasta la sección Datos del producto .

• En la pestaña Avanzado , establece el valor del pedido Menú (los productos con números más bajos aparecen más altos).

El ajuste del orden del menú es especialmente útil si quieres ajustar la posición más allá del simple arrastrar y soltar.

Pros y contras de este método

✓ Control total sobre el orden de exposición de los productos

✓ Sencilla interfaz de arrastrar y soltar

✗ Requiere mucho tiempo para grandes inventarios

✗ Necesita actualizaciones periódicas si cambian las prioridades del producto

Cómo escalar una tienda WooCommerce en 2024 – Métodos fáciles

Método 3: Cómo ordenar de forma personalizada por categoría o atributo

También puedes agrupar productos por categorías o atributos, lo que ayuda a tus clientes a encontrar fácilmente artículos dentro de grupos específicos. Es más eficaz cuando tienes una gama de productos diversa en tu tienda.

Sigue estos pasos:

• Haz clic en Productos y luego selecciona Categorías en la barra de herramientas de WooCommerce

• Añade nuevas categorías o gestiona las existentes asignando productos relevantes a cada una.

• Para mostrar los productos por categorías:

• • Ve a Apariencia > Menús para añadir enlaces de categoría a tu navegación principal
  • Utiliza shortcodes específicos de cada categoría para tener más control.

Código corto para mostrar productos por categoría:

[products category=»category-slug» orderby=»date» order=»asc»]

Sustituye «category-slug» por el nombre real de la categoría.

Ordenar por atributo:

WooCommerce también te permite ordenar por atributos como color, talla o marca. Para configurarlo:

1. Ve a Productos > Atributos para crear o gestionar atributos.
2. Asigna estos atributos a cada producto en la sección Datos del producto de la página de edición de cada producto.
3. Utiliza un widget de filtro en la barra lateral o utiliza shortcodes específicos para activar la función basada en atributos.

Pros y contras de este método

✓ Ordena los productos por categorías o atributos específicos (por ejemplo, color, tamaño)

✓ Ideal para tiendas con tipos de productos variados

✗ Requiere una configuración precisa de atributos para cada producto

✗ Puede llegar a ser complejo, con muchas categorías o atributos

Método 4: Cómo mostrar productos con los códigos cortos de WooCommerce

Otra forma de ordenar y mostrar productos en una tienda WooCommerce es mediante el uso de shortcodes. Estos shortcodes te permiten definir los parámetros de clasificación por defecto (por ejemplo, por precio, valoración, fecha) y el orden de clasificación: ascendente o descendente.

A continuación se muestra un ejemplo de shortcode de visualización simple. También puedes personalizar la visualización utilizando otros atributos, como las columnas, el límite, la categoría, etc.

[products limit="8" columns="4"]

Aquí tienes otros shortcodes para ordenar y mostrar productos:

• Mostrar productos por categoría: [product_category category=»shirts» limit=»4″ columns=»2″]
• Mostrar productos destacados: [featured_products limit=»6″ columns=»3″]
• Muestra los productos más vendidos: [best_selling_products limit=»5″ columns=»2″]
• Mostrar productos recientes: [recent_products limit=»8″ columns=»4″]
• Mostrar los productos mejor valorados: [sale_products limit=»6″ columns=»3″]

Tomemos el ejemplo del shortcode para mostrar los productos más vendidos.

Para añadir el shortcode [best_selling_products limit=»5″ columns=»2″] para mostrar los productos más vendidos en tu tienda WooCommerce, sigue estos pasos:

• Ve a la pestaña Páginas y selecciona Todas las páginas en tu panel de administración de WordPress (o Entradas, Todas las entradas si quieres añadirlo a una entrada del blog).
• Selecciona la página o entrada donde quieres que estén los productos más vendidos y haz clic en Editar. Elijo la Página de inicio.

• En el editor de WordPress, haz clic en el botón + para añadir un bloque.

• En la barra de búsqueda busca «Shortcode».

• Aquí es donde añades el shortcode. Pega lo siguiente:

[best_selling_products limit=5, columns=2]

💡límite: Determina cuántos de los productos más populares mostrar.

💡columnas: Especifica el número de columnas que se utilizarán para mostrar los productos.

1. Ahora, pulsa el botón Publicar.
2. Navega por la portada de tu sitio web para confirmar que los productos más populares se promocionan correctamente.

Pros y contras de este método

✓ Flexible para mostrar productos o categorías específicas en cualquier página

✓ Altamente personalizable con los parámetros del shortcode

✗ Limitada a la personalización a nivel de página

✗ Puede requerir ajustes de estilo con determinados temas

Método 5: Cómo ordenar y mostrar utilizando plugins

Los plugins de WooCommerce te ofrecen opciones más avanzadas y flexibilidad.

Para instalar y activar los plugins de clasificación de WooCommerce, sigue estos pasos:

• Ve a tu panel de control de WordPress .
• Haz clic en Plugins > Añadir nuevo plugin.

• Busca el plugin que desees.
• Haz clic en Instalar ahora.

• Una vez instalado, haz clic en Activar para activar el plugin.

Para este tutorial, he instalado el plugin gratuito Extra Product Sorting Options para WooCommerce.

Encontrarás múltiples ajustes en el panel de personalización de WooCommerce.

Fuente: WordPress.org

En la página de la tienda, encontrarás más opciones de clasificación.

Aquí tienes algunos plugins populares de Woo para ordenar y mostrar productos:

1. Tabla de productos Woocommerce (premium)

Características:

• Búsqueda, ordenación y filtrado instantáneos
• Listados de productos personalizables
• Decenas de integraciones

Precios

Cuesta 99 $ por un sitio.

2. Catálogo de productos de comercio electrónico (freemium)

Características:

• Comercio electrónico compatible con SEO
• Número ilimitado de productos
• Funcionalidad de arrastrar y soltar

Precios:

Gratis o 49 $/mes

3. Opciones adicionales de ordenación de productos para WooCommerce (gratis)

Características:

• Activar la clasificación alfabética de productos
• Eliminar las opciones de ordenación del núcleo

Precios

Gratis

Pros y contras de este método

✓ Añade opciones avanzadas de ordenación sin necesidad de código

✓ Algunos plugins ofrecen filtros visuales y funcionalidades ampliadas

✗ Puede afectar a la velocidad del sitio

✗ Depende de plugins de terceros, que pueden requerir actualizaciones o correcciones periódicas

Los tiempos de carga lentos acabarán con tu tienda Woocommerce

¿Quién quiere una tienda muerta? Utiliza Breeze, un plugin de caché avanzado en el que confían miles de propietarios de tiendas.

Consigue gratis

Método 6: Cómo añadir ordenación personalizada de productos WooCommerce (Avanzado)

Si crees que los filtros de clasificación disponibles son inadecuados para tus visitantes, también puedes crear opciones de clasificación personalizadas que aparecerán en el menú desplegable de las páginas de la tienda.

Hacerlo te permite ordenar basándote en campos personalizados o metadatos, como la ubicación, los puntos de venta u otros atributos únicos.

Paso 1: Añadir opción de ordenación personalizada

• Añade el siguiente fragmento de código al archivo functions.php de tu tema para añadir una nueva opción de ordenación:

function add_custom_woocommerce_sort_option( $sort_options ) {
    $sort_options['custom_sort_order'] = 'Custom Sorting Order'; // Label for the sorting option
    return $sort_options;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'add_custom_woocommerce_sort_option' );
add_filter( 'woocommerce_catalog_orderby', 'add_custom_woocommerce_sort_option' );

Paso 2: Definir la lógica de clasificación

• Utiliza el siguiente código para implementar la lógica de ordenación personalizada. Sustituye «tu_clave_meta_personalizada» por la metaclave real utilizada para la ordenación:

function ordenar_productos_personalizados( $consulta ) {

function custom_product_sort( $query ) {
    if ( ! is_admin() && $query->is_main_query() && is_shop() || is_product_category() ) { // Ensure this only affects the shop page and product categories
        if ( isset( $_GET['orderby'] ) && $_GET['orderby'] == 'custom_sort_order' ) {
            $query->set( 'meta_key', 'your_custom_meta_key' ); // Replace 'your_custom_meta_key' with your actual meta key
            $query->set( 'orderby', 'meta_value_num' ); // For numeric sorting; use 'meta_value' for text
            $query->set( 'order', 'DESC' ); // Set sorting order (ASC or DESC)
        }
    }
}
add_action( 'woocommerce_product_query', 'custom_product_sort' );

Cómo ordenar y mostrar productos utilizando campos personalizados

Puedes añadir metavalores para hacer filtros de clasificación que contengan también números y texto .

Para ayudarte con los filtros personalizados, añadiré dos opciones más de clasificación: Ordenar por ubicación y Ordenar por puntos de venta.

Nota: Coloca el siguiente código en el archivo functions.php de tu tema hijo.

// Step 1: Modify WooCommerce ordering arguments to support custom fields for sorting
function cw_add_postmeta_ordering_args( $args_sort_cw ) {
    $cw_orderby_value = isset( $_GET['orderby'] ) ? wc_clean( $_GET['orderby'] ) :
        apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );

    switch( $cw_orderby_value ) {
        case 'points_awarded':
            $args_sort_cw['orderby'] = 'meta_value_num';
            $args_sort_cw['order'] = 'DESC'; // Set the sorting order (ASC or DESC)
            $args_sort_cw['meta_key'] = 'points'; // Meta key for 'points'
            break;
        case 'location':
            $args_sort_cw['orderby'] = 'meta_value';
            $args_sort_cw['order'] = 'ASC'; // Set the sorting order (ASC or DESC)
            $args_sort_cw['meta_key'] = 'location'; // Meta key for 'location'
            break;
    }

    return $args_sort_cw;
}
add_filter( 'woocommerce_get_catalog_ordering_args', 'cw_add_postmeta_ordering_args' );

// Step 2: Add new sorting options to WooCommerce dropdown
function cw_add_new_postmeta_orderby( $sortby ) {
    $sortby['location'] = __( 'Sort By Location', 'woocommerce' );
    $sortby['points_awarded'] = __( 'Sort By Sale Point', 'woocommerce' );
    return $sortby;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'cw_add_new_postmeta_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'cw_add_new_postmeta_orderby' );

Después de añadir el código anterior, los filtros de ordenación aparecerán en el menú desplegable de tus páginas de producto. Sin embargo, se muestra en el menú de ordenación, pero también te mostraré cómo mostrar estos valores en páginas de productos individuales.

Cómo mostrar valores de campos personalizados en páginas de productos

Añade el siguiente fragmento de código para mostrar campos como la ubicación y los puntos de venta en las páginas de producto. Del mismo modo, puedes mostrar cualquier campo personalizado en la página de la tienda utilizando el mismo metavalor.

function cw_shop_display() {
    global $product;
    
    // Get custom meta fields for each product
    $location = get_post_meta( $product->get_id(), 'location', true );
    $point_of_sale = get_post_meta( $product->get_id(), 'points', true );

    if ( ! empty( $location ) ) {
        echo '<div class="product-meta"><span class="product-meta-label">Location:</span> ' . esc_html( $location ) . '</div>';
    }
    if ( ! empty( $point_of_sale ) ) {
        echo '<div class="product-meta"><span class="product-meta-label">Sale Points:</span> ' . esc_html( $point_of_sale ) . '</div>';
    }

    if ( $product->get_sku() ) {
        echo '<div class="product-meta">SKU: ' . esc_html( $product->get_sku() ) . '</div>';
    }
}
add_action( 'woocommerce_after_shop_loop_item', 'cw_shop_display', 9 );

• Siempre que un visitante seleccione una opción de ordenación, los valores correspondientes cambiarán en consecuencia. La siguiente captura de pantalla muestra Ordenar por ubicación.

• Lo mismo ocurre con la clasificación por Puntos de Venta.

• Si quieres editar un producto individual, necesitarás establecer un valor para un campo personalizado.

Pros y contras de este método

✓ Altamente personalizable

✓ Te permite ordenar por cualquier campo personalizado (por ejemplo, valoraciones, ubicación)

✓ Adecuado para necesidades de clasificación únicas y visualización más avanzada

✗ Requiere conocimientos de codificación

✗ Puede necesitar actualizaciones periódicas en función de las necesidades de clasificación

¿Preparado para ampliar tu tienda WooCommerce?

Cloudways Autonomous ofrece una solución totalmente gestionada que se autoescala utilizando la tecnología Kubernetes para satisfacer las necesidades de tu tienda. ¡Escala, protege y acelera tu sitio web sin esfuerzo!

Experimenta ahora

Resumen

Mejorar el orden de los productos en una tienda WooCommerce puede cambiar la forma en que los clientes se acercan a tu tienda, lo que se traduce en un aumento de las ventas y de la satisfacción de los clientes.

Desde la sencilla clasificación por defecto hasta la personalización avanzada con shortcodes, campos personalizados o plugins, hay una opción adecuada para cualquier tienda, especialmente cuando se combina con soluciones de alojamiento WooCommerce fiables para garantizar un rendimiento sin problemas.

Siguiendo los métodos descritos en este blog, no sólo optimizarásla navegación de tu tienda, sino que también centrarás la atención en los productos importantes y en los más vendidos, lo que a su vez mejorará la eficacia y el interés de tu tienda.