En este tutorial vamos a ver cómo instalar el tema o theme «Storefront» de WooThemes para WooCommerce y darle un mejor aspecto a nuestra tienda online.

Storefront es un tema gratuito de uso muy extendido. Lo podemos utilizar como base para nuestro sitio de comercio electrónico o simplemente para probar y aprender el funcionamiento del plugin WooCommerce.

Tema Storefront para woocommerce - dinapyme

Cuando instalamos WordPress y posteriormente el plugin WooCommerce, si no instalamos ningún tema, el aspecto seguro que no es el que deseamos para nuestro negocio online. Es por eso que podemos recurrir a la instalación de Storefront para que tenga un mejor aspecto.

Bien, suponemos que ya tenemos instalado el plugin WooCommerce en nuestro WordPress y hemos creado algún producto, aunque sea de prueba.

Storefront, al ser un tema de WooThemes lo podemos encontrar en su página oficial: https://www.woothemes.com/storefront/. En esta página también encontraremos documentación sobre el mismo para su uso y manejo. También dejo en enlace a la demo: http://demo.woothemes.com/storefront/.

También lo podemos instalar directamente del repositorio de temas de WordPress.org. Ésta es la opción que vamos a hacer aquí por se la más sencilla y que menos tiempo nos va llevar porque no tenemos que descargar el tema para instalarlo.

Antes de instalar Storefront para WooCommerce

Antes de nada, muestro una captura de pantalla del aspecto que tiene mi tienda online antes de instalar Storefront, es decir, muy básica y sin aspecto de un negocio electrónico:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Como decía, no tiene aspecto de tienda online. Esto lo vamos a arreglar un poco ahora mismo.

Instalar Storefront

Para instalar el tema Storefront o cualquier tema, nos dirigimos al apartado «Apariencia» –> «Temas» del panel de administración de nuestro WordPress:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Si no hemos añadido ni eliminado ningún tema hasta ahora, se nos mostrará una pantalla similar a la siguiente:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Vemos que están instalados los temas que vienen por defecto con la instalación de WordPress.

Para instalar un nuevo tema pulsaremos sobre «Añadir un tema nuevo» en le recuadro o espacio donde están los temas o bien en el botón «añadir nuevo» situado en la parte superior. En cualquier caso se mostrará la siguiente pantalla:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

En el cuadro de búsqueda introducimos «storefront» como se muestra en la captura anterior.

En un momento nos muestra los resultados. Nosotros queremos el primero: «Storefront». Posicionamos el cursos del ratón encima de la imagen correspondiente a Storefront:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Como vemos nos permite verlo antes de instalar o instalarlo directamente. Procedemos a su instalación pulsando sobre el botón «Instalar».

En unos segundos se habrá instalado y mostrará el siguiente mensaje:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Ahora pulsamos sobre «Activar» y ya lo tenemos en la lista de temas instalados en nuestro WordPress:

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Ya está instalado el tema Storefront

A continuación vamos a ver el aspecto que tiene ahora nuestra tienda online y para ello abrimos la url: www.mitienda.com/tienda. Cada uno con su url.

Dinapyme - Instalar tema Storefront para WooCommere en WordPress

Ahí lo tenemos.

También os dejo un video tutorial sobre cómo hacerlo:

 

Por supuesto sería ideal tener más productos instalados pero esto lo haremos en un próximo tutorial en el que instalaremos el contenido de demostración para que tengamos algo de contenido en nuestra tienda online y nos podamos hacer una mejor idea del aspecto que puede llegar a tener.

También nos faltan configuraciones típicas pero esto es tema para otro artículo.

Espero que os sirva de ayuda y cualquier duda me la podéis hacer llegar a través del formulario de contacto.

Saludos.

Autor: Oscar Abad Folgueira

Programador y desarrollador WordPress.