E-commerce Tools
Suite completa de herramientas WooCommerce: 25+ elementos de Bricks, 4 grupos de etiquetas dinámicas, 7 queries personalizadas, 30+ snippets y tokens de estilo. Todo activable individualmente.
Visión general
El módulo E-commerce de FlowKit permite construir una tienda WooCommerce completamente personalizada con Bricks Builder, reemplazando las plantillas PHP de WooCommerce por elementos visuales configurables.
El módulo se gestiona desde FlowKit > E-commerce y se organiza en 5 pestañas:
| Pestaña | Contenido |
|---|---|
| Features | Funcionalidades AJAX (minicarrito, notificaciones checkout) |
| Snippets | 30+ snippets PHP activables individualmente |
| Elementos | 25+ elementos de Bricks para carrito, checkout, pedidos y cuenta |
| Etiquetas y Queries | Etiquetas dinámicas {ft_*} y queries para loops de Bricks |
| Tokens de Estilo | Variables CSS para notificaciones de WooCommerce |
Funcionalidades AJAX
Mejoras de rendimiento y UX que añaden comportamiento AJAX a WooCommerce:
| Feature | Descripción | Default |
|---|---|---|
| Minicarrito AJAX | Funcionalidades AJAX del minicarrito y offcanvas: añadir productos, actualizar cantidades, eliminar items sin recargar la página | Activo |
| Centralizar Notificaciones Checkout | Mueve automáticamente las notificaciones de WooCommerce (errores, mensajes, info) al contenedor de Bricks cuando se aplica un cupón en el checkout | Activo |
Elementos de Bricks
25+ elementos personalizados de Bricks Builder para construir cada página de WooCommerce de forma visual. Cada elemento es activable individualmente desde el panel. Aparecen en Bricks bajo la categoría "WooCommerce".
Elementos: Página de Carrito
Elementos para construir una página de carrito completamente personalizada con soporte AJAX.
| Elemento | Descripción |
|---|---|
| Cart Subtotal | Muestra el subtotal del carrito |
| Cart Order Total | Total del pedido con desglose completo |
| Cart Shipping Totals | Totales de envío desglosados por método |
| Cart Shipping Calculator | Calculadora de envío interactiva integrada |
| Cart Coupons | Lista de cupones aplicados al carrito |
| Cart AJAX Coupon | Formulario de cupón con aplicación AJAX sin recarga de página |
| Cart Proceed to Checkout | Botón para proceder al checkout |
Elementos: Página de Checkout
Elementos para construir un flujo de pago completo, campo a campo.
| Elemento | Descripción |
|---|---|
| Checkout Billing Details | Campos de facturación del cliente |
| Checkout Shipping Details | Campos de dirección de envío |
| Checkout Shipping Methods | Selector de métodos de envío disponibles |
| Checkout Coupon Form | Formulario de cupones en el checkout |
| Checkout Create Account | Opción de crear cuenta durante el checkout |
| Checkout Payment Methods | Métodos de pago disponibles (tarjeta, transferencia, etc.) |
| Checkout Submit Button | Botón de envío/confirmación del pedido |
| Express Payment | Pagos express: Stripe, Google Pay, Apple Pay |
| Checkout Terms & Conditions | Checkbox de aceptación de términos y condiciones |
| Checkout Order Details | Resumen del pedido con productos y totales |
| Checkout Order Note | Campo de texto para nota del pedido |
Elementos: Página de Pedidos
Elementos para mostrar información detallada de pedidos en páginas de confirmación (Thank You) y Mi Cuenta.
| Elemento | Descripción |
|---|---|
| Order Header | Cabecera con número de pedido, fecha y estado |
| Order Summary | Resumen con subtotal, impuestos, envío, descuentos y total. Cada línea es activable/desactivable |
| Order Items Loop | Contenedor wrapper para query loop de items del pedido |
| Order Product Thumbnails | Miniaturas de productos con cantidad máxima, dimensiones y clases Tailwind configurables |
| Order Addresses | Direcciones de facturación y envío del pedido con opciones de formato |
Elementos: Página Mi Cuenta
| Elemento | Descripción |
|---|---|
| Account Addresses | Gestión de direcciones de cuenta (facturación y envío) con enlaces de edición |
Elementos: Loops de Producto
| Elemento | Descripción |
|---|---|
| Simple Add to Cart | Botón de añadir al carrito optimizado para loops de productos, con clases CSS configurables en el botón |
Guía: qué va en cada página
Referencia rápida de qué elementos, queries y etiquetas usar en cada página de WooCommerce.
Página de Carrito
Elementos: Cart Subtotal, Cart Order Total, Cart Shipping Totals, Cart Shipping Calculator, Cart Coupons, Cart AJAX Coupon, Cart Proceed to Checkout
Etiquetas útiles: {ft_cart_subtotal}, {ft_cart_total}, {ft_cart_item_count}, {ft_cart_items_count}, {ft_free_shipping_remaining}
Snippets recomendados: Auto-update cart, Free shipping remaining, Cart item count
Página de Checkout
Elementos: Checkout Billing Details, Checkout Shipping Details, Checkout Shipping Methods, Checkout Coupon Form, Checkout Create Account, Checkout Payment Methods, Checkout Submit Button, Express Payment, Checkout Terms & Conditions, Checkout Order Details, Checkout Order Note
Etiquetas útiles: Etiquetas de checkout del grupo {ft_checkout_*}
Feature recomendado: Centralizar Notificaciones Checkout
Página Thank You (confirmación)
Elementos: Order Header, Order Summary, Order Items Loop, Order Product Thumbnails, Order Addresses
Queries: Pedido actual, Items del pedido
Etiquetas útiles: {ft_order_number}, {ft_order_date}, {ft_order_status}, {ft_order_total}
Snippets: Custom thank-you redirect (si necesitas redirigir a una página personalizada)
Página Mi Cuenta
Elementos: Account Addresses
Queries: Pedidos del usuario
Etiquetas útiles: {ft_customer_first_name}, {ft_customer_email}, {ft_customer_total_orders}, {ft_customer_total_spent}
Snippets recomendados: Customer data in My Account, Last order in dashboard, Wishlist endpoint, My Account endpoint title
Página de Producto / Shop
Elementos: Simple Add to Cart (en loops)
Queries: Productos comprados, Productos vistos recientemente, Reseñas del producto, Reseñas de todos los productos
Etiquetas útiles: Etiquetas del grupo {ft_product_*}
Snippets recomendados: "New" badge, Gallery image IDs, First gallery image, Check if Simple product
Etiquetas dinámicas WooCommerce
4 grupos de etiquetas dinámicas con prefijo {ft_*}, cada uno activable independientemente desde el panel. Las etiquetas se usan directamente en campos de texto de Bricks Builder.
Grupo: Carrito
Etiquetas relacionadas con el carrito de compras. Datos del carrito actual del usuario.
| Etiqueta | Descripción |
|---|---|
| {ft_cart_subtotal} | Subtotal del carrito (sin envío ni impuestos) |
| {ft_cart_total} | Total del carrito (con envío e impuestos) |
| {ft_cart_item_count} | Número total de unidades en el carrito |
| {ft_cart_items_count} | Número de productos únicos en el carrito |
| {ft_free_shipping_remaining} | Cantidad restante para envío gratuito |
| {ft_cart_shipping_method} | Método de envío seleccionado |
| {ft_cart_remove_url} | URL para eliminar el producto actual del carrito |
Grupo: Checkout
Etiquetas relacionadas con el proceso de checkout.
| Etiqueta | Descripción |
|---|---|
| {ft_checkout_shipping_method} | Método de envío seleccionado en checkout |
Grupo: Mi Cuenta
Etiquetas de datos del cliente y su cuenta.
| Etiqueta | Descripción |
|---|---|
| {ft_customer_first_name} | Nombre del cliente |
| {ft_customer_last_name} | Apellido del cliente |
| {ft_customer_email} | Email del cliente |
| {ft_customer_total_orders} | Total de pedidos del cliente |
| {ft_customer_total_spent} | Total gastado por el cliente |
| {ft_my_account_endpoint_title} | Título del endpoint actual de Mi Cuenta |
Grupo: Productos
Etiquetas de datos de productos.
| Etiqueta | Descripción |
|---|---|
| {ft_product_price} | Precio actual del producto (sale o regular) |
| {ft_product_regular_price} | Precio regular del producto |
| {ft_product_sale_price} | Precio de oferta del producto |
| {ft_product_is_new} | Si el producto es nuevo (según días configurables) |
| {ft_product_gallery_ids} | IDs de las imágenes de galería del producto |
| {ft_product_first_gallery_image} | Primera imagen de la galería del producto |
| {ft_product_is_simple} | Condicional: si el producto es de tipo Simple |
| {ft_product_add_to_cart_quantity} | Cantidad del producto en el carrito |
Queries personalizadas
7 queries para usar en los loops de Bricks Builder. Cada query es activable individualmente desde el panel y proporciona datos de WooCommerce a través del sistema de queries de Bricks.
Queries de Pedidos
| Query | Descripción | Uso típico |
|---|---|---|
| Pedido actual | Obtiene el pedido actual en contexto (desde URL view-order o thank-you). Permite acceder al objeto WC_Order | Página Thank You, Detalle de pedido |
| Items del pedido | Obtiene los productos/items de un pedido. Permite hacer loops sobre los productos del pedido actual | Detalle de pedido, Thank You |
| Pedidos del usuario | Listado de pedidos del usuario actual | Página Mi Cuenta > Pedidos |
Queries de Productos
| Query | Descripción | Uso típico |
|---|---|---|
| Productos comprados | Todos los productos únicos comprados por el usuario, con contador de compras | Mi Cuenta > Productos comprados |
| Productos vistos recientemente | Productos que el usuario ha visitado recientemente (basado en cookie) | Sidebar, Página de producto |
Queries de Reseñas
| Query | Descripción | Uso típico |
|---|---|---|
| Reseñas del producto | Reseñas del producto actual en páginas de producto individual | Página de producto |
| Reseñas de todos los productos | Todas las reseñas o las más recientes, en cualquier página | Homepage, Landing pages |
Snippets WooCommerce
30+ snippets PHP activables individualmente desde la pestaña Snippets del panel E-commerce. Cada snippet añade una funcionalidad concreta sin necesidad de código personalizado. Algunos snippets incluyen ajustes configurables.
Carrito y Checkout
| Snippet | Función |
|---|---|
| Auto-update cart | Actualiza el carrito automáticamente al cambiar la cantidad, sin botón de actualizar |
| Free shipping remaining | Calcula y muestra cuánto falta para envío gratuito |
| Cart item count | Cuenta de items en carrito (configurable: unidades totales o productos únicos) |
| Shipping method display | Muestra el método de envío seleccionado en carrito y checkout |
| Cart remove URL | Genera URL para eliminar un producto del carrito |
| Custom thank-you redirect | Redirige a una página personalizada tras completar el pedido |
Productos
| Snippet | Función |
|---|---|
| "New" badge | Muestra etiqueta "Nuevo" en productos recientes (días configurables) |
| Check if Simple product | Condicional para verificar si el producto es de tipo Simple |
| Check subcategories | Condicional para verificar subcategorías dentro de loops |
| Gallery image IDs | Acceso a los IDs de imágenes de la galería del producto |
| First gallery image | Obtiene la primera imagen de la galería del producto |
Pedidos y Cuenta
| Snippet | Función |
|---|---|
| Customer data in My Account | Acceso a datos del cliente en la sección Mi Cuenta |
| Order status checker | Condicional para verificar el estado de un pedido |
| Custom order status display | Personaliza cómo se muestra el estado del pedido |
| Product images in order details | Muestra imágenes de producto en los detalles del pedido |
| Product images in orders table | Muestra imágenes de producto en la tabla de pedidos |
| Total customer orders | Cuenta total de pedidos del cliente |
| Customer total spent | Total gastado por el cliente |
| Discount amount | Muestra la cantidad de descuento aplicada |
| Last order in dashboard | Muestra el último pedido en el dashboard de Mi Cuenta |
| Wishlist endpoint | Añade un endpoint de lista de deseos en Mi Cuenta |
| My Account endpoint title | Título del endpoint actual de Mi Cuenta |
Bricks Builder
| Snippet | Función |
|---|---|
| Custom HTML tags | Etiquetas HTML personalizadas utilizables en elementos de Bricks |
| Whitelist PHP functions | Habilita funciones PHP adicionales para uso en echo tags de Bricks |
Tokens de estilo
Variables CSS personalizables para controlar la apariencia de las notificaciones de WooCommerce:
| Token | Descripción |
|---|---|
| notice_success_color | Color de fondo para notificaciones de éxito |
| notice_error_color | Color de fondo para notificaciones de error |
| notice_info_color | Color de fondo para notificaciones informativas |
| notice_border_width | Grosor del borde de las notificaciones |
| notice_border_radius | Radio de borde de las notificaciones |
Configuración
El módulo E-commerce se gestiona desde FlowKit > E-commerce en el panel de WordPress.
- El módulo se activa/desactiva desde FlowKit > Ajustes (panel principal del dashboard)
- Cuando el módulo está activo, WooCommerce se activa automáticamente
- Los elementos, snippets, etiquetas y queries se activan individualmente desde sus respectivas pestañas
- Los snippets con ajustes muestran un panel de configuración junto al interruptor de activación