StoreFront, Woocommerce y Page Builder. El trío perfecto.

Es innegable que woocommerce le está comiendo la tostada a Prestashop y Magento con más de un 33% de tiendas onlines creadas a día de hoy con este plugin y CMS. Esa vieja frase de: “Para una tienda online pequeña usa WordPress” ya podemos decir que: “Si quieres una gran tienda online, hazla con WordPress y Woocommerce”

Pero para que estas tiendas estén lo mejor preparadas posible para aguantar todo el trabajo que conlleva, lo mejor es instalar un Theme que esté preparado para ello y como no, los plugins necesarios para tener nuestra tienda online al 100% y lista para la venta.

Si hablamos de Theme de WordPress que estén adaptados para que funciones con este CMS y con el mejor plugin para tiendas online, “Woocommerce” seguramente encontraremos miles, pero en este post nos centraremos en StoreFront, un Theme 100% compatible con Woocommerce y además rápido, sin excesivo código y muy flexible gracias a sus extensiones que nos dan una gran gama de adaptabilidad para encontrar lo que necesitamos. También contamos con la tranquilidad de que esta creado por los desarrolladores del plugins de woocommerce. Esto nos asegura una compatibilidad fiable y completa.

– Cómo empezar a trabajar con Storefront.

Nos dirigimos al repositorio de Temas (plantilla o Theme) de nuestro WordPress (Asumimos que ya tenemos una instalación de WordPress, sino sabes como hacerlo, puedes ver ir a este post) Apariencia–>Temas pulsamos en añadir nuevo y buscamos StoreFront, pulsamos en Instalar y Activar.

Ahora, como somos unos buenos implementadores, vamos a crear un Child Theme para este Tema. Hoy vamos a hacerlo desde un plugin de usar y tirar, pero aquí os dejos un artículo que habla de que son y cómo crear child theme. El plugin que utilizaremos para crear el child themes es Child theme configurator por Lilaea Media. Una vez instalado y activado, nos dirigimos a Herramientas–>Child Themes 

Para crear el child theme con este plugin, lo único que debemos hacer es en el paso 2 seleccionar el theme StoreFront. Luego pulsamos en Analyze. En las opciones posteriores sólo tenemos que cambiar en el punto 4 el nombre del directorio por uno que se adapte a la tienda que estás creando, Ejemplo: mi-tienda-online y para que personalicemos un poco más este Child Theme, en el paso 7, desplegamos y cambiamos esos datos para adaptarlos a nuestro proyecto. Por último, pulsamos en Create new Child Theme. Una vez se hayan hecho las comprobaciones y creado el child theme, tendremos que activarlo desde Apariencia–>Temas. 

Ya podemos borrar el plugin Child theme configurator sin ningún temor.

– Cómo personalizar StoreFront

La personalización se divide en dos partes, la personalización que podemos hacer por defecto y en una segunda instancia la que nos permite instalar una serie de plugins que nos ayudarán a mejorar el aspecto de nuestra tienda online

Personalizaciones de fábrica.

La verdad es que no es nada del otro mundo, pero nos ayudan a familiarizarnos con el tema. estas personalizaciones de StoreFront las encontraremos desde Apariencia–>Personalizar

Opciones destacadas.

Identidad del sitio: Cambiar el título de la web o añadir el logo

Cabecera: Añadir un fondo o cambiar los colores de la cabecera y la tipografía del menú.

Pie de Página: Cambiamos el color de fondo y el de la tipografía. más adelante instalaremos un plugin para cambiar los textos.

Fondo: Cambiamos el fondo de las páginas.

Tipografía: Cambiar el color de esta. Más adelante veremos un plugin para realizar una mayor personalización.

Botones: Cambiar el aspecto de los botones. Más adelante veremos un plugin para realizar una mayor personalización.

Diseño: Cambiar el layout. Más adelante veremos un plugin para realizar una mayor personalización.

Menú: Instalar los menús en diferentes opciones del theme.

Widgets: Nos da la posibilidad de añadir hasta 4 widgets en el pie de la página cambiar los widgets de la barra lateral o eliminarlos. 

 

Personalizaciones “Personalizadas” con StoreFront Designer (plugin de pago). 

Lo primero y fundamental es instalar Woocommerce este y los demás plugins que vienen a continuación lo instalaremos desde la sección de plugins.

Si necesitamos unos datos de ejemplo de woocommerce para maquetar nuestra tienda podemos utilizar este archivo  que debemos descomprimir antes de utilizarlo con el importador de WordPress.

La personalización del plugin woocommerce es otra historia. Podéis ver un pequeño manual de instalación de woocommerce desde este enlace.

– Cabecera.

Con el plugin StoreFront Designer instalado, nos dirigimos a Apariencia–>Personalización–>Cabecera aquí se muestran una nuevas opciones. La posibilidad de tres nuevos Layout para la cabecera y también la opción de poder dejar la cabecera de forma total (seleccionado Sticky header) fija en la pantalla cuando nos desplazamos hacia abajo.

      – Pie de página.

Este plugin nos da la posibilidad de cambiar el texto del pie de página y eliminar los créditos que aparecen de storefront y woo themes

– Tipografía.

Aquí el plugin añade la opción de seleccionar un puñado de tipos de fuentes, para mi gusto bastante pobre, y la opción de aumentar el tamaño de la fuente de la web. Nada del otro mundo.

– Botones.

Lo que añade aquí el plugin si que vale la pena. Nos da la posibilidad de cambiar el aspecto total de todos los botones de la web, dando un aspecto mas atractivo a estos desde las opciones de Background style, Button radius y Button size

      – Diseño.

Añade un par de opciones de diseños para la estructura de la web

 

Personalizaciones “Personalizadas” con StoreFront woocommerce customizer (plugin de pago). 

– Cabecera.

Nos añade 2 opciones más de configuración. quitar el buscador si lo tenemos activado y mover de posición el carrito y el total de la compra debajo del menú.

Donde este plugin es realmente potente es en la customización de la ficha de los productos categorías, página de compra etc… Vamos a echarle un vistazo.

Estando en Apariencia–>Personalización si en la pantalla de configuración pulsamos en la página Tienda nos aparece una nueva opción shop en donde nos regala una serie de opciones de configuración para nuestra tienda increíbles. No las vamos a repasar porque son muy intuitivas. Sólo tienes que probar y dejar las que mejor se adapten a tu gusto.

Pero aún tenemos más. Cuando pulsamos en cualquier producto nos aparece Product Details, adivinar para que sirve, pues sí, para dejar la ficha de nuestro producto como más nos guste. Lo impresionante de este plugin en este apartado es que si quieres modificar un sólo producto en particular de la configuración general que has realizado en este apartado lo puedes hacer. En la ficha del artículo encontrarás una pestaña, Storefront, en donde podrás hacerlo.

 

Personalización de la página Inicial (Home)

Dentro del repositorio de plugins de wordpress y más específicamente los que ofrece woocommerce, estos ofrece varios plugins para poder personalizar la pagina de inicio de nuestra web cuando en una de esta seleccionamos desde l aopcion de Atributos de página la opción de página de inicio que nos ofrece el theme Storefront. Una vez hecho esto, tenemos que ir a Ajustes–>Lectura y en la opción Página frontal muestra  seleccionamos la opción Una página estática y en el desplegable Página de inicio elegimos la página que hemos definido como página de inicio. Y como por arte de mágina nos aparece una serie de módulos que completan nuestra página de inicio. Lo lógico y normal es que no queramos tener lo que nos instala por defecto el theme. Para solucionar esto, vamos a instalar el plugin Homepage control que encontraremos en el repositorio de plugins de forma gratuita en wordpress. Para controlar las opciones que nos brinda este plugin, nos tenemos que dirigir a Apariencia–>Personalizar  y buscamos una nueva opción Homepage Control, que es desde donde gobernaremos estos cambios. Existe otro plugin que complementa el anterior que es StoreFront HomePage Extra Sections. Lo que hace es añadir más opciones en el mismo panel del plugin anterior.

No entraré a explicar el funcionamiento de los plugins anteriores porque son muy intuitivos y además, lo que os quiero recomendar, es que instaléis los plugin Page Builder de SiteOrigin  SiteOrigin Widgets Bundle. Son simplemente maravillosos. Nos permiten crear nuestras página de forma inimaginable a partir de bloques gráficos. Este plugins con su complemento se merecen un tutorial entero, que os prometo que haré. De momento os dejo con la miel entre los labios y os animo a que lo probéis vosotros mismos.

 

Personalización de la página del carrito

Esta página es muy importante, ya que es el proceso checkout, donde nuestro futuro cliente no debe perderse a la hora de pagar el producto que ya tiene en el carrito.

Para que esta proceso tan importante este lo mejor optimizado posible, vamos a utilizar un plugin Storefront Checkout Customizer  otro plugin de pago pero vale mucho la pena.

Para poder modificar este proceso de pago, nos tenemos que dirigir a la página de checkout y desde el personalizador de wordpress, como ya viene siendo habitual, podremos personalizar esta página a través de una pestaña llamada checkout.

Esta customización es muy sencilla. la que yo recomiendo es marcar la opción Distraction Free CheckoutToggle the distraction free checkout que nos elimina todo tipo de distracciones que puedan tener nuestro comprador. Y en el combo de Checkout layout poner Standar. La casilla de Two Step CheckoutToggle the two step checkout effect que NO es recomendable marcala.

Un plugin gratuito que se complementa perfectamente con este es woo checkout field editor pro el cual no permite eliminar o modificar los campos de la página de checkout.

Otra opción que podemos usar es hacerlo por código. Lo único que tenemos que hacer es dejar en el código de lo que queremos eliminar comentando el resto y pegarlo en function.php

¿Te he ayudado a solucionar tu problema?

¿Te gustaría ayudarme a seguir con mi trabajo?
Si pulsas en el anuncio que verás abajo, aunque no te interese,estás aportando con aproximadamente 0,05€ que me pagará Google. A ti no te costará nada realizar ese pequeño clic. Parece poco pero me ayuda mucho a poder seguir escribiendo artículos de buena calidad y a pagar mis cosillas…

¡¡¡Muchas Gracias!!!

Déjenos su comentario