Woo-GP-1.png

Woocommerce con GeneratePress

El theme GeneratePress no sólo es compatible con Woocommerce para crear una tienda online, sino que incorpora plantillas ya preparadas y un módulo entero específico para personalizar tu eCommerce.

Agradecimiento del autor invitado


Antes de nada, me presento. Mi nombre es Joan Llompart y soy el autor del blog JoanLlompart.com. Cuando nació hace ya tres años lo enfoqué a tratar fundamentalmente sobre WordPress en general. Pero desde el pasado mes de setiembre lo dedico preferentemente a Woocommerce y la creación de tiendas online.

Te escribo este artículo de invitado en el blog de Wetopi gracias a la amabilidad de su responsable Joan Vega, a quien quiero agradecer esta oportunidad de participar fuera de mi web, y por su profesionalidad en este magnífico servicio de hosting que dirige.

Wetopi me ha sido y es de gran ayuda en el desarrollo de webs con WordPress, y ahora además me ha cedido este espacio.

Así, desde aquí te quiero enseñar cómo se combinan mi tema favorito de WordPress y el plugin para eCommerce más utilizado.

Tabla de Contenidos

  1. Qué encontrarás en este artículo: GeneratePress y Woocommerce
  2. Plantillas para Woocommerce de GeneratePress
  3. El módulo Woocommerce de GeneratePress
  4. Conclusiones

Qué encontrarás en este artículo: GeneratePress y Woocommerce


El objeto de este artículo será ver las opciones que tienes en el tema GeneratePress para hacer una tienda online con Woocommerce.

Cómo ya sabrás, GeneratePress es un tema freemium. Es decir, que dispone de versión gratis en repositorio oficial de WordPress y versión de pago que puedes conseguir en la propia página web de GeneratePress.

Si empiezas tu proyecto web, con GeneratePress tendrás un tema:

  • Ligero: No carga tu WordPress y por lo tanto facilita la velocidad de carga de tu sitio.
  • Flexible: Es un tema que sirve para cualquier tipo de web.
  • Adaptado a los diferentes dispositivos y tamaños de pantalla.
  • Útil para usuarios principiantes por su facilidad de uso.
  • Con posibilidades más avanzadas para usuarios más experimentados y para profesionales.
  • Además, traducido al español. No obstante, las últimas novedades quedan pendientes de traducción.

Se trata de uno de los temas más bien valorados de WordPress tanto por sus prestaciones como por el soporte de su desarrollador, Tom Usborn.

Para poder utilizar las opciones que verás en este artículo, necesitas tener activados los módulos de Site Library, y el de Woocommerce que sólo tienes disponible en la versión de pago de GeneratePress. Este último lògicamente sólo tiene sentido si el plugin de Woocommerce está activado en tu sitio para crear la tienda online.

Si quieres conocer los detalles del proceso de instalación de la versión premium, tengo un artículo en mi blog que te puede ayudar: Cómo instalar GeneratePress Premium (en catalán).

Plantillas para Woocommerce de GeneratePress


Woocommerce amb GeneratePress: mòdul de plantilles

GeneratePress dispone de una colección de plantillas preparadas para ahorrarte tiempo en la creación de una página.

Empezar una web desde cero puede ser pesado. Si no tienes unos mínimos de conocimientos de disño web, o no estás inspirado, es muy fácil que tengas tu primer bloqueo justo al principio. Composición y maquetación de páginas, seleccionar colores y tipografías…

Te puedes perder probando diferentes opciones y no conseguir un resultado que te convenza.

GeneratePress te rescata de esta situación con su colección de plantillas predefinidas. Puedes acceder a ellas desde su página en Apariencia > GeneratePress de tu WordPress. O si aún no tienes GeneratePress puedes dar un vistazo desde su web.

En la parte superior tines las pestañas Módulos, Elementos y Site Library, que es en la que debes hacer click para ir a las plantillas. Si no te aparece la librería es que primero debes activar la colección de plantillas en el apartado de módulos.

Woocommerce amb GeneratePress: plantilles per a botigues online

Actualmente ya hay más de 30 plantillas listas para ser cargadas en tu WordPress con GeneratePress.

Elige tu plantilla

