Son ya varias las consultas que he recibido acerca de cómo quitar el menú desplegable “Ordenar por” de WooCommerce, ya que no se puede hacer mediante ninguna opción.
En esta entrada veremos cómo hacerlo mediante código. Si prefieres utilizar un plugin (que siempre es más rápido y sencillo) puedes echarle un ojo a éste:
Ya sabes a qué menú me refiero. A éste:
Sí, ese menú que aparece en las pantallas de archivo de WooCommerce (tienda, categorías, etiquetas, búsquedas…) y que da varias opciones para ordenar los productos:
- Orden predeterminado
- Ordenar por popularidad
- Ordenar por puntuación
- Ordenar por novedades
- Ordenar por precio: bajo a alto
- Ordenar por precio: alto a bajo
En este vídeo vamos a ver dos formas de hacerlo por código, una mediante CSS y otra haciendo uso de los hooks de WooCommerce.
La más recomendable es la segunda, aunque aquí te muestro las dos. Después del vídeo te dejo todos los códigos utilizados y los plugins que menciono en él. ¡Dentro vídeo!
Ya has visto qué sencillo es. En este artículo puedes ver cómo personalizar las opciones de este menú, si no quieres quitarlo por completo sino eliminar alguno de los criterios de ordenación.
A continuación te dejo los recursos mencionados en el vídeo.
¿Estás construyendo tu tienda online o eres implementador WordPress?
¿Necesitas plugins de calidad y con soporte para implementar funcionalidades concretas?
Consigue todos los plugins a la venta en la sección de plugins de esta web y todos los que siga añadiendo. Acceso a los 96 plugins (y subiendo) con soporte directo del desarrollador, actualizaciones y uso ilimitado: úsalos en tantas webs como lo necesites.
Éste es el código CSS para aplicar al estilo .orderby, que es el que utiliza el menú desplegable:
.orderby {
display:none;
}
Este código lo puedes añadir al final del style.css de tu plantilla, aunque así lo puedes perder en si el tema se actualiza o si decides cambiarlo. Para ello deberías utilizar un tema hijo o, como menciono en el vídeo, un plugin para estilos personalizados. Éste es el que yo suelo usar y que ves en el vídeo.
Como te explico en el vídeo, esta no es la forma más recomendable de hacerlo ya que, aunque el menú se oculte mediante estilos, la función que lo crea se sigue ejecutando. Digamos que es la opción “chapucera”.
La otra forma es mediante una sencilla función PHP. Esta función la puedes añadir al final del archivo functions.php, aunque no es muy recomendable. En este artículo explico cuál es la mejor forma de incluir tu código personalizado en WordPress y cómo hacerlo.
La función a utilizar es ésta:
remove_action ('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);
Y ya está. Ya lo ves, hacerlo es muy muy fácil, tanto de una forma como de otra.
Como siempre, si tienes cualquier duda relativa a este tema o a cualquier otro sobre WordPress o WooCommerce, me tienes a tu disposición.
Hola Enrique!
Estupendo post, llevaba tiempo buscando información para hacer esto y he descubierto tu blog y he comenzado a seguirte en youtube, porque tienes consejos muy interesantes, que no quiero perder de vista.
Respecto a este post, me gusta mucho la parte de la función ya que intento no meter demasiados plugins (ya tengo más de la cuenta, creo).
Quisiera saber si tienes algún vídeo o post explicando cómo quitar también el texto de “mostrando productos…” para así dejar limpia esa zona. He estado mirando y al menos en youtube no tienes.
Al no ser programador, me cuesta dar con la llamada al a función y no consigo dar con la clave.
Estoy montando mi tienda, que consta de dos servicios: ilustrar portadas e ilustraciones. Aprovecho el mensaje para otra duda. ¿Cómo puedo poner que se muestren 2 columnas de productos? He probado varios códigos pero no me funcionan.
Uno de ellos es este:
——–add_filter( ‘loop_shop_columns’, ‘woocommerce_custom_loop_shop_columns’, 20 );
function woocommerce_custom_loop_shop_columns( $cols ) { return 2; }——-
Un saludo y Gracias por tu tiempo.
Edu.
Por cierto, probé el plugin Woocommerce customizer y no me funciona. Uso un theme child de Genesis.
Por si te es útil esta info.
Saludos!
Edu.
Hola Eduardo
Gracias por tu comentario, me alegra que los contenidos te resulten útiles 🙂
El contador de productos (Mostrando … de … resultados) lo puedes quitar fácilmente mediante un poco de CSS, ya que no tiene un hook asociado:
p.woocommerce-result-count {display:none;}En cuanto a las columnas por página estás usando el filtro correcto. Si no te funciona debe ser porque tu child theme está poniendo el suyo propio (algunos diseñadores de themes hacen este tipo de cosas para ajustar bien el layout de la plantilla), y su función está machacando la tuya. Prueba a aumentar la prioridad para retrasar la ejecución de tu filtro.
Un saludo.
No me había llegado ningún correo de aviso y acabo de ver la respuesta.
Muchas gracias Enrique, ya lo he puesto en práctica.
Respecto a las dos columnas, no he conseguido que funcione, he probado a aumentar la prioridad, pero no hay manera.
Saludos
Infinitas gracias, de mucha ayuda
Hola Enrique!
¡Qué maravilla tu blog y tu canal de Youtube…ya me he suscrito sin dudar! porque menuda cantidad de información valiosa y bien explicada…..
Este post de ocultar la funcionalidad de “ordenar por” me ha sido muy útil, ¡gracias! pero tengo una pregunta a mayores>> Woocommerce nos da a elegir entre 3 opciones para mostrar en la portada de la tienda: o mostrar galeria de productos o mostrar categorías o mostrar categorias+productos……pues bien, yo no querria que se mostrara ninguna de estas tres opciones por defecto en la portada de mi tienda, porque lo que quiero es una portada personaliza con una estructura “propuesta de valor + novedades (es una categoria) + ventajas de comprar en mi tienda + ofertas (es una categoria)” y un menú secundario en el que sí se mostrasen todas las las categorías y subcategorías…..
Este diseño de mi portada ya está hecho , utilizando un contructor visual (visual composer) pero no sé cómo hacer desaparecer a continuación la galería por defecto de productos o categorias…. ¿Hay alguna forma?
Muchísimas gracias de antemano y Enhabuena por tu gran trabajo!
Hola Rita
Me alegra que mis contenidos te sean útiles, gracias por tu comentario 🙂
Puedes establecer como frontpage una página personalizada estableciéndola en Ajustes > Lectura > Tu portada muestra
Un saludo.
La verdad esta solución no me sirve porque seguramente No me expliqué bien, y es que mi web antes no tenía tienda (era web+blog) y ahora añadí una nueva pestaña al menú principal que es la tienda, porque no voy a tener mucho productos a la vez y me llega.
Entonces ya tengo una portada principal que es la de INICIO de mi web, y que ya está personalizada, tengo una página de entradas que es el BLOG, y tengo otra página que es la TIENDA y es en esa página en la que querría eliminar la galeria de productos o galeria de categorias o ambas que por defecto me coloca Woocommerce en esta página y no sé como por el momento…
De todas formas muchas gracias por tu pronta respuesta!!! Sigo devorando los contenidos de tu blog y canal de Youtube 😉
Saludos,
¡Ah, bueno! Ya, pero, ¿y por qué hacerlo tan complicado? Construye una página de tienda como a ti te guste y luego la pones en el menú con el título Tienda 🙂 Sólo te quedaría hacer una redirección de la página de la tienda a esta otra, para que todos los enlaces y botones que establece WooCommerce hacia la tienda acaben ahí.
Un saludo.
Hola Enrique,
muy interesante tu página la he descubierto recientemente. No se porqué esta solución a mi no me funciona, es muy sencilla pero me sigue apareciendo el menú “ordenar por… ” en la tienda.
Instalé el plugin Code snippet, lo activé y luego copié y pegué la línea de código.
Qué puede estar pasando?
Hola Laura
Imposible saberlo sin revisar todo, pueden ser mil cosas. ¿Te aseguraste de activar el snippet (por defecto el botón guarda pero mantiene desactivado)?
Un saludo
Hola a todos…
Me pasa lo mismo… quisiera sacar “Visualización De La Página De La Tienda” o sea que no me muestre ningún producto…
Gracias.
Encontré la manera!!
Siguiendo la misma lógica, busqué inspeccionar y decía
No se encontraron productos que concuerden con la selección.
Entonces modifiqué el Style.css
puse lo siguiente
.woocommerce-info {
display:none;
}
jajaja ya me siento todo un hacker… son mis primeras líneas de código que se me ocurren…
Gracias Enrique!! ídolo!!!
hola.
como puedo hacer que me muestre todas las formas de ordenar los productos, ya que el botón no despliega todas las opciones
Hola Mario
Por defecto las muestra todas. Si no es así, debe haber algo limitándolo, tendrás que ver qué es (un plugin, una función en tu plantilla…)
Un saludo
Hola me ha funcionado a la perfección el código, sin embargo me gustaría saber si existe alguna manera de quitar tambien el “Mostrando todos los resultados” de la parte superior izquierda
Muchas Gracias
Hola Diego
Sí, puedes hacerlo con CSS aplicando un display none a la clase woocommerce-result-count
Un saludo
Hola, muchísimas gracias por tu post. Me ha funcionado lo único que la flecha del desplegable me sigue apareciendo. ¿Cómo podría quitarla?
Hola Teresa
Puedes ocultarla con CSS.
Un saludo
Hola Enrique, pregunta rapidita. He creado un plugin personalizado para agregar el botón “vaciar carrito” y ha funcionado.
ahora he creado un segundo plugin para quitar “ordenar por” y si bien me lo ha dejado instalar, aún aparece en la tienda “ordenar por”
¿Que he hecho mal?
hice esto:
<?php
/*
Plugin Name: 0 quitar ordenar por de la tienda
Description: quitar ordenar por
Version: 0.1
Author: mariano
*/
remove_action ('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);
Saludos!