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 Pro (Woocommerce Builder). 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 que es WordPress te dejo esta guía WordPress para pegar un vistazo acerca de este CMS. Sin duda WordPress es lo mejor hoy en día para crearte una web rápido y con un buen presupuesto. También comentarte que esto es una guía para crear la Tienda Online. Pero no para darle los estilos y toda la configuración que requiere, que todo esto lo iremos viendo en siguientes post.
Esto sería el post más amplio de la historia, pero me parece interesante como se vincula con Bricks Builder, que también te dejo esta Súper Guía 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, usado por millones de sitios en todo el mundo. Es un plugin gratuito diseñado para ofrecerte una solución de comercio electrónico utilizada en el mundo debido a su flexibilidad, facilidad de uso y gran 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 entrega, entre otros.
También es compatible con soluciones locales de pago según la región.
➡ 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.
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.
👋 ¿Por qué Diseñar tu Tienda Online con Bricks Builder?
Bien llegados a este punto, entiendo que ya eres usuario de WordPress. Y si es el caso que todavía no, pues tendrás que revisar mi Blog. Donde explico, como instalar WordPress paso a paso, y ya te he dejado por arriba la Guía de Bricks para instalarlo al completo y pegar un buen vistazo a todos los artículos para informarte al detalle.
Por qué crear tu tienda Online con Bricks, bueno 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 el Woo, en nuestro apartado de páginas de WordPress se nos 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. Todas estás 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 le pinchamos en la vista previa del producto, con mi diseño web actual en La Web Que Mola. Bricks me ofrece ya 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 amarrillo» > EDITAR CON BRICKS. Una vez se nos abre Bricks, vemos una interfaz como esta o parecida, ya que yo lo tengo configurado para trabajar en «Movil First!. Es decir trabajo primero las versiones móviles por tamaños. Tengo pendiente un post para explicar esto bien y como lo configuro desde el principio.
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?
😍 Personalización de la plantilla de Carrito, Checkout, Mi cuenta, Finalizar Compra, etc
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 Crear 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…
😉 Creación de las plantillas de Archivos de Productos (tienda, categorías, etiquetas, atributos, etc)
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í, si hay que realizar una configuración extra para que Bricks tome el control de la plantilla y renderice el diseño que estamos creando en Bricks. Fijaros esta sería la plantilla que ofrece Woocommerce por default. No está mal, pero se puede mejorar bastante.
PEROOOOO.. 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 TEMPLATE SETTINGS. 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 CONDITIONS y añadimos estos parámetros. Aquí le estamos diciendo, el archive que queremos que renderice con nuestro diseño.
Y por último nos dirigimos a POPULATE CONTENT y añadimos esta configuración para renderizar el diseño el Bricks e ir viendo el resultado.
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í está mega guía de como crear una tienda online con WordPress – Bricks y Woocommerce. Evidentemente, habrán 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 en WordPress y Tiendas Online 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.