Para crear tu tienda online, actualmente ya tienes hasta 6 plantillas para trabajar con Woocommerce:

  • Seller
  • Prime
  • Target
  • Niche
  • Merch
  • Imprint

Naturalmente instalar una de estas plantillas no te va a liberar de hacer todo el trabajo de configuración de la tienda, pero sí que te ayuda en aspectos más estéticos y de diseño y pueden ser un buen punto de partida.

Seller

Un sitio con Woocommerce súper simple para empezar rápidamente tu tienda online.

Prime

En este caso se trata de una tienda online inspirada en Amazon construida con los bloques de Gutenberg.

Target

Otro sitio Woocommerce simple y de estilo moderno para mostrar tus productos. Target viene integrado con WP Show Posts, Lightweight Social Icons, MailChimp y HappyForms.

Evidentmente, puedes cambiar estas integraciones por tu cuenta y utilizar tus herramientas preferidas.

Niche

En el caso de Niche, tienes una plantilla para una tienda de diseño minimalista enfocada en las imágenes de los productos. Simple y sin distracciones.

Merch

Merch es un tienda Woocommerce que aprovecha todas las características de GeneratePress Premium 1.8 con un blog personalizado y una landing page hecha con Gutenberg.

Imprint

Y finalmente, la última incorporación a la librería de GeneratePress a día de hoy es esta plantilla para una tienda online súper minimalista. Está especialmente indicada para vender pósters, impresiones o productos basados en la imagen.

Navegando por las plantillas

Si sitúas el puntero encima de cualquiera de las miniaturas de las plantillas obtienes una pequeña descripción de las características de la plantilla, que tienes traducidos bajo las anteriores imágenes, y dos botones para acceder a más detalles o directamente a una previsualización.

Primero hacemos click en Detalles:

Woocommerce amb GeneratePress: Detall de Plantilles

Entonces se abre una ventana con información sobre la plantilla. En general, en todas tienes diferentes especificaciones:

  • Importación de las configuraciones de personalización del tema
  • Importación de contenido opcional de muestra
  • Plugins: Según la plantilla, tienes información de plugins gratis que se instalarán y activarán automáticamente, plugins necesarios ya instalados y plugins de pago que necesitas instalar manualmente para cargar correctamente la plantilla. En el caso de las plantillas de tienda online, si no lo has hecho se instalará como mínimo Woocommerce.

Desde esta pantalla también puedes hacer click en el botón de previsualización para ver cómo es la plantilla. En la ventana de previsualizaciones puedes elegir el dispositivo de pantalla: escritorio, tablet o móvil. También te permite navegar por las diferentes plantillas directamente.

Cierra la previsualización haciendo click en el botó «X» o «Detalles» y regresas a la ventana anterior.

Es importante elegir bién una plantilla antes de proceder a su instalación, porque si no te gusta después deberás borrar todos los añadidos y configuraciones incorporados a tu sitio.

Instalación de la plantilla

Si ya tienes localizada la plantilla que te gusta, para empezar el proceso de instalación debes hacer click en la casilla donde dice «I understand that this step will overwrite my Customizer settings. It is recommended that you only use the Site Library on a fresh site«.

Es decir, se trata de un aviso para aceptar que se añadan:

  • Las imágenes de muestra de la plantilla a tu mediateca.
  • Creación de páginas y/o entradas ejemplo.
  • Las opciones de personalización del sitio (diseño, colores, tipografías…).
  • Instalación y activación automática de plugins
  • Configuración de menús
  • Los widgets adecuados

Se recomienda utilizar sólo la instalación de plantillas en sitios nuevos.

1- Opciones del Tema

En primer lugar, cuando haces click en la casilla se activa el botón «Backup options» .

¡Así que allá vamos! Haz click en el botón Backup Options para continuar. Se descargará un archivo en tu ordenador con la configuración actual del tema, por si lo necesitas restablecer con sus actuales opciones. Entonces en botón cambia a Import Options que puedes clicar para cargar la nueva configuración.

En este punto ya tienes configurado el tema GeneratePress con los módulos necesarios para generar la apariencia de la plantilla escogida en el personalizador. De hecho, lo podrás comprobar desde la página de módulos.

