• 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 / Personalizar el Loop de WooCommerce

Personalizar el Loop de WooCommerce

Personalizar el Loop de WooCommerce

[ 8 octubre 2020 ] [ Autor: Jhon Marreros Guzmán ][ Plugins - Avanzado] [ ]

funcionalidad woocommerce

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

En un artículo anterior habíamos visto qué es el loop de WordPress, en este artículo usaremos como base el Loop de WordPress para construir un Loop personalizado para productos de WooCommerce.

 

Resultado final

Al final obtendremos algo similar a lo que se muestra en la siguiente imagen, incluye los filtros de ordenación, datos de cantidad de productos, paginación y la lista de productos.

filtros paginacion y lista de productos del loop de WooCommerce

 

Generalidades

WooCommerce tienes shortcodes predeterminados que nos pueden ayudar a recuperar productos, sin embargo modificar el Loop de WooCommerce a través de código nos da mucho más flexibilidad para realizar cambios.

 

Loop personalizado de WooCommerce

El siguiente código muestra todos los productos de la tienda en un loop personalizado, en base a este loop puedes hacer las modificaciones que desees pasándole los argumentos a la función wc_get_products()

Este código esta basado en el código publicado en este gist

En el código anterior:

  • Primero comprobamos que exista WooCommerce a través de la comprobación de una función.
  • Luego recuperamos y establecemos variables para la paginación y el ordenamiento.
  • Construimos la consultas, definiendo el array de argumentos que usará la función wc_get_products()
  • Esta consulta sólo devuelve los IDs, en base a estos valores construiremos el bucle.
  • Establecemos las variables globales para el bucle usando la función wc_set_loop_prop()
  • Construimos el bucle usando la estructura for, en cada parte respetamos los Hooks de WooCommerce.
  • Dentro del bucle usamos setup_postdata() para establecer el post actual.
  • Además dentro del bucle llamamos a un archivo de plantilla para mostrar los productos.
  • Finalmente usamos las funciones y Hooks de WooCommerce que indican la finalización del bucle.

 

Conclusión

Si deseas personalizar el loop o bucle de WooCommerce, es mejor usar las propias funciones de WooCommerce, en lugar de usar funciones genéricas del loop de WordPress para recuperar el listado de productos. Con el loop de WooCommerce tenemos la flexibilidad de hacer las modificaciones a los productos que se muestran y la información que los acompaña.

 
¿Aún con dudas?, en el siguiente video explico cómo usar este loop de WooCommerce a través de un ejemplo.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Loop de WordPress¿Qué es el Loop de WordPress?
  • Mostrar categorías y etiquetas en lista de productos WooCommerceMostrar categorías y etiquetas en lista de productos WooCommerce
  • Configurar AMP en WordPressConfigurar AMP en WordPress
  • Cómo eliminar todos los productos de WooCommerceCómo eliminar todos los productos de WooCommerce
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (2 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Diseño web

    13 octubre, 2020

    Hola, muy bueno el articulo e interesante para que el diseño o aspecto de la tienda sea más fácil y agradable.

    Muchas gracias.

    • Jhon Marreros Guzmán

      14 octubre, 2020

      Si, te permite personalizar 🙂

  2. Hernan

    16 octubre, 2020

    Hola John, excelente tus tutoriales. Quisiera consultarte como puedo realizar lo siguiente: Necesito deshabilitar la compra de un producto de woocommerce si el usuario que está logueado en ese momento ya ha comprado ese producto anteriormente. Encontré que existe una función (wc_customer_bought_product) que verifica si ya se ha comprado un producto en particular, pero no logro crear ese action para quitar ese producto. Agradezco de antemano.

    • Jhon Marreros Guzmán

      19 octubre, 2020

      Hola, veo que hay un plugin que puedes evaluar que tiene esta funcionalidad, revisa: https://wordpress.org/plugins/woo-wolly-one-time-buy/

  3. leo

    30 octubre, 2020

    Acabo de atualizar Wordpres .
    Cuando subo una plubicacion en la tienda de worcomerce hay un problema. Se queda cargando la página. En cambio las demas publicacion se ven. Me puedes ayudar ?

    • Jhon Marreros Guzmán

      30 octubre, 2020

      Hola, posiblemente sea algún conflicto de plugins, prueba desactivando uno a uno tus plugins hasta ver cual te causa el problema.

      • vetoriano

        31 octubre, 2020

        Echo todo el proceso y sigue igual. Me gustaria que lo vieras peronalmente.

  4. Matias

    9 febrero, 2021

    Cómo hago para editar el loop de las categorías?

    Quiero borrar el product count

    • Jhon Marreros Guzmán

      10 febrero, 2021

      Hola, tal vez en tu caso lo más práctico sea simplemente ocultar ese dato con CSS.

  5. andri

    3 junio, 2022

    Saludos es posible solo mostrar las categorias finales donde se encuentran los productos buscados
    ejemplo
    tengo 2 cat padre, 4 categorias hijos y 8 categorias nietos. un productos solo pertenece a una categoría nieto, entonces supongamos busco mango y los mangos aparecen como ensalada de mango [categoría ensalada] y pulpa de mango [categoria pulpas] entonces debe mostrar “Ensalada y pulpa” como resultado de la busqueda , sin motrar los productos de modo que luego el usuario haga clic en alguna de las categorias y alli si se muestren los productos

    • Jhon Marreros Guzmán

      3 junio, 2022

      Hola, usualmente la búsqueda se hace directamente a los productos por accesibilidad, es decir mostrar el resultado lo más rápido y no las categorías. Lo que comentas es algo muy particular y tendría posiblemente que definirse una búsqueda personalizada paralela.

  6. andri

    3 junio, 2022

    gracias Jhon, en donde puedo ubicar información sobre ese tema de búsquedas paralelas?

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

Agregar descripción en ítems de menú WordPress

Apuntar el dominio principal de un sitio WordPress a una carpeta

Tabs a acordeón en página de productos de WooCommerce

Eliminar Shortcodes que no usas en WordPress

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