¿Crear una tienda online con diseño profesional en woocommerce sin ser diseñador web? Sí, es posible. Te explico cómo en este post.
Antes de empezar, ¿tienes instalado Woocommerce, y la configuración básica de la tienda? , si no es así lee primero este manual .
Para crear tiendas con Woocommerce con un diseño profesional no hace falta saber programar ni dominar herramientas complejas, existen temas para Woocommerce y plugins que van a permitir tener nuestra tienda Woocommerce con un diseño súper profesional.
Aviso: NO HAY QUE OBSESIONARSE (perdón por gritar) con el diseño.
El diseño es una parte importante, pero no es lo más importante.
Porque, no es lo mismo esta tienda online…
… que esta otra:
Esta segunda tienda está realizada en woocommerce, con el tema OceanWp .
Aquí esta ordenada toda la tienda con sus categorías y ofertas promociones etc.
Ya te di una pista de cómo conseguir tu tienda profesional, utilizar Woocommerce themes o temas para Woocommerce y así conseguirás diseños profesionales con un coste mínimo.
TEMAS GRATUITOS WOOCOMMERCE PARA TU TIENDA ONLINE con diseño profesional
STOREFRONT
Woocommerce tiene su propio tema gratuito storefront que lo podéis descargar en este link: STOREFRONT.
Creado por el mismo equipo que programo Woocommerce. Entre sus características destacan su ligereza y sencillez, pensado como un Woocommerce theme que se puede ir personalizando a base de extensiones y temas hijo creados especialmente para él.
Al ser de los propios desarrolladores de Woocommerce las actualizaciones siempre serán seguras, porque si actualizas Woocommerce actualizas storefront, es compatible con woocommerce wpml (gestor de traducciones) tienes el idioma que quieras siempre listo y es totalmente responsive (se adapta a móviles y tabletas automáticamente) .
CÓMO MODIFICAR STOREFRONT
Storefront se modifica desde el panel de administrador wordpress con la opción Temas>apariencia>personalizar, todos los cambios que realices se verán automáticamente y hasta que no le des a publicar no quedaran guardados.
Puedes cambiar los colores, puedes añadir tu logo, imagen de cabecera, los widgets.
Toca, trastea con las opciones y cuando lo tengas claro no olvides publicar para que quede grabado los cambios, y recuerda, siempre puedes volver a cambiar lo que necesites.
También si eres un poco “manitas” puedes personalizar con hooks (trocitos de código) el número de productos que enseñar en la página o cambiar como se ve la ficha de producto y un montón de opciones, te dejo el enlace donde puedes ver esos trocitos de código personalizar storefront con hooks .
Si no quieres complicarte con códigos extraños o la programación no es lo tuyo, tienes un plugin de Woocommerce para hacer ese trabajo más sencillo pero no es gratuito, el plugin es Storefront Powerpack , que permite cambiar casi cualquier aspecto visual de storefront.
Te dejo un vídeo para que veas lo que puede hacer este plugin:
Incluso si solo necesitas algo específico puedes comprar los plugins sueltos en lugar de todo el pack, algunos plugins son de pago otras gratuitos, este es el link: plugins de storefront.
TEMAS HIJO PARA STOREFRONT
Si estas empezando con tu tienda con Woocommerce, esto de temas hijo te sonara a chino.
¡No me líes Pedro, estás hablando de storefront!
Te lo explico fácil , un tema hijo es un segundo tema que hereda todas las funciones del tema padre , así podrás modificar y cambiar cualquier cosa en tu diseño , pero no perderás esos cambios cada vez que actualices.
Por ejemplo si al tema le añado un hook de los que te explique antes , cuando actualice el tema (y lo vas hacer te lo aseguro) pues perderás el hook y tendrás que añadirlo de nuevo , para eso se usan los temas hijos las modificaciones se quedan con los hijos y podemos actualizar lo importante del tema.
¿Me explique más o menos?
Pues storefront ya dispone de varios temas hijo que además nos posibilitan tener en un solo click un diseño de tienda woocommerce , solo tienes que elegir el que te guste, descargarlo y activarlo.
Algunos son de pago otros son gratuitos mira que chulos son: https://woocommerce.com/product-category/themes/storefront-child-theme-themes/
Te quedaste con la boca abierta ¿verdad? .
Debo decirte que no solo es descargar y activar, hay muchas cosas para que todo funcione correctamente, definir categorías, métodos de pago de envio, el seo de la tienda etc. etc. pero eso que tanto te obsesiona con storefront puedes tenerlo gratis o casi gratis
OCEANWP
Es otro Woocommerce theme , y es el tema que utilizo más habitualmente junto con Astra theme para diseñar tiendas con woocommerce, oceanwp lo programo Nicolás Lecocq un chico francés que , de no saber hacer un blog en el 2012 a crear su woocommerce theme propio en 2016 y lo diseño por que no encontraba un tema que tuviera lo que el buscaba , si no existe pues lo creo , ¿fácil no ?
Es un woocommerce theme que se lleva de maravilla con elementor (luego explicare que es elementor) y tiene dos versiones una gratuita y otra de pago pero el precio base son 39€, un precio muy bajo para todo lo que te ofrece.
Puedes ver sus precios en la web de OceanWP
Puedes usar el personalizador de temas igual que storefront para cambiar la estructura de la tienda con woocommerce (ancho, posición de los sidebars).
O la tipografía de toda la tienda con woocommerce (cuerpo, encabezados, menús), poner una barra superior, iconos sociales o añadir tu contacto, existen 7 maneras de mostrar el encabezado y los menús o elegir tamaños márgenes, , cambiar la estructura de la página de blog e incluso las entradas, cambiar colores individualmente menús cabecera pie de página etc. , widgets de pie de página y copyright , cambiar configurar para móviles y tabletas .
Vamos que te puedes tirar una tarde entera probando cosas en tu web, pero repito y no me canso de repetir no te obsesiones por el diseño de tu tienda con woocommerce.
OceanWp tiene plugins de pago y gratuitos para añadir funcionalidades a nuestra tienda con woocommerce.
Como crear barras laterales, añadir popups , cookies , puedes descargarlas desde la web oficial o desde el propio repositorio de wordpress con woocommerce .
Uno de los más importantes y pienso que de obligada activación es el plugin ocean extra , este plugin crea un nuevo apartado en el administrador wordpress llamado Theme panel , que te permitirá personalizar al máximo el tema e incluso páginas y entradas de manera individual.
Al hacer click veremos:
Donde podemos quitar cosas que no vamos a usar y así aligeramos la web.
También veremos una opción de scripts como esta:
Para que también activemos o desactivemos lo que vamos a utilizar, mejorando la velocidad de la tienda con woocommerce.
También permite personalizar individualmente entradas y páginas, nos sale un menú en cada entrada o página así:
- El diseño principal de la página (posición de la barra lateral, poner el ancho completo, diseño del pie de página, etc.)
- Añadir shortcodes (códigos cortos que insertaran formularios por ejemplo) en varios lugares de la página (antes o después de la barra superior, antes o después de la cabecera, antes o después del título, etc.)
- Personalizar el estilo de la cabecera, así como ocultarla (también la barra superior).
- Mostrar un logo diferente y modificar su tamaño para los diferentes dispositivos.
- Personalizar el estilo del menú y de los iconos sociales, así como poner un menú diferente.
- Personalizar el título y los subtítulos de la página.
- Mostrar u ocultar las migas de pan para esa página y personalizar su estilo.
- Mostrar u ocultar los widgets del pie de página y el mensaje de copyright.
Imagina que en un post no quieres la barra lateral derecha que si tienen los otros post pues en la opción barra lateral de indicas sin barra lateral, o quieres que sea a pantalla completa.
Como ocurre con storefront tenemos demos para instalar de un solo click, algunas tan chulas como esta
Puedes verlas en su web «OceanWP Demos» y las extensiones tanto de pago como gratuitas en OceanWP Extensiones
Astra
Es el tema que utilizo actualmente junto con Oceanwp para tiendas con woocommerce , puede parecer un woocommerce theme sencillo, pero combinado con un maquetador como elementor o beaver builder nos permitirá crear tiendas con woocommerce, ligeras y con un diseño espectacular.
Tienes una versión gratuita y otra de pago desde 59€.
¿Quieres ver lo astra puede hacer con woocommerce wordpress?
Mira su web https://wpastra.com/woocommerce/
Se puede personalizar como el resto de temas desde Apariencia>personalizar tema, o puedes entrar en el menú que te añade Apariencia>Opciones de Astra, como ves aquí.
Al igual que los otros woocommerce themes (Storefront , OceanWp) , las opciones de personalización son inmensas solo es cuestión de ir probando y ver que queda mejor.
También tienes temas prediseñados para que solo un click puedas tener algo así de chulo:
USAR UN MAQUETADOR EN TU TIENDA ONLINE WOOCOMMERCE
Un maquetador visual o en ingles page builder (constructor de páginas) es un plugin que se instala y nos sirve para modificar el aspecto de las páginas, entradas e incluso podemos usarlo para mostrar de una manera especial nuestros productos en wocommerce.
Tenemos el propio maquetador de wordpress que se llama gutenberg pero quizás solo quizás para empezar puede resultar mas “engorroso” .
Algunos maquetadores más conocidos y que te sonaran
- Elementor gratuito y Elementor Pro (la versión de pago)
- Visual Composer (de pago) de los primeros en salir y por eso más conocido , Beaverbuilder(de pago) más de un millón de webs lo usan
- Gutenberg(gratuito) el propio maquetador de wordpress pero no tan intuitivo como los otros.
La ventaja de usar un maquetador es que te permite ver lo que haces en todo momento por ejemplo mira este pantallazo de Elementor modificando la plantilla oceanwp.
Como ves a la izquierda nos da una serie de opciones que solo tenemos que arrastrar y soltar en el lienzo de la derecha y maquetar lo que necesitemos.
El resto de maquetadores son muy parecidos en su utilización y funciones a elementor, solo es cuestión de probar y quedarte con el que mejor trabajes.
CONCLUSIONES Y CONSEJOS
Como vistes, existen opciones totalmente gratuitas que te permiten crear tiendas con woocommerce igual de “chulas” que Zalando o Amazon.
En algunos casos tenemos que pagar para tener opciones un poco más complejas pero te aseguro que vale la pena.
Mi recomendación durante todo el post es que no te obsesiones con el diseño es una parte de tu tienda woocommerce, pero no lo mas importante.
Consejos importantes que te doy, mantén una coherencia, no uses mil colores, si en la home es naranja, porque es el color que vas a usar, intenta usar siempre ese naranja no pongas el resto de la tienda woocommerce en verde.
La coherencia de colores en todo, no solo las páginas o entradas, si los botones son naranja todos los botones de la web son naranja, ¿Entiendes?
Igual con la tipografía, usa los mismos tipos de letra en toda la web si los títulos son arial bold todos los títulos son arial bold , si los textos son roboto todos los textos son roboto.
Las fotografías siempre originales y de calidad, si te las facilita tu proveedor que sean de calidad que el cliente pueda ampliarlas y no se vean pixeladas.
Haz el proceso de compra en woocommerce sencillo, no compliques la vida a tu cliente
Cuando tu compras en otras webs te gusta tener todo ordenado y fácil de encontrar, si quieres comprar unos zapatos de hombre, ¿porque vas a enseñar todos los zapatos?, no tendría sentido, estos temas o woocommerce theme como te guste llamarlos, tienen la opción de crear megamenus para desplegarse y ver todo ordenado y con coherencia.
Y por experiencia te digo que en la sencillez está el saber hacer.
Repito por decimocuarta vez, no te obsesiones con el diseño no sobrecargues la tienda woocommerce de cosas que no sirven para nada, el tiempo de carga es muy importante.
Además piensa que la mayoría de compras por internet se realizan con el móvil con lo que un diseño espectacular de ordenador en el móvil se verá supersencillo y en vertical, ¿No me crees? , mira Amazon versión web
Y su versión móvil
Ves como lo que importa es que el tema se adapte al dispositivo que en ese momento tu cliente use, y también lo que ahora está muy de moda la UX (user experience), la forma en que el usuario esta en tu web y lo bien que le hacemos sentir.
Por eso es importante que todos los temas sean responsives , que automáticamente se adaptan al móvil y/o tabletas , así no tenemos que pensar cómo se verá en el móvil lo que estas diseñando , pero incluso si el tema ya se adapta solo , puedes hacer partes exclusivas de tu web para móviles , por ejemplo en la versión web tienes una imagen pero en la versión móvil tienes otra, el límite es tu imaginación .
Espero que tu tienda woocommerce , se vea espectacular , después de estos consejos que te di.
No Comments Found