2- Importación de contenido

A continuación, debes hacer click de nuevo en la casilla que ahora aparece para autorizar que se añada el contenido, opciones del sitio, menús, widgets y plugins. También te avisa que una vez ejecutado, este paso no se puede deshacer automáticamente.

Al verificar la autorización con la casilla se activa el botón «Import Content». Cuando lo aprietas empieza el proceso de instalación de la plantilla.

3- Final

Y finalmente, ya tienes la plantilla instalada. El último paso es hacer click directamente en el botón «View your Site» para ver cómo ha quedado tu sitio con la nueva configuración.

Eliminar o cambiar de plantilla

En caso que no te guste el resultado, siempre puedes escoger otra plantilla o restaurar la configuración que tenías antes.

Para hacerlo, lo más recomendable es que elimines todos los elementos de la plantilla: entradas, páginas, imágenes, plugins, menús, widgets, Elementos de GP (hooks, cabeceras, diseños)… Por lo tanto, elimina todos los elementos añadidos y vacía la papelera en cada caso para no dejar restos de elementos que no necesitas.

En lo que se refiere a la configuración de GeneratePress, desde la pantalla de módulos tienes que cargar el archivo de copia de seguridad en la caja de importación de configuración, o restablecer la configuración inicial de GeneratePress y borrar manualmente todos los elementos incorporados.

El módulo Woocommerce de GeneratePress


Woocommerce amb GeneratePress: el mòdul de personalització

Opciones Generales de Woocommerce

Hasta ahora hemos instalado una configuración y un contenido con una plantilla preparada. Pero con Woocommerce activado también tendrás toda una serie de parámetros añadidos al personalizador de tu WordPress para trabajar la apariencia de tu tienda online.

Las opciones comunes en los temas de WordPress compatibles con la plataforma de comercio electrónico son las siguientes:

Aviso en la Tienda

En Woocommerce > Aviso en la tienda puedes publicar un mensaje en toda la tienda. Por defecto viene con un mensaje de tienda demo para poder hacer pruebas, pero lo puedes utilizar para anunciar promociones, eventos o lo que tú quieras.

Sólo tienes que hacer click en la casiila de activar para que el aviso aparezca en la parte superior de cada página de la tienda.

Woocommerce con GeneratePress: personalización aviso en la tienda

Catálogo de productos

En Woocommerce > Catálogo de productos puedes definir tres parámetros.

En la página de la tienda puedes elegir que se muestren sólo productos, sólo categorías, o categorías y productos.

En la página de cada categoría puedes elegir que se muestren sólo productos, sólo subcategorías, o subcategorías y productos.

Y tienes un desplegable para seleccionar el orden de visualización de los productos:

  • Orden predeterminado
  • Popularidad: se muestran primero los más vendidos
  • Calificación media
  • Ordenar por más recientes
  • Por precio ascendente
  • Por precio descendente

Imágenes del producto

En Woocommerce > Imágenes del producto estableces las medidas de la imágen principal (anchura), de la miniatura (anchura) y el recorte de las imágenes. En esta relación de aspecto las puedes recortar a 1:1, crear una relación personalizada, o dejarlas sin recortar para que se muestren según su formato original.

Finalizar compra

En Woocommerce > Finalizar compra puedes personalizar algunos campos de la página de pago:

  • Los campos Empresa, Línea 2 de la dirección y Teléfono los puedes definir como opcionales, obligatorios, u ocultarlos.
  • Casilla para marcar los campos obligatorios con un asterisco.
  • Selección de las páginas de Política de Privacidad y de Términos y Condiciones. Esta selección servirá para que los enlaces correspondientes apunten a la URL correcta.
  • Y finalmente dos campos para introducir el texto de aviso de la política de privacidad y de la casilla de consentimiento de los términos y condiciones.

Opciones adicionales de personalización

Además de las anteriores opciones generales, con el módulo de Woocommerce de GeneratePress Premium activado también tienes parámetros adicionales para adaptar específicamente la apariencia de tu tienda online en las pestañas de Diseño de pantalla, Colores y Tipografía del personalizador.

Woocommerce con GeneratePress: opciones del personalizador

Diseño de pantalla > Woocommerce

En este apartado defines si quieres mostrar el carrito de la compra en el menú de GeneratePress y escoger entre tres iconos diferentes:

  • El típico carrito de compra de supermercado
  • Un bolso
  • Una cesta

Además, puedes elegir si quieres que el icono muestre el número de productos o el precio total.

Otra opción muy interesante es la posibilidad que se despliegue un mini carrito con el contenido de la cesta y botones de visualización o finalizar la compra desde el mismo menú cuando pasas por encima del icono de carrito elegido.

También puedes activar los «breadcrumps», o camino de migas de pan si quieres mostrar a tu visitante dónde se encuentra en la parte superior de la página.

En la página general de la tienda puedes definir los siguientes parámetros:

  • Formato de barras laterales en la tienda
  • Número de columnas por productos (de 1 a 6 columnas)
  • Alineación de las imágenes a la derecha, centro o izquierda
  • Número de productos por página
  • Alineación del texto a la derecha, centro o izquierda
  • Y toda una serie de casilles para escoger si quieres visualizar determinados elementos o no, como el título de la página, de producto, imágenes, botones, revisiones, precio, descripción…

En la página de cada producto singular también puedes definir muchos de los mismos parámetros anteriores, como el formato de barra lateral, o si quieres mostrar las pestañas informativas o los productos relacionados.

Y finalmente tienes una casilla para activar el modo libre de distracciones en la página de pago. Esto desactiva las barras laterales, widgets de pié de página o sticky menú que tengas establecido por defecte.

Colores> Woocommerce

En este apartado puedes personalizar todos los colores que se utilizan específicamente en tu tienda online: Títulos de productos, textos, botones, estrellas de valoración, precios, pestañas o mensajes.

Tipografía > Woocommerce

Puedes definir el peso de la fuente y la transformación de texto específicamente para la tienda.

También tienes los siguientes parámetros configurables tanto para escritorio como para móvil:

  • Tamaño de fuente
  • Tamaño de la fuente de los títulos de productos relacionados

Conclusiones


Crear una tienda online siempre es una tarea compleja. Trabajar tu Woocommerce con GeneratePress te da facilidades, pero igualmente deberás configurar todos los aspectos de un sitio web presencial más toda la estructura y funcionalidades de un e-Commerce: páginas específicas, diferentes tipos de productos, pasarelas de pago o envíos, facturación e impuestos, entre muchos otros aspectos y detalles.

Con GeneratePress crear tu propia tienda online con Woocommerce es más sencillo y dispones de opciones de personalización que te facilitan mejorar la experiencia web de tus usuarios.

Desde añadir diferentes modelos de carrito de compra en el menú hasta facilitar el proceso de pago, pasando por la personalizació de las páginas de tienda y de los productos singulares, todos los parámetros los puedes definir desde el mismo personalizador.

Además, como hemos visto, dispones de plantillas ya preparadas que te ayudan a dar un aspecto profesional a tu comercio online.

Sin duda, GeneratePress Premium para Woocommerce es una gran elección.

Si quieres saber más sobre Woocommerce y cómo tener tu propia tienda online, no dejes de visitar mi blog en JoanLlompart.com. Mis suscriptores actualment se pueden descargar gratis la guía «¿Qué necesito para tener una tienda online?» (En catalán: «Què necessit per tenir una botiga online?«).

Què necessit per tenir una botiga online? Ruta amb els preparatius per crear el teu ecommerce

Si aún no tienes tu e-Commerce, te animo a empezarlo desde ahora mismo con WordPress y la combinación GeneratePress+Woocommerce.

Y por supuesto, no dejes de probar para tu proyecto el servicio de alojamiento web de Wetopi que es esta casa.

Wetopi como servidor especializado en WordPress con tecnología de contenedores es un alojamiento totalmente recomendable para webs exigentes en cuanto a recursos. Así, los sitios que utilizan Woocommerce que tienen requerimientos de mayor velocidad de carga y seguridad adicional aquí encontraran sus necesidades bien cubiertas.

¡Gracias de nuevo a Wetopi por cederme este espacio!

Joan LlompartWoocommerce con GeneratePress
Share this post