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.
É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.