• 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 el orden de productos destacados en StoreFront

Modificar el orden de productos destacados en StoreFront

[ 21 septiembre 2019 ] [ Actualizado: 21 agosto 2020 ]
[ Autor: Jhon Marreros Guzmán ][ Plugins - Intermedio] [ ]

funcionalidad mejoras

Suscríbete a DecodeCMS:  

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.

Marcar producto como producto destacado

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

Muestra productos recomendados Storefront ordenados por defecto

Si quieres aprender cómo configurar el theme Storefront, puedes revisar el siguiente enlace

 

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;
});
Puedes colocar este código en el archivo functions.php de tu child-theme o usando algún plugin de Snippets

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.

Pantalla para configurar orden personalizado

 
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.

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Páginas en ancho completo en el tema StorefrontPáginas en ancho completo en el tema Storefront
  • Modificar desplegable de orden de productos en WooCommerceModificar desplegable de orden de productos en WooCommerce
  • Agregar un Slider al tema StorefrontAgregar un Slider al tema Storefront
  • Configurar Akismet WordPressConfigurar Akismet para evitar el spam
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 3,67 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. PHP No Experts

    27 febrero, 2020

    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

    • Jhon Marreros Guzmán

      29 febrero, 2020

      Hola, si debería poderse mostrar las variantes de un producto en el listado, lo anotaré para revisar esto en un futuro artículo

  2. David

    26 enero, 2021

    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

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

*

* Gravatar habilitado

Barra lateral principal

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

Omnisend
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

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

Populares

Deshabilitar la REST API de WordPress

Crear un paquete Quickstart en WordPress

Cómo usar la REST API de WooCommerce

Crear un Child Theme en WordPress de manera correcta

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