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.
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()
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.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando...
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.
Si, te permite personalizar 🙂
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.
Hola, veo que hay un plugin que puedes evaluar que tiene esta funcionalidad, revisa: https://wordpress.org/plugins/woo-wolly-one-time-buy/
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 ?
Hola, posiblemente sea algún conflicto de plugins, prueba desactivando uno a uno tus plugins hasta ver cual te causa el problema.
Echo todo el proceso y sigue igual. Me gustaria que lo vieras peronalmente.
Cómo hago para editar el loop de las categorías?
Quiero borrar el product count
Hola, tal vez en tu caso lo más práctico sea simplemente ocultar ese dato con CSS.
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
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.
gracias Jhon, en donde puedo ubicar información sobre ese tema de búsquedas paralelas?
Hola, John! Gracias por este post, muy util.
Pero sigo teniendo un inconveniente:
Yo tengo un bucle en el header de mi website, debajo del boton de Book Now, que muestra el H1 de cada pagina. Hasta ahi todo bien. Luego agregué el Shop y ahí fue cuando el codigo que estaba usando para mi bucle no funcionaba en la pagina del shop, hasta que lo cambié a have_posts (antes tenia is_page) y apareció el H1 correctamente.
Pero ahora ese H1: Surfers Shop me aparece en todas las paginas del shop como categorias y producto individual. Como hago para cambiar por ejemplo en la categoria Surf Stickers que aparezca esa palabra en vez de Surfers Shop? Porque ahi tendría dos H1 diferentes.
Muchas gracias
Hola, actualmente no he visto que se repita esa cabecera en las categorías o en productos individuales. Veo que esta hecho con Elementor, por lo que deberías tener flexibilidad para mostrar esa cabecera en ciertas secciones de tu sitio y en otras no.