[Tutorial] Personalizar el orden de mostrar productos en WooCommerce

WooCommerce ofrece a los clientes la posibilidad de ordenar los productos de la tienda a través del menú “Ordenar por” que aparece generalmente encima del catálogo de la tienda.

Sin embargo, tú como administrador de una tienda WooCommerce puedes controlar de que manera el cliente visualizará en primer momento dichos productos.

Puedes configurar las opciones del menú “Ordenar por”, configurar el orden de visualización por defecto incluso añadir nuevas formas de organizar la manera en que se ven los productos de tu tienda.

En resumen, el post de hoy trata de:

  • Personalizar el orden por defecto de los productos de tu tienda woocommerce
  • Personalizar las opciones que tiene el cliente para ordenar los productos

Los ajustes de configuración para mostrar productos en WooCommerce

Los ajustes de una tienda WooCommerce te permiten configurar la forma en que quieres que se muestren por defecto los productos cuando el cliente acceda al catálogo. Esta es la opción inicial en la que se muestran los productos, pero mediante el menú de “Ordenar por”, el visitante puede seleccionar de que manera quiere visualizar los productos. Entre las opciones que tiene, puede seleccionar estas:

  • Orden predeterminado
  • Ordenar por popularidad
  • Ordenar por puntuación
  • Ordenar por novedades
  • Ordenar por precio: bajo a alto
  • Ordenar por precio: alto a bajo

La opción de “Orden predeterminado” es la opción por defecto y la opción que muestra los productos en el orden predeterminado que está establecido en el listado de productos.

Cambiar el orden en que se muestran los productos por defecto

Al igual que en una tienda WooCommerce el “Orden predeterminado” del menu está establecido por defecto, tu también puedes configurar cual de las 6 opciones quieres que se establezca por defecto para que al acceder al catálogo este sea el orden que se muestre.

Esta opción de configuración la puedes encontrar en los ajustes de productos, en concreto ves a Woocommerce -> Ajustes -> Producto -> Mostrar.

productos por defecto woocommercePuedes hacer lo mismo para modificar el orden por defecto con este código que debes añadir al archivo “functions.php” de tu child theme o tema activo.


/*******
* Cambiar orden por defecto del catálogo de una tienda WooCommerce
*******/
add_filter('woocommerce_default_catalog_orderby', 'custom_default_catalog_orderby');

function custom_default_catalog_orderby() {
return 'date';

}

En lugar de utilizar “date” como criterio a establecer como predeterminado, los que puedes usar son:

  • date-asc  (en este caso es en orden ascendiente)
  • popularity (productos más vendidos)
  • title
  • price
  • price-desc

Mostrar productos destacados en primer lugar

En el listado de productos de tu tienda WooCommerce puedes marcar como destacados aquellos productos que consideras de mayor importancia. Esto se hace pinchando sobre la estrella que hay en la línea del producto justo a continuación de las etiquetas, como puedes verlo en esta imagen.

Poder mostrar primero estos productos cuando se visita el catálogo, es algo que se echa mucho de menos, ya que WooCommerce no viene con esa opción en el listado del menú “Ordenar por”.

Pero no importa, ya que con el pluging gratuito Featured Products First for WooCommerce se puede hacer sin problemas.

Otra forma es con el uso de shortcodes. WooCommerce viene con una variedad de shortcodes que permiten insertar de manera fácil y rápida contenido relacionado con la tienda dentro de cualquier página o post.

Para mostrar tus productos destacados simplemente tienes que utilizar este código corto:

[featured_products per_page=”6″ columns=”4″ orderby=”date” order=”desc”]

Con este código insertado en una página hace que aparezcan los productos destacado en primero lugar, pero…..

¿ y si quieres que sean de una categoría concreta? Usaremos este otro shortcode:

[product_category category=”products” orderby=”title” order=”asc”]

Como puedes ver, este no muestra los destacados primero, sino que ordena por título. Con un poco de código podemos decirle que ordene por destacados primero:

add_filter('woocommerce_shortcode_products_query', 'wh_woocommerce_shortcode_products_orderby');

function wh_woocommerce_shortcode_products_orderby($args)
{

    $standard_array = ['menu_order', 'title', 'date', 'rand', 'id'];
//  print_r($args['orderby']);
    if (isset($args['orderby']) && !in_array($args['orderby'], $standard_array))
    {
        $args['meta_key'] = '_featured';
        $args['orderby'] = 'meta_value_num';
    }
//  print_r($args);
    return $args;
}

Así que lo usaremos de esta forma:

[product_category category=”products” orderby=”_featured” order=”DESC”]

Mostrar productos destacados en una barra lateral con Widgets

Desde Apariencia->Widgets puedes arrastrar el Widget “Productos destacados” (o “Featured Productos”). Según sea tu versión si no tienes ese widget tendrá otro similar pero con más opciones llamado “Productos WooCommerce” que permite mostrar todos los productos, productos destacados o productos rebajados.

productos-destacados-woocommerce-widget

Personalizado el orden para los productos de la tienda

Hasta aquí hemos visto las opciones de configuración que tienes para mostrar el catálogo en tu tienda. Pero podemos personalizar aún más esta característica así como personalizar a nuestro antojo los productos de forma manual, modificar el menú “Ordenar por” o simplemente eliminándolo.

Personalizar manualmente el orden de los productos

Para poder hacer esto tienes que ir al apartado de productos y hacer clic en el botón Ordenar productos en la parte superior.

ordenar manualmente productos woocommerce

Pulsando sobre el botón “ordenar productos” va a permitir que puedas arrastrar y soltar productos para ordenarlos como mejor prefieras. Una vez que organices los productos a tu antojo, ya no podrás restablecer el estado por defecto que tenía la opción “Orden predeterminado” del menú “Ordenar por”.

De esta manera (arrastrando y soltando) asignas a cada producto un valor de organización que puedes encontrar en dentro de cada producto, en datos del producto Avanzado->Orden del menú.

orden del menu producto woocommerce

Personalizar el menu “Ordenar por” de Woocommerce

Puede ocurrirte que quieras quitar alguna opción que tiene el menú “Ordenar por” porque no te resulta útil o por lo que sea, con lo que necesitas personalizar el menu desplegable Ordenar por de WooCommerce.

¿Quieres ver como cambiar las opciones de este menú o saber como quitar alguna de ellas? Vamos a ello con la función woocommerce_catalo_ordering que se encuentra en el archivo /woocommerce/includes/wp-template-functions.php.

En realidad no hay que hacer nada con esta función, simplemente es a modo de información y además solamente te mostrare la parte del código que me interesa que veas para saber cuales son las opciones de Ordenar por del catálogo:


...
$catalog_orderby_options = apply_filters( 'woocommerce_catalog_orderby', array(
'menu_order' => __( 'Default sorting', 'woocommerce' ),
'popularity' => __( 'Sort by popularity', 'woocommerce' ),
'rating'     => __( 'Sort by average rating', 'woocommerce' ),
'date'       => __( 'Sort by newness', 'woocommerce' ),
'price'      => __( 'Sort by price: low to high', 'woocommerce' ),
'price-desc' => __( 'Sort by price: high to low', 'woocommerce' )
) );
...

Fijándose en el array $catalog_orderby_options observas todas las variables correspondientes a cada forma de ordenar los productos: menu_order, popularity, rating, etc…

Ahora bién .. Si quieres quitar opciones del menú “Ordenar por” de WooCommerce tienes que insertar un código en el archivo functions.php para eliminar una o varias de estas opciones:


function woo_personalizar_menu_ordenar ($orderby) {
unset ($orderby ["rating"]);
return $orderby;
}
add_filter ("woocommerce_catalog_orderby", "woo_personalizar_menu_ordenar", 20);

Entonces aquí es donde debes eliminar una o varias de estas opciones indicado en la función unset. En este caso vemos que la opción de orden por puntuación (rating) se desconfigura para así que no aparezca en el menú.

Y así en cualquier otro caso. Por ejemplo, ahora si queremos eliminar las opciones de popularidad (popularity) y de puntuación (rating) tenemos que escribir el siguiente código en el fichero functions.php.


function woo_personalizar_menu_ordenar ($orderby) {
unset ($orderby ["rating"]);
unset ($orderby ["popularity"]);
return $orderby;
}
add_filter ("woocommerce_catalog_orderby", "woo_personalizar_menu_ordenar", 20);

Añadir opciones al menú “Ordenar por”

Si por lo contrario quieres añadir alguna opción más, como por ejemplo la de ordenar de forma aleatoria tus productos, se puede hacer con el siguiente código:


add_filter( 'woocommerce_get_catalog_ordering_args', 'custom_woocommerce_get_catalog_ordering_args' );
function custom_woocommerce_get_catalog_ordering_args( $args ) {
$orderby_value = isset( $_GET['orderby'] ) ? woocommerce_clean( $_GET['orderby'] ) : apply_filters( 'woocommerce_default_catalog_orderby', get_option( 'woocommerce_default_catalog_orderby' ) );
if ( 'random_list' == $orderby_value ) {
$args['orderby'] = 'rand';
$args['order'] = '';
$args['meta_key'] = '';
}
return $args;
}
add_filter( 'woocommerce_default_catalog_orderby_options', 'custom_woocommerce_catalog_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'custom_woocommerce_catalog_orderby' );
function custom_woocommerce_catalog_orderby( $sortby ) {
$sortby['random_list'] = 'Random';
return $sortby;
}

Eliminar el menú desplegable “Ordenar por”

Esta no es una de las elecciones más comunes y no hay una forma fácil de hacer esto. Las plantillas de WooCommerce dan forma a todo el aspecto de una tienda y si el theme activo tiene soporte para WooCommerce, estas plantillas van incorporadas en el tema, y por defecto el menú desplegable “Ordenar por” esta visible.

Si quieres ocultar el menú de Ordenar por debes hacerlo añadiendo un código al archivo functions.php


remove_action( 'woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30 );

g


Fundador de este blog y emprendedor digital. Apasionado del networking y el desarrollo en Internet; junto con mi familia y la gente que me rodea es lo que me hace saltar de la cama cada mañana movido por el deseo.

Deja un comentario

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