Si estás buscando crear una tienda online profesional, flexible y rápida, no hay mejor combinación que WooCommerce en WordPress con el poderoso constructor visual Bricks Builder y su constructor para WooCommerce. Esta guía paso a paso te enseñará cómo instalar, configurar y diseñar una tienda online increíble en cuestión de horas.
Si todavía no sabes bien qué es WordPress, te dejo esta guía de WordPress para echar un vistazo a este CMS. Para mí, WordPress es lo mejor hoy en día para crear una web rápido y con un buen presupuesto. Eso sí, esta es una guía para montar la estructura de la tienda online, no para darle todos los estilos y la configuración que requiere, que daría para varios posts.
Si no, sería el post más largo de la historia, pero me parece interesante ver cómo se vincula con Bricks Builder. También te dejo mi súper guía de Bricks Builder para revisar a fondo este constructor. Sin duda, es lo mejor que hay hoy en día en cuanto a código y velocidad.
¿Qué es WooCommerce para empezar?
WooCommerce es el plugin más popular para crear tiendas online en WordPress, con millones de instalaciones activas en todo el mundo. Es un plugin gratuito y se ha hecho tan popular por su flexibilidad, su facilidad de uso y su enorme ecosistema de extensiones.
WooCommerce permite que tanto principiantes como desarrolladores creen y administren tiendas online sin necesidad de conocimientos avanzados de programación. A través de WooCommerce, puedes vender productos físicos, digitales, suscripciones, servicios o incluso configuraciones más avanzadas, como reservas o membresías.
Características principales de WooCommerce
Gestión de productos
- Puedes añadir, editar y eliminar productos fácilmente.
- Admite diferentes tipos de productos: físicos, digitales, agrupados, variables (con variaciones como talla o color), entre otros.
- Puedes organizar los productos en categorías y etiquetas.
- Gestión de inventario: controla el stock, establece cantidades máximas y notificaciones de existencias bajas.
Métodos de pago
WooCommerce soporta una amplia gama de pasarelas de pago, como PayPal, Stripe, tarjetas de crédito/débito, transferencias bancarias, pago contra reembolso, entre otros.
También es compatible con soluciones locales de pago según la región: en España, lo habitual es conectar el TPV virtual de tu banco (casi siempre Redsys) y, con él, Bizum.
Métodos de envío
Ofrece opciones flexibles como envío gratuito, tarifas planas o personalizadas según ubicación, peso o tamaño del producto.
Integración con empresas de logística y cálculo automático de tarifas de envío.
Personalización
Puedes personalizar el diseño y la experiencia de compra mediante temas de WordPress compatibles.
Compatible con constructores visuales como Bricks, Elementor, Divi o Gutenberg.
Gestión de pedidos
Incluye un sistema completo para procesar pedidos, desde la recepción hasta la entrega al cliente.
Posibilidad de enviar notificaciones automáticas al cliente sobre el estado del pedido.
Impuestos
WooCommerce calcula automáticamente los impuestos en función de la ubicación del cliente.
Permite configuraciones avanzadas de tasas de impuestos locales e internacionales.
Seguridad
WooCommerce trabaja con WordPress y sigue estándares de seguridad como SSL (certificado de seguridad) para proteger los datos de tus clientes. Los datos de las tarjetas no pasan por tu web: los gestiona la pasarela de pago.
Integraciones con plugins de seguridad como Wordfence, Solid Security y muchos más.
Ventajas de WooCommerce
Es gratuito y de código abierto
Aunque el plugin básico es gratuito, puedes ampliarlo con extensiones gratuitas o de pago. Hay muchos plugins o extensiones para Woo, por lo tanto es una opción muy factible para empezar con tu tienda online.
Integración total con WordPress
WooCommerce aprovecha todas las capacidades de WordPress, como su interfaz amigable, SEO integrado, plugins complementarios, y un ecosistema enorme.
Escalabilidad
Desde pequeñas tiendas hasta grandes empresas, WooCommerce es capaz de crecer junto con tu negocio.
Extensiones y complementos
Hay cientos de plugins adicionales que amplían sus funcionalidades: marketing por correo electrónico, herramientas avanzadas de SEO, pasarelas de pago específicas, gestión de suscripciones, etc.
Comunidad activa
Dado que WooCommerce es extremadamente popular, existe una gran comunidad de desarrolladores, foros y recursos para resolver dudas o problemas.
¿Cuándo usar WooCommerce?
WooCommerce es ideal para los siguientes casos
- Pequeñas y medianas empresas: Perfecto para quienes buscan una solución asequible para empezar a vender online.
- Tiendas físicas que desean vender online: Es fácil sincronizar WooCommerce con sistemas físicos de inventario o puntos de venta (POS).
- Emprendedores: Si tienes una idea de negocio y quieres empezar rápido, WooCommerce te ofrece una solución eficiente.
- Proyectos personalizados: Si necesitas una tienda con funcionalidades específicas, WooCommerce es altamente personalizable.
Limitaciones de WooCommerce
Aunque es poderoso, WooCommerce tiene algunas limitaciones
- Depende de WordPress: WooCommerce solo funciona en sitios web que usan WordPress.
- Consumo de recursos: Si tu tienda crece mucho (miles de productos o tráfico muy alto), necesitarás optimizar el hosting o buscar una solución más robusta.
- Coste de extensiones premium: Aunque el plugin base es gratuito, algunas funcionalidades avanzadas requieren complementos de pago.
- El mantenimiento es cosa tuya: a diferencia de Shopify, aquí las actualizaciones, las copias de seguridad y la seguridad las gestionas tú (o quien te lleve la web). Una tienda sin mantenimiento es una tienda en riesgo.
Lo que pide la ley a una tienda online en España
Antes de abrir, asegúrate de tener en regla el aviso legal, la política de privacidad y de cookies, y unas condiciones de venta con los gastos de envío, los plazos y el derecho de desistimiento de 14 días. Y desde el 28 de junio de 2025, por la Ley Europea de Accesibilidad, las tiendas online de empresas que no sean microempresas tienen que ser accesibles para personas con discapacidad. Te lo cuento en mi artículo sobre accesibilidad web.
¿Por qué diseñar tu tienda online con Bricks Builder?
Llegados a este punto, entiendo que ya eres usuario de WordPress. Si todavía no, en el blog te explico cómo instalar WordPress paso a paso, y más arriba te he dejado la guía de Bricks para instalarlo al completo.
¿Por qué crear tu tienda online con Bricks? Pues por la personalización que ofrece el constructor. Es decir, puedes personalizar todo, archivo de productos, carrito, checkout, página de gracias. Vamos una tienda online a medida con tu marca y lo mejor con un código muy optimizado. Por eso me encanta Bricks…
Nada de comprar plantillas de estas que añaden un montón de código que son lentas y a la larga se convierte en un problema para optimizarlas. Lo digo porque me pasa muy habitualmente con clientes que contactan conmigo para poder revisar este tipo de problemas con sus webs. Y honestamente, tiene mala solución. Ya que Bricks es un tema de WordPress y no un plugin como por ejemplo Elementor.
Por lo tanto, al cambiar al tema Bricks, todo el diseño se rompe junto con toda la configuración del tema. Es decir, hay que crear el menú, el footer, icono del carrito, básicamente todo de nuevo.
¿Qué nos ofrece Bricks para personalizar la tienda online?
Dicho todo esto, que ya nos hemos puesto en contexto. Vamos a ver que nos ofrece Bricks en cuanto a sus widgets para poder personalizar la tienda al 100%. Bien pues nos ofrece más de 30 elementos específicos de WooCommerce. Luego veremos todo esto por dentro del constructor para ver bien los widgets en la interfaz de Bricks.
Elementos del producto
Elementos del archivo de productos
Elementos del carrito
Elementos de pago
Otros elementos
¿Cómo diseñar una tienda WooCommerce profesional con Bricks Builder?
Vamos a imaginar, que ya tenemos nuestro WordPress instalado en nuestro servidor:
- Disponemos del tema Bricks operativo con la licencia activada.
- Ya disponemos de nuestro Diseño Web con Bricks operativo (no vamos a ver cómo crear una web con Bricks en este post).
- Hemos instalado el plugin de WooCommerce.
Al instalar Woo, en nuestro apartado de páginas de WordPress se han creado algunas páginas más (Carrito, Finalizar compra, Mi cuenta, Política de devoluciones y reembolsos y Tienda).
Todo esto lo crea WooCommerce al instalar el plugin desde el repositorio de WordPress. Un detalle: en las versiones actuales, el carrito y la página de pago se crean con bloques de Gutenberg. No pasa nada, porque en cuanto creas la plantilla de Bricks para esas páginas, Bricks toma el control. Todas estas páginas las podremos editar al detalle creando plantillas desde Bricks. Es aquí donde reside toda la magia del constructor. A tener en cuenta, que algunas son páginas normales y otras páginas de archivo (tienda) por ejemplo.
Además, para tener visualización del diseño en todos los apartados. Tenemos que crear una categoría de productos, junto con varios productos de prueba completos y con combinaciones para ver bien el diseño internamente desde Bricks. El tema quedaría así:
Si pinchamos en la vista previa del producto, con el diseño que tenía mi web en ese momento, Bricks ya nos ofrece este diseño, que la verdad no está nada mal.
Edición de plantilla producto individual en Bricks para personalizar el diseño
Llegados a este punto, lo que necesitamos es editar una plantilla para el producto individual. Para esto, primeramente debemos crear la plantilla en las opciones de Bricks y buscar la opción (Plantillas), una vez dentro añadimos el nombre (descriptivo) y a la derecha en Tipo de Plantilla buscamos la opción de «WooCommerce – Producto Individual».
Fijaros en la foto que añado donde Bricks nos da una serie de campos (Tipo, Condiciones, Shortcode). Esta información es importante para ver el tipo de plantilla y donde esta tomando el control en WordPress.
Aquí una foto donde se aprecian todas las plantillas que nos ofrece Bricks para la personalización de la tienda Online. Luego, agregamos el nombre a la Plantilla y seleccionamos el Tipo de Plantilla y la Publicamos.
Una vez hemos publicado la plantilla, pinchamos en el botón amarillo «Editar con Bricks». Cuando se abre Bricks, vemos una interfaz como esta o parecida, porque yo lo tengo configurado para trabajar en mobile first, es decir, diseño primero las versiones móviles. Te explico cómo lo configuro desde el principio en mi post sobre mobile first en Bricks.
Como veis en la foto, trabajo bastantes pantallas de dispositivos. Así tengo la certeza de que se ve bien en la gran mayoría de dispositivos. Hay otras maneras de trabajar sin «breakpoints», pero a mi me gusta hacerlo así. Y luego en la interfaz a la izquierda vemos los widgets que nos ofrece Bricks para ir montando a nuestro gusto la ficha de producto.
**IMPORTANTE: crear un producto de prueba con variaciones para ver el diseño al detalle.
Bien llegados a este punto ya solo queda empezar a diseñar con Bricks. Ir añadiendo los widgets que necesitas e ir maquetando a tu gusto la ficha del producto y guardar. Os pongo por aquí un resultado rápido, para ver lo que se puede llegar a hacer con calma.
En este caso, he añadido 3 secciones (1 a la izquierda la galería de fotos, a la derecha todo lo relacionado con el producto y otra después con los productos relacionados). El resultado no está mal no?
Plantillas de carrito, pago y mi cuenta
Ahora vamos con la edición de estas páginas tan importantes en la tienda online. Pero Bricks nos lo pone muy fácil, de nuevo vamos a las «Plantillas de Bricks», pero en este caso añadimos un nombre bien descriptivo como por ejemplo «WooCommerce Carrito», seleccionamos el tipo de plantilla a la derecha como «WooCommerce carrito» y publicamos la plantilla.
Luego abrimos Bricks desde el botón amarillo y se nos abre la interfaz de Bricks. Y buscamos en los widgets el apartado WooCommerce para empezar a diseñar nuestro carrito de compras. Aquí como apunte yo he añadido un banner con el título dinámico Cómo crear una tienda online con WordPress, Bricks y WooCommerce. Así queda más bonito el carrito, ahora depende de tu imaginación.
Podemos ir jugando con lo que nos ofrece Bricks para ir personalizando los colores corporativos e incluso añadir más cosas que nos parezcan interesantes. Aunque en este paso no conviene mucho añadir distracciones para los clientes.
Fijaros que limpieza trabajar con Bricks, aún se podrían darle más estilos por CSS para darle otro toque. Pero no creo que haga falta más para el carrito sinceramente. Mirad el resultado.
Bueno y para las páginas de checkout y finalizar compra sería el mismo procedimiento. Crear la plantilla, editarla a tu gusto desde la interfaz de Bricks. Así que a por ello…
Plantillas de archivo de productos (tienda, categorías, etiquetas y atributos)
Ahora vamos con las plantillas de archivos (para entendernos, las plantillas donde aparecen todos los productos, etc). También son personalizables para darles ese toque especial que necesitamos acorde a nuestra marca. O añadir ciertas cosas interesantes, como por ejemplo filtros de atributos, categorías, etiquetas.
Pero aquí sí hay que realizar una configuración extra para que Bricks tome el control de la plantilla y renderice el diseño que estamos creando. Y para los filtros, Bricks tiene sus propios filtros de consulta (por categoría, atributo, precio…), que actualizan el listado sin recargar la página y sin plugins de filtros aparte. Fijaros esta sería la plantilla que ofrece WooCommerce por default. No está mal, pero se puede mejorar bastante.
Pero ojo, hay que realizar una configuración extra como te comentaba antes. Nos vamos a la ruedecita de arriba a la izquierda en Bricks y luego pinchamos en «Ajustes de plantilla» (TEMPLATE SETTINGS si tienes Bricks en inglés). Aquí vamos a decirle a Bricks que tome el control de la Página (Tienda) que crea WooCommerce por default al instalarlo.
Siguiente paso: nos vamos a «Condiciones» (CONDITIONS) y añadimos estos parámetros. Aquí le estamos diciendo qué archivo queremos que se muestre con nuestro diseño.
Y por último nos dirigimos a «Rellenar contenido» (POPULATE CONTENT) y añadimos esta configuración para ver el diseño con productos reales mientras lo creamos en Bricks.
Realizamos todo el diseño, guardamos cambios y nos dirigimos a la página de Tienda. Donde están todos nuestros productos. Este es el resultado, se puede perfilar mucho más a vuestro estilo.
Y hasta aquí esta megaguía de cómo crear una tienda online con WordPress, Bricks y WooCommerce. Evidentemente, habrá algunas cosillas más que configurar, pero el proceso de trabajo es el mismo. Hay que crear todas las plantillas que necesites personalizarlas y ver el resultado.
Si tienes problemas con todo esto y necesitas la ayuda de un profesional, echa un vistazo a mi servicio de diseño de tiendas online en Castellón y no dudes en ponerte en contacto conmigo. Lo dicho, en una tienda online hay muchas más configuraciones. Pero ya hay una buena base para empezar a trabajar.
