Comercio Electronico
Integracion completa con WooCommerce: carrito, proceso de pago, Mi Cuenta, pedidos, resenas y mas de 80 archivos de funcionalidades.
Configuracion inicial
Antes de activar las funcionalidades de comercio electronico, asegurate de cumplir con los siguientes requisitos previos:
- WooCommerce instalado y activo — Version 8.0 o superior. FlowKit detecta automaticamente la presencia de WooCommerce.
- Panel de comercio activado — Desde el panel principal de FlowKit, activa el modulo de Comercio Electronico.
- Plataforma seleccionada — En los ajustes del panel, selecciona la plataforma de comercio (actualmente WooCommerce es la unica soportada).
Pasos de configuracion
1
Instalar WooCommerce — Instala y activa el complemento WooCommerce desde el repositorio de WordPress. Configura los ajustes basicos de la tienda (moneda, ubicacion, impuestos).
2
Activar el modulo — Ve a
FlowKit → Comercio y activa el modulo. Esto carga todos los archivos de la carpeta library/woocommerce/ y registra los elementos y etiquetas dinamicas.3
Activar snippets — Selecciona que snippets y funcionalidades deseas activar. Cada snippet es independiente y se puede activar o desactivar individualmente desde el panel.
Los snippets desactivados no cargan ningun codigo PHP ni CSS. No hay impacto en el rendimiento por tenerlos disponibles.
Funcionalidades
El modulo de comercio electronico cubre todas las areas principales de una tienda WooCommerce. Cada area agrupa snippets, elementos y etiquetas dinamicas relacionadas.
| Area | Descripcion |
|---|---|
| Tienda | Personalizacion de la pagina de tienda: disposicion de productos, filtros, ordenacion y elementos visuales de la cuadricula de productos. |
| Producto individual | Personalizacion de la ficha de producto: precios con multiples formatos, galerias de imagenes, productos vistos recientemente, etiquetas de nuevo y descuento. |
| Carrito | Personalizacion del carrito de compras: subtotales, totales, envio gratuito, cupones AJAX, actualizacion automatica de cantidades y eliminacion de productos. |
| Proceso de pago | Personalizacion del checkout: datos de facturacion, envio, metodos de pago, notas del pedido, terminos y condiciones, y boton de realizar pedido. |
| Mi Cuenta | Personalizacion de la pagina de cuenta del cliente: datos del cliente, titulo del apartado actual, lista de deseos personalizable y resumen de la ultima orden. |
Snippets
Los snippets son fragmentos de codigo PHP reutilizables que anaden funcionalidades especificas a la tienda. Cada snippet es un archivo independiente dentro de library/woocommerce/ que se activa desde el panel de administracion.
Existen dos tipos principales de snippets:
- Snippets con funcionalidades — Anaden logica de negocio: actualizacion automatica del carrito, redireccion tras el pago, validaciones, etc. Estos no generan etiquetas dinamicas, sino que modifican el comportamiento de WooCommerce.
- Snippets con etiquetas dinamicas — Registran una o mas etiquetas dinamicas (
{ft_*}) que se pueden usar dentro de Bricks Builder para mostrar datos de productos, pedidos, resenas, etc.
Los snippets estan organizados por categorias segun el area de WooCommerce que afectan.
Carrito y proceso de pago
Snippets que gestionan la funcionalidad del carrito de compras y el proceso de pago.
| Snippet | Etiqueta | Descripcion |
|---|---|---|
| cart-item-count.php | {ft_cart_item_count} | Numero de productos en el carrito. Configurable: puede mostrar unidades totales o productos unicos. |
| cart-remove-url.php | {ft_cart_remove_url} | Direccion para eliminar un producto del carrito con soporte AJAX. Genera la URL de eliminacion correcta para cada articulo. |
| producto-cantidad-carrito.php | {ft_cart_product_quantity} | Cantidad del producto actual en el carrito. Util dentro de bucles de productos para mostrar cuantas unidades se han anadido. |
| actualizar-carrito-automatico.php | — | Actualizacion automatica del carrito al cambiar cantidades. Elimina la necesidad de pulsar un boton de actualizar: los totales se recalculan en tiempo real. |
| subtotal-carrito.php | {ft_cart_subtotal} {ft_cart_subtotal_with_tax} {ft_cart_total} |
Diferentes totales del carrito: subtotal sin impuestos, subtotal con impuestos y total final. Todos formateados con el simbolo de moneda configurado en WooCommerce. |
| envio-gratis-restante.php | {ft_cart_free_shipping_amount} {ft_cart_free_shipping_percentage} |
Cantidad restante y porcentaje completado para alcanzar el envio gratuito. Ideal para barras de progreso motivacionales en el carrito. |
Mi Cuenta
Snippets para personalizar la pagina de cuenta del cliente.
| Snippet | Etiqueta | Descripcion |
|---|---|---|
| datos-cliente-mi-cuenta.php | {ft_account_total_orders} {ft_account_total_spent} {ft_account_last_order_*} |
7 etiquetas con datos del cliente: total de pedidos, total gastado, y datos de la ultima orden (numero, fecha, estado, total, enlace). Permite crear paneles de resumen personalizados. |
| my-account-endpoint-title.php | {ft_account_endpoint_title} | Titulo del apartado actual de Mi Cuenta. Cambia dinamicamente segun la seccion visible: Pedidos, Direcciones, Descargas, etc. |
| endpoint-wishlist-mi-cuenta.php | — | Anade un apartado de lista de deseos personalizable a Mi Cuenta. Registra un nuevo endpoint en WooCommerce y proporciona la interfaz para gestionar productos favoritos. |
| ultima-orden-cliente.php | [flow_user_last_order] | Shortcode que muestra informacion completa de la ultima orden del cliente. Incluye numero de pedido, fecha, estado, productos y total. |
Productos
Snippets relacionados con la informacion y presentacion de productos.
| Snippet | Etiqueta | Descripcion |
|---|---|---|
| producto-precios.php | {ft_product_regular_price} {ft_product_sale_price} {ft_product_price} {ft_product_price_html} |
Diferentes formatos de precios del producto: precio regular, precio de oferta, precio actual y precio con formato HTML completo (incluye tachado del precio regular cuando hay oferta). |
| badge-nuevo.php | — | Muestra la etiqueta «Nuevo» en productos recientes. El numero de dias que un producto se considera nuevo es configurable desde el panel. |
| producto-simple.php | — | Comprueba si el producto actual es de tipo simple. Util para mostrar u ocultar elementos condicionalmente en la ficha de producto dentro de Bricks Builder. |
| cantidad-descuento.php | — | Muestra la cantidad descontada formateada (por ejemplo, «Ahorras 15,00 €»). Calcula automaticamente la diferencia entre el precio regular y el precio de oferta. |
| productos-vistos-recientemente.php | {ft_recent_product_id} {ft_recent_product_title} {ft_recent_product_url} {ft_recent_product_image} {ft_recent_product_price} {ft_recent_product_rating} {ft_recent_product_date} |
Registra 7 etiquetas dinamicas con datos de productos visitados recientemente. Incluye una consulta personalizada para Bricks Builder que permite crear secciones de «Visto recientemente». |
| ids-imagenes-galeria.php | — | Obtiene los identificadores de todas las imagenes de la galeria del producto. Util para crear galerias personalizadas con elementos de Bricks. |
| primera-imagen-galeria.php | — | Obtiene la primera imagen de la galeria del producto. Ideal para miniaturas o vistas previas rapidas fuera de la ficha completa. |
Pedidos
Snippets para consultas y etiquetas dinamicas de pedidos. Esta es una de las areas mas completas, con mas de 40 etiquetas disponibles.
| Snippet | Descripcion |
|---|---|
| query-pedidos-usuario.php | Registra una consulta personalizada para Bricks Builder: «Pedidos del usuario». Devuelve todos los pedidos del cliente actual, ordenados por fecha. Ideal para crear listados de historial de pedidos completamente personalizados. |
| query-pedido-actual.php | Registra una consulta personalizada para Bricks Builder: «Pedido actual». Devuelve los datos del pedido que se esta visualizando. Util en las paginas de agradecimiento y detalle de pedido. |
| query-order-items.php | Registra una consulta personalizada para Bricks Builder: «Elementos del pedido». Devuelve los productos individuales dentro de un pedido para crear tablas de resumen personalizadas. |
| etiquetas-pedido.php | Mas de 40 etiquetas dinamicas para acceder a cualquier dato del pedido. Organizadas en grupos tematicos (ver tabla a continuacion). |
Grupos de etiquetas de pedido
| Grupo | Etiquetas | Descripcion |
|---|---|---|
| Informacion basica | {ft_order_number} {ft_order_date} {ft_order_status} {ft_order_payment_method} {ft_order_payment_method_title} {ft_order_date_completed} {ft_order_date_paid} |
Datos generales del pedido: numero, fecha de creacion, estado actual, metodo de pago utilizado, fecha de finalizacion y fecha de pago. |
| Totales | {ft_order_total} {ft_order_subtotal} {ft_order_tax} {ft_order_shipping_total} {ft_order_discount_total} {ft_order_discount_tax} |
Importes economicos: total del pedido, subtotal, impuestos, coste de envio, descuentos aplicados e impuestos sobre descuentos. Todos formateados con el simbolo de moneda. |
| Direccion de facturacion | {ft_order_billing_first_name} {ft_order_billing_last_name} {ft_order_billing_company} {ft_order_billing_address_1} {ft_order_billing_city} {ft_order_billing_state} {ft_order_billing_postcode} {ft_order_billing_country} {ft_order_billing_email} {ft_order_billing_phone} |
Etiquetas individuales para cada campo de la direccion de facturacion. Permiten mostrar datos de contacto y direccion por separado en disenos personalizados. |
| Direccion de envio | {ft_order_shipping_first_name} {ft_order_shipping_last_name} {ft_order_shipping_company} {ft_order_shipping_address_1} {ft_order_shipping_city} {ft_order_shipping_state} {ft_order_shipping_postcode} {ft_order_shipping_country} |
Etiquetas individuales para cada campo de la direccion de envio. Misma estructura que facturacion, sin campos de contacto. |
| Recuento | {ft_order_item_count} | Numero total de productos en el pedido. Cuenta las lineas de producto (no las unidades totales). |
Resenas
Snippets para mostrar resenas y valoraciones de productos.
| Snippet | Etiqueta | Descripcion |
|---|---|---|
| datos-resenas-producto.php | {ft_review_total} {ft_review_average_rating} {ft_review_average_rating_percentage} |
Datos agregados de resenas del producto actual: numero total de resenas, puntuacion media (1-5) y puntuacion media en porcentaje (0-100%). Util para crear barras de valoracion personalizadas. |
| resenas-producto.php | {ft_review_author_name} {ft_review_author_email} {ft_review_author_avatar} {ft_review_date} {ft_review_date_relative} {ft_review_comment} {ft_review_rating} {ft_review_rating_percentage} {ft_review_title} {ft_review_verified} {ft_review_product_id} {ft_review_product_name} {ft_review_id} |
13 etiquetas dinamicas para datos individuales de cada resena: autor, fecha (absoluta y relativa), contenido, puntuacion, verificacion de compra y datos del producto asociado. Se usan dentro de bucles de Bricks. |
| resenas-todas.php | — | Registra dos consultas personalizadas para Bricks Builder: «Todas las resenas» (todas las resenas aprobadas de la tienda) y «Ultimas resenas» (las mas recientes, con limite configurable). Ideal para paginas de testimonios o secciones de prueba social. |
Elementos de WooCommerce
FlowKit registra elementos personalizados dentro de Bricks Builder especificos para WooCommerce. Estos elementos permiten construir paginas de carrito, checkout y pedidos completamente personalizadas sin necesidad de codigo.
Estos elementos solo aparecen en el panel de Bricks Builder cuando WooCommerce esta activo y el modulo de comercio esta habilitado en FlowKit.
Carrito
Elementos para construir una pagina de carrito personalizada. Cada elemento reemplaza una parte del carrito predeterminado de WooCommerce.
| Elemento | Descripcion |
|---|---|
| ft-cart-subtotal | Muestra el subtotal del carrito. Se actualiza automaticamente al modificar cantidades o aplicar cupones. |
| ft-cart-order-total | Muestra el total del pedido incluyendo impuestos y envio. Refleja el importe final que pagara el cliente. |
| ft-cart-shipping-totals | Muestra los costes de envio disponibles. Incluye los metodos de envio con sus precios segun la zona del cliente. |
| ft-cart-coupons | Lista los cupones aplicados al carrito con sus descuentos correspondientes y opcion de eliminar. |
| ft-cart-ajax-coupon | Formulario para aplicar cupones con validacion AJAX. No requiere recargar la pagina: el descuento se aplica y los totales se actualizan al instante. |
| ft-cart-shipping-calculator | Calculadora de envio integrada en el carrito. Permite al cliente introducir su direccion para obtener una estimacion del coste de envio antes de proceder al pago. |
| ft-cart-proceed-checkout | Boton para proceder al proceso de pago. Enlaza directamente a la pagina de checkout configurada en WooCommerce. |
Productos
| Elemento | Descripcion |
|---|---|
| ft-simple-add-to-cart | Boton sencillo para anadir al carrito. Disenado para productos simples: un clic anade el producto directamente sin redirigir. Compatible con AJAX para una experiencia fluida. |
Proceso de pago
Elementos para construir una pagina de checkout completamente personalizada. Cada elemento corresponde a una seccion del formulario de pago.
| Elemento | Descripcion |
|---|---|
| ft-checkout-billing-detail | Formulario de datos de facturacion: nombre, apellidos, empresa, direccion, ciudad, codigo postal, pais, telefono y correo electronico. |
| ft-checkout-shipping-detail | Formulario de direccion de envio. Solo se muestra si la direccion de envio difiere de la de facturacion. |
| ft-checkout-shipping-methods | Selector de metodos de envio disponibles. Muestra las opciones de envio con sus precios calculados segun la direccion introducida. |
| ft-checkout-order-detail | Resumen del pedido dentro del checkout: lista de productos, cantidades, subtotales y total. Se actualiza en tiempo real al cambiar metodo de envio o aplicar cupones. |
| ft-checkout-payment | Selector de metodos de pago. Muestra las pasarelas de pago activas (transferencia, tarjeta, PayPal, etc.) con sus formularios correspondientes. |
| ft-checkout-coupon-form | Formulario para aplicar cupones durante el proceso de pago. Funcionalidad similar al del carrito pero integrado en la pagina de checkout. |
| ft-checkout-order-note | Campo de texto para notas del pedido. Permite al cliente anadir instrucciones especiales de entrega o comentarios sobre su pedido. |
| ft-checkout-terms | Casilla de aceptacion de terminos y condiciones. Obligatoria cuando la pagina de terminos esta configurada en los ajustes de WooCommerce. |
| ft-checkout-create-account | Casilla para crear una cuenta durante el pago. Permite a los clientes invitados registrarse automaticamente al completar su compra. |
| ft-checkout-submit | Boton de realizar pedido. Procesa el pago y finaliza la compra. Incluye validacion de todos los campos obligatorios antes de enviar. |
Pedidos
Elementos para personalizar las paginas de agradecimiento y detalle de pedido.
| Elemento | Descripcion |
|---|---|
| ft-order-header | Cabecera del pedido con numero, fecha y estado actual. Incluye formato visual del estado con colores indicativos. |
| ft-order-summary | Resumen economico del pedido: subtotal, envio, impuestos, descuentos y total. Mismos datos que el correo de confirmacion pero con estilo personalizable. |
| ft-order-items-loop | Bucle de productos del pedido. Itera sobre cada linea del pedido mostrando nombre, cantidad, precio y subtotal. Totalmente personalizable con los estilos de Bricks. |
| ft-order-product-thumbnails | Miniaturas de los productos del pedido. Muestra las imagenes destacadas de cada producto comprado en formato de galeria compacta. |
| ft-order-addresses | Direcciones de facturacion y envio del pedido. Muestra ambas direcciones formateadas segun el pais, con etiquetas claras. |
Variables CSS de estilo
FlowKit inyecta variables CSS en :root que controlan la apariencia visual de los elementos de WooCommerce. Estas variables se pueden personalizar desde el panel de administracion o sobreescribir directamente en CSS.
Las variables estan organizadas en las siguientes categorias:
Botones
| Variable | Descripcion |
|---|---|
| --ft-btn-primary-bg | Color de fondo del boton principal (anadir al carrito, aplicar cupon). |
| --ft-btn-primary-color | Color del texto del boton principal. |
| --ft-btn-primary-hover-bg | Color de fondo del boton principal al pasar el cursor. |
| --ft-btn-checkout-bg | Color de fondo del boton de proceder al pago. |
| --ft-btn-checkout-color | Color del texto del boton de proceder al pago. |
| --ft-btn-place-order-bg | Color de fondo del boton de realizar pedido. |
| --ft-btn-place-order-color | Color del texto del boton de realizar pedido. |
Mensajes
| Variable | Descripcion |
|---|---|
| --ft-msg-success-bg | Color de fondo de los mensajes de exito (producto anadido, cupon aplicado). |
| --ft-msg-success-color | Color del texto de los mensajes de exito. |
| --ft-msg-error-bg | Color de fondo de los mensajes de error (campos obligatorios, cupon invalido). |
| --ft-msg-error-color | Color del texto de los mensajes de error. |
| --ft-msg-info-bg | Color de fondo de los mensajes informativos. |
| --ft-msg-info-color | Color del texto de los mensajes informativos. |
Bordes
| Variable | Descripcion |
|---|---|
| --ft-wc-border-color | Color de los bordes de tablas, formularios y separadores de WooCommerce. |
| --ft-wc-border-radius | Radio de borde de campos de formulario, botones y contenedores. |
Uso en CSS y Tailwind
Las variables se pueden usar directamente en CSS personalizado o dentro de clases de Tailwind CSS v4:
CSS
Ejemplo en CSS personalizado
/* Sobreescribir el color del boton de pago */
:root {
--ft-btn-checkout-bg: #16a34a;
--ft-btn-checkout-color: #ffffff;
}
/* Usar la variable en un selector personalizado */
.mi-boton-carrito {
background-color: var(--ft-btn-primary-bg);
color: var(--ft-btn-primary-color);
border-radius: var(--ft-wc-border-radius);
}
CSS
Ejemplo con Tailwind CSS v4
/* En el tema de Tailwind (@theme) */
@theme {
--color-wc-primary: var(--ft-btn-primary-bg);
--color-wc-checkout: var(--ft-btn-checkout-bg);
--color-wc-success: var(--ft-msg-success-bg);
--color-wc-error: var(--ft-msg-error-bg);
}
/* Uso en clases Tailwind */
/* bg-wc-primary text-white rounded-[var(--ft-wc-border-radius)] */
Utilidades
Snippets adicionales que cubren funcionalidades transversales o que no encajan en una categoria especifica.
| Snippet | Descripcion |
|---|---|
| estado-orden.php | Funciones auxiliares para obtener y formatear el estado de una orden. Traduce los estados internos de WooCommerce a textos legibles y colores asociados. |
| redireccion-thank-you.php | Redireccion personalizada de la pagina de agradecimiento. Permite redirigir al cliente a una URL especifica tras completar la compra, en lugar de la pagina predeterminada de WooCommerce. |
| whitelist-funciones-bricks.php | Anade funciones personalizadas de WooCommerce a la lista blanca de Bricks Builder. Necesario para que Bricks permita ejecutar funciones PHP personalizadas en las condiciones de visibilidad y etiquetas dinamicas. |
| etiquetas-html-bricks.php | Registra etiquetas dinamicas que devuelven HTML formateado (por ejemplo, estrellas de valoracion, insignias de estado). Estas etiquetas usan la sintaxis de Bricks con salida HTML segura via wp_kses_post(). |
| estado-orden-tabla.php | Formato visual del estado de la orden para uso en tablas. Muestra el estado con un indicador de color (punto o insignia) y texto descriptivo, ideal para listados de pedidos en Mi Cuenta. |
| imagenes-productos-mi-cuenta.php | Muestra miniaturas de productos en la tabla de pedidos de Mi Cuenta. Anade una columna adicional con las imagenes de los productos comprados para una referencia visual rapida. |