El theme StoreFront tiene diferentes secciones en el inicio del sitio, una de ellas es la de productos destacados o recomendados y tiene un orden por defecto de fecha y de manera descendente, en este artículo veremos cómo modificar ese orden por defecto.
Generalidades
Para establecer un producto como destacado puedes hacerlo desde el listado de productos en WooCommerce, desde Productos > Todos los productos.

Los productos marcados como destacados aparecerán en la sección de recomendados del theme storefront.

Cambiando el orden por código
Para cambiar el orden en que se muestra en la sección de productos recomendados, podemos usaremos un Hook, tal como se muestra en el siguiente código:
add_filter('storefront_featured_products_shortcode_args', function($args){
$args['orderby'] = 'title';
$args['order'] = 'asc';
return $args;
});
En el código anterior:
- Usamos el Hook storefront_featured_products_shortcode_args el cual hace referencia a la función anónima
- La función acepta como parámetros una variable $args que es un array asociativo
- Podemos cambiar el orden cambiando la clave orderby del array asociativo, los parámetros disponibles son:
date = Fecha de la publicación del producto
id = ID del producto
popularity = El número de compras
rand = Aleatorio
rating = Valoraciones del producto
title = Título del producto
menu_order = Orden de menú (lo veremos en Orden Personalizado) - Podemos cambiar la dirección cambiando la clave order del array asociativo:
asc = Orden ascendente (por defecto)
desc = Orden descendente
Orden Personalizado
Desde la pantalla de edición de producto, en el tab de Avanzado, tenemos la opción de agregar un orden personalizado para los productos, tal como se muestra en la imagen adjunta.

Luego entonces podemos adaptar el código para usar menu_order, tal como se muestra a continuación:
add_filter('storefront_featured_products_shortcode_args', function($args){
$args['orderby'] = 'menu_order';
$args['order'] = 'asc';
return $args;
});
Conclusión
Tal como hemos visto, Storefront nos permite hacer cambios en el orden de productos destacados y definir incluso un orden personalizado, todo esto a través de un Hook de filtro y usando código.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores:
Se puede mostrar tambien en la pagina de la tienda las variables del producto tal y como lo hace https://koaj.co que muestra el producto digamos “Chaqueta Verde” “Chaqueta Azul” a fuera como dos opciones para dar click pero si le das click entras y ves que estan conectados. Puedes ver opcion de variacion para azul o verde
Hola, si debería poderse mostrar las variantes de un producto en el listado, lo anotaré para revisar esto en un futuro artículo
Hola Jhon,
¿En qué hook habría que poner ese código para que se ejecute siempre que se recargue la tienda?
Quiero que siempre salgan los mismos productos pero al dar de alta nuevos, por defecto se van colocando en primer lugar..
Gracias