• 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

Modificar el orden de productos destacados en StoreFront

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

funcionalidad mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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.

 
¿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

  • 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
  • Formulario de cotización en WooCommerce sin pluginsFormulario de cotización en WooCommerce sin plugins
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

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

Generador de plugins base para WordPress

Query Monitor para optimizar y depurar tu sitio WordPress

Actualizar el stock de productos usando la API de WooCommerce

Tabla de Contenidos en WordPress sin plugins

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