• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Plugins / Modificar desplegable de orden de productos en WooCommerce

Modificar desplegable de orden de productos en WooCommerce

Modificar desplegable de orden de productos en WooCommerce

[ 10 septiembre 2019 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Avanzado] [ ]

funcionalidad mejoras woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

WooCommerce por defecto ofrece un desplegable para ordenar una lista de productos, en este artículo veremos cómo agregar o quitar elementos de ese desplegable de orden de productos.

 

Resultado Final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen:

Modificación de la lista de orden de productos en WooCommerce

 

Generalidades

Para los ítems que aparecen en la lista de ordenamiento, se puede definir un orden predeterminado desde: Apariencia > Personalizar > WooCommerce > Catálogo de productos > Orden de productos por defecto, sin embargo desde esta pantalla de configuración no podemos eliminar o agregar nuevos elementos.

Establecer orden por defecto desde el Personalizador de theme en la opción WooCommerce

 

Eliminando elementos de la lista de ordenamiento

Para eliminar elementos que aparecen en la lista de ordenación de WooCommerce, primero tienes que identificar la clave del elemento que quieres eliminar, las claves disponibles son:

  • menu_order => Orden predeterminado
  • popularity => Ordenar por popularidad
  • rating => Ordenar por calificación media
  • date => Ordenar por las últimas
  • price => Ordenar por precio: bajo a alto
  • price-desc => Ordenar por precio: alto a bajo

 
Luego tienes que usar un código similar al que se muestra a continuación, cambiando las claves en el array $sortby.

add_filter( 'woocommerce_default_catalog_orderby_options', 'dcms_custom_woocommerce_items_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'dcms_custom_woocommerce_items_orderby' );
function dcms_custom_woocommerce_items_orderby( $sortby ) {
    unset($sortby['price']);
    unset($sortby['price-desc']);

    return $sortby;
}

En el código anterior:

  • Usamos los Hooks de filtro: woocommerce_default_catalog_orderby_options y woocommerce_catalog_orderby,
  • El primero de ellos tiene efecto en la configuración en el backend del sitio, la otra tiene efecto en el frontend
  • Ambos Hooks hacen referencia a la misma función dcms_custom_woocommerce_items_orderby
  • La función acepta como parámetro una variable que hemos llamado $sortby, la cual es un array asociativo
  • Con la función unset() eliminamos el elemento del array
  • Finalmente simplemente devolvemos la variable $sortby

 

Agregando elementos a la lista de ordenamiento

Para agregar elementos a la lista de ordenamiento, igualmente hacemos referencia a los Hooks, el siguiente ejemplo muestra cómo agregar un nuevo ítem de ordenamiento aleatorio.

add_filter( 'woocommerce_get_catalog_ordering_args', 'dcms_custom_woocommerce_catalog_ordering_args' );
function dcms_custom_woocommerce_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', 'dcms_custom_woocommerce_items_orderby' );
add_filter( 'woocommerce_catalog_orderby', 'dcms_custom_woocommerce_items_orderby' );
function dcms_custom_woocommerce_items_orderby( $sortby ) {
    $sortby['random_list'] = 'Aleatorio';
    //unset($sortby['price']);
    //unset($sortby['price-desc']);
    return $sortby;
}

En el código anterior:

  • Primero usamos el Hook de filtro woocommerce_get_catalog_ordering_args, que hace referencia a la función dcms_custom_woocommerce_catalog_ordering_args
  • Dentro de la función aceptamos una variable $args como parámetro
  • Definimos la variable $orderby_value de acuerdo a si tenemos un parámetro de ordenamiento o no en la url
  • Si el parámetro es igual al que hemos definido entonces modificamos el array asociativo $args
  • Agregamos un nuevo ordenamiento rand y que no tiene influencia en la dirección del ordenamiento ni en los meta keys
  • Finalmente los Hooks de filtro woocommerce_default_catalog_orderby_options y woocommerce_catalog_orderby son usados para mostrar el nuevo elemento tanto en la pantalla de configuración del backend como en el frontend, ambos hacen referencia a la función dcms_custom_woocommerce_items_orderby
  • Dentro de la función dcms_custom_woocommerce_items_orderby se agrega el elemento nuevo al array asociativo
  • Finalmente se devuelve la variable $sortby modificada

 
Es posible también ordenar por campos que son metadatos, usando meta_value_num y el valor del campo en meta_key, por ejemplo para ordenar por precio:

$args['orderby'] = 'meta_value_num';
$args['order'] = 'ASC';
$args['meta_key'] = '_regular_price';

 

Conclusión

Tal como hemos visto, WooCommerce es bastante flexible y podemos eliminar elementos de la lista de ordenación y también agregar nuevos elementos de ordenación de manera simple a través de código usando los Hooks de filtro.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
  • Agrupar los resultados de búsqueda en WordPressAgrupar los resultados de búsqueda en WordPress
  • tipos de complementos de WordPress5 tipos de complementos de WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,80 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Carlos

    14 junio, 2020

    excelente información, sabrás como hacer este filtrado pero en las entras de blog?
    Espero tu respuesta, Saludos!

    • Jhon Marreros Guzmán

      14 junio, 2020

      Hola Caros por defecto no existe un filtrado similar en las entradas de blog, podrías evaluar usar un plugin, tomo nota para revisar y evaluar un posible artículo sobre esto. Saludos.

  2. carlos

    15 julio, 2020

    como podria poner o agregar mas seecciones y tambien quitar al mismo tiempo?

    • Jhon Marreros Guzmán

      16 julio, 2020

      Hola, supongo que te refieres al desplegable, sino te ha quedado claro revisa el video ya que es justo de lo que se habla en este artículo.

  3. carlos

    16 julio, 2020

    si, me quedo claro pero quiero agregar dos forma de ordenar y no acepta si no una cuando agrego otra sale error

  4. deb Villanueva

    2 septiembre, 2020

    Buenisimo, tengo una duda, si en este caso lo que yo quiero es los elementos que agregue al menú sean las categorias y subcategorias de los productos, ¿es posible?, estuve navegando en las bases de datos y no encontre en ningun lado las meta-keys de las categorías, sabes de alguna forma?

    • Jhon Marreros Guzmán

      3 septiembre, 2020

      Hola, en tu caso mejor evalúa usar algún plugin que te cree un widget que muestre categorías y subcategorías, comentarte que las categrías son taxonomías, no estén como campos de meta-keys, puedes buscar en la tabla wp_terms

  5. HVG

    10 octubre, 2020

    hola, Jhon. Acabo de descubrir tu web y voy a empezar a seguirte porque me interesa mucho el contenido que subes! Estaba buscando información sobre si es posible mover de lugar el dropdown de “ordenar por” del que hablas en este tutorial. Utilizo Woocommerce con la plantilla Neve, y por defecto, solo aparece en las páginas de archivo de productos en el lado superior derecho. Si por ejemplo, quisiera poner el desplegable de “ordenar por” en la barra lateral (o en cualquier otro lugar), cómo podría hacerlo? He pensado en que posiblemente existe algún shortcode que me permita pegarlo en el lugar que yo quiera pero he buscado por Google y no hay manera.
    Gracias de antemano.

    • Jhon Marreros Guzmán

      12 octubre, 2020

      Hola, efectivamente este desplegable es parte del bucle de WooCommerce, es decir se muestra como parte de una lista de productos. Podría ser complicado aislar esta funcionalidad del bucle. Si simplemente quieres cambiarlo de posición cuando ya se muestra el bucle podría ser más factible, podrías evaluar moverlo con javascript a alguna otra posición de tu theme.

  6. Isaac

    14 octubre, 2021

    como menciona Carlos, este filtrado pero en las entras de blog?

  7. Daniel

    22 mayo, 2022

    Hola Jhon. Tengo una duda de un reto que me pusieron.

    Tengo un woocommerce donde a los productos que no tienen una imagen aún, se les sube una imagen no disponible. Siempre la misma imagen osea tienen todos la misma URl de la imagen.

    El reto es que cuando se organizan en la tienda con el desplegable de orden, con cualquiera de las opciones, precio, fecha, por defecto, etc.. necesito poner los productos que tienen la imagen de “imagen no disponible” siempre al final de la lista. En cualquier orden que esos productos que tienen esa imagen queden al final.

    Tienes idea de cómo hacerlo? Te agradecería mucho si me pasas la función que necesito poner.

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar código a tu sitio sin usar functions.php

Crear un Widget para el dashboard de WordPress

Personalizar el Loop de WooCommerce

Propiedades avanzadas de menú en WordPress

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados