Plugin de WordPress + WooCommerce
Crea sliders de productos profesionales, totalmente personalizables y con presets listos para usar.
Desarrollado por Clevers Devs
- 🎨 4 presets visuales (personalizables o extendibles).
- 💅 Colores configurables por carrusel (botón, texto, burbuja, borde, fondo, etc.).
- 🛒 Filtros dinámicos: productos destacados, en oferta o por categorías.
- ⚙️ Opciones visuales: autoplay, velocidad, número de slides, flechas, dots.
- 🚀 Caché inteligente y variables CSS por slider.
- 💾 Plantillas sobreescribibles en el tema (estilo WooCommerce).
- 🧩 Totalmente responsive gracias a Slick.js.
- Sube el archivo
.zipdesde “Plugins → Añadir nuevo → Subir plugin”. - Activa el plugin desde el panel de administración.
- Crea un nuevo Product Carousel desde el menú “Product Carousels”.
- Inserta el shortcode donde quieras:
[clevers_carousel id="123"]Cada carrusel permite configurar:
- Diseño (Preset 1-4)
- Número de slides visibles
- Autoplay, dots y arrows
- Filtros de productos (categorías, destacados, ofertas)
- Colores personalizados (variables CSS)
#clevers-product-carousel-123 {
--clevers-primary: #e63946;
--clevers-secondary: #1d3557;
--clevers-button-background: #457b9d;
--clevers-button-text: #ffffff;
}Esta guía está pensada para operación en sitios con catálogos medianos/grandes y para equipos de soporte.
Aunque el carrusel no usa una cola asíncrona dedicada, el “lote” real de trabajo por render es la cantidad de productos que devuelve la consulta.
- Recomendado para producción: 8–24 productos por carrusel.
- Catálogos grandes o hosting compartido: empezar con 8–12.
- Servidor dedicado / buen caché de objetos: 24–36 si el TTFB se mantiene estable.
Buenas prácticas:
- Evita configurar múltiples carruseles en una misma vista con lotes altos al mismo tiempo.
- Prioriza filtros concretos (categoría, destacados, ofertas) para reducir consultas amplias.
- Ajusta el TTL del caché si necesitas reducir recomputación:
add_filter( 'clevers_carousel/cache_ttl', function( $ttl, $carousel_id ) {
// 15 minutos.
return 15 * MINUTE_IN_SECONDS;
}, 10, 2 );El plugin invalida caché cuando cambia producto/términos/meta y también en woocommerce_scheduled_sales.
Para entornos de alto tráfico, evita depender solo del tráfico web para disparar WP-Cron.
Recomendación operativa:
- Desactivar cron interno en
wp-config.php:
define( 'DISABLE_WP_CRON', true );- Configurar cron de sistema cada 5 minutos:
*/5 * * * * php /ruta/a/wordpress/wp-cron.php > /dev/null 2>&1Si tu tienda tiene cambios de precio/ofertas muy frecuentes, puedes bajar a cada 1–2 minutos.
El plugin registra métricas por carrusel (pending, processed, failed, avg_time_ms_per_product, last_error, last_run_at) y las muestra en el panel admin del carrusel.
Checklist rápido de soporte:
failed > 0: revisarlast_errory logs PHP (debug.logo logs del servidor).avg_time_ms_per_productalto: reducir lote, aplicar filtros más específicos y revisar rendimiento de WooCommerce/DB.pendingno baja / render vacío: validar estado de WooCommerce y plantillas sobrescritas en el tema.- Invalidación irregular de datos: confirmar que WP-Cron está ejecutando correctamente y que no está bloqueado por cachés de página agresivos.
Si necesitas inspección técnica puntual, puedes leer las métricas desde meta del post del carrusel (_clv_queue_metrics) para diagnóstico remoto.
Para personalizar la vista sin tocar el plugin:
Copia el archivo desde:
wp-content/plugins/clevers-product-carousel/templates/cards/card-1.php
a tu tema en:
wp-content/themes/tu-tema/clevers-product-carousel/cards/card-1.php
El sistema cargará automáticamente tu versión.
Puedes extender el plugin con los siguientes hooks principales:
clevers_carousel_query_args(filter): modifica los argumentos de consulta de productos antes de ejecutar la query.clevers_carousel_template_path(filter): permite ajustar la ruta relativa de templates dentro detemplates/.clevers_carousel_css_vars(filter): modifica el arreglo de variables CSS por carrusel antes de imprimirlas inline.clevers_carousel_before_render(action): se ejecuta justo antes de renderizar el template del carrusel.clevers_carousel_after_render(action): se ejecuta justo después de renderizar el template del carrusel.
Nota: También siguen disponibles los hooks con formato namespace como
clevers_carousel/query_args,clevers_carousel/beforeyclevers_carousel/after.
Para mantener un historial limpio y auditable:
maindebe aceptar cambios solo vía Pull Request.- Configura el repositorio para permitir únicamente Squash merge o Rebase merge.
- Evita merges tipo
Create a merge commit(incluye merges de ramas remote-tracking). - Marca como requerido el workflow Main History Guard para bloquear pushes directos a
main.
- Configuración del slider en el panel de administración.
- Slider de productos en frontend.
- Colores configurables por carrusel.
- Ejemplos de presets personalizados.
- WordPress 5.8+
- WooCommerce 6.0+
- PHP 7.4 o superior
clevers-product-carousel/
├── clevers-product-carousel.php
├── assets/
│ ├── carousel.css
│ ├── carousel.js
│ ├── block.js
├── templates/
│ ├── carousels/
│ └── cards/
└── languages/
- Enhanced Brizy editor integration.
- Refined JSON import flow.
- Improved frontend fallback behavior.
- Added Gutenberg block support improvements.
- Added REST API endpoints for carousel operations.
- Enhanced admin tools and management UX.
GPLv2 o posterior
https://www.gnu.org/licenses/gpl-2.0.html
Desarrollado con ❤️ por Clevers Devs
¿Quieres contribuir o sugerir mejoras?
Abre un issue o PR en github.com/agenciaingenium/Clevers-Woocommerce-Product-Carousel