Tutorial: Crear tienda online con WooCommerce – parte 4 – Instalar Woocommerce.

Vamos a continuar con el tutorial para aprender a crear tiendas online con WordPress y Woocommerce. Hoy vamos a ver c贸mo instalar woocommerce para convertir nuestro WordPress en una tienda online.

Instalar Woocommerce:

Lo siguiente que haremos es instalar el plugin de WooCommerce.

Como vimos en la introducci贸n, WooCommerce es un plugin que permite implementar una tienda online totalmente funcional en tu web sin necesidad de escribir una sola l铆nea de c贸digo.

Para instalarlo desde la parte de administraci贸n de wordpress posicionamos el rat贸n sobre la secci贸n 鈥Plugins鈥 del men煤 de la barra de la izquierda y hacemos clic en 鈥A帽adir nuevo鈥. 

Ahora debemos escribir 鈥woocommerce鈥 en el buscador de plugins:

Una vez tengamos localizado el plugin de Woocommerce pulsaremos en su bot贸n 鈥Instalar ahora鈥:

Tras unos segundos se habr谩 instalado el plugin, ahora debemos activarlo, por lo que vamos a hacer clic en el bot贸n 鈥Activar鈥:

Configuraci贸n inicial de Woocommerce

Cuando activas el plugin la primera vez aparece una serie de campos que tenemos que rellenar para configurar nuestra tienda, en primer lugar tenemos que introducir la direcci贸n f铆sica de nuestra tienda en caso de que dispongamos de una, esto es para que Woocommerce configure las opciones de moneda y las reglas de env铆o autom谩ticamente. Esta informaci贸n no ser谩 visible p煤blicamente y puedes cambiarla f谩cilmente m谩s tarde, por lo que si no est谩s seguro de que direccion poner en este momento puedes poner cualquier direcci贸n, la tuya por ejemplo, y pulsar en el bot贸n 鈥Seguir鈥:

Puede que te aparezca el siguiente mensaje para compartir datos con Woocommerce para que los desarrolladores puedan conocer datos de uso de la herramienta y realizar mejoras:

Dejo a tu elecci贸n pulsar en 鈥溌i, cuenta conmigo!鈥 o 鈥淣o, gracias鈥, no variar谩 en nada el desarrollo de este tutorial.

En el siguiente paso seleccionaremos a qu茅 sector pertenece nuestra tienda:

Elige el que m谩s se ajuste a lo que vas a vender, si no coincide ninguno puedes seleccionar otra. Despu茅s hacemos clic en 鈥Seguir鈥.

En la siguiente pantalla tenemos que seleccionar que tipo de productos vamos a vender, si vendemos productos f铆sicos seleccionaremos 鈥淧roductos f铆sicos鈥, si vendemos productos virtuales seleccionaremos 鈥Descargas鈥, estas dos opciones son gratuitas, el resto son de pago, como en nuestro tutorial vamos a vender productos f铆sicos seleccionamos 鈥Productos f铆sicos鈥 y pinchamos en 鈥Seguir鈥:

En la siguiente pantalla seleccionaremos cu谩ntos productos vamos a tener en nuestra tienda, pon lo que quieras, si no lo tienes claro puedes poner que a煤n no tienes productos, en realidad estos datos no son relevantes. Tambi茅n puedes indicar si est谩s configurando la tienda para un cliente:

A la pregunta de si actualmente vendes en otro lugar mejor le decimos que n贸, si le decimos otra opci贸n nos har谩 preguntas sobre nuestros ingresos, en caso de que no te importe dar esa informaci贸n puedes responder lo que consideres oportuno.
Para continuar una vez m谩s hacemos clic en el bot贸n 鈥Seguir鈥.

Despu茅s nos mostrar谩 una opci贸n para instalar una serie de plugins 鈥渞ecomendados鈥. no queremos en este momento recargar nuestra tienda con m谩s plugins de lo necesario, recuerda que la idea es mantener todo lo m谩s simple posible as铆 que vamos a desmarcar la casilla 鈥A帽ade caracter铆sticas de negocios recomendadas para mi sitio鈥 y pulsamos en 鈥Seguir鈥:

En el 煤ltimo paso tenemos que seleccionar el tema que vamos a utilizar, como nosotros ya hemos instalado el tema Astra pulsamos el bot贸n 鈥淪eguir con mi tema activo鈥:

Al terminar nos mostrar谩 una pantalla de bienvenida:

Pulsamos en Siguiente hasta llegar a la 煤ltima pantalla y despu茅s pulsamos en el bot贸n 鈥淰amos鈥:

Ahora debemos estar en la secci贸n WooCommerce 鈫  Inicio, si por alg煤n motivo has cerrado la pesta帽a tienes que entrar al panel de administraci贸n y acceder a esta secci贸n desde el men煤 de la barra de la izquierda.

En el cuadro 鈥Finalizar configuraci贸n鈥 vamos a seleccionar la 煤ltima opci贸n, 鈥淧ersonalizar mi tienda鈥:

Aqu铆 vamos a importar algunos productos de prueba para que podamos ver c贸mo queda el aspecto de nuestra tienda, cuando todo est茅 preparado los eliminaremos y dejaremos solo nuestros productos, pero ahora nos van a venir bien para empezar a dar forma a nuestra tienda, pulsaremos por lo tanto en el bot贸n 鈥淚mportar los productos鈥.

Una vez se hayan importado los productos, en el paso 2 vamos a crear una p谩gina de inicio, despu茅s la modificaremos a nuestro gusto, pero de momento ser谩 un punto de partida, pulsamos por lo tanto en el bot贸n 鈥Crear una p谩gina de inicio鈥:

Esto nos habr谩 creado una p谩gina de inicio, veremos luego el resultado.

En el paso 3 ya estar谩 seleccionado el logotipo de nuestra tienda que definimos anteriormente, de no ser as铆 podremos seleccionarlo aqu铆. 

Debemos pulsar en 鈥Ejecutar鈥 para pasar al siguiente paso:

Por 煤ltimo en 鈥Establece un aviso de la tienda鈥 nos permite a帽adir un texto destacado que se mostrar谩 en todas las p谩ginas de la tienda, es opcional y podemos dejarlo en blanco, para finalizar pulsaremos en 鈥Tarea completada鈥:

El resto de opciones las configuraremos m谩s adelante desde los ajustes de WooCommerce. 

Al instalar WooCommerce se han creado nuevas secciones en el panel de wordpress:

Tenemos una nueva secci贸n llamada 鈥Woocommerce鈥 donde configuraremos todo lo relacionado con la tienda online, gestionaremos los pedidos, veremos los clientes etc.

Tambi茅n se ha creado una secci贸n llamada 鈥淧roductos鈥 donde introduciremos y gestionaremos los productos que vamos a vender en nuestra tienda.

En 鈥An谩lisis鈥 veremos estad铆sticas de ventas de nuestra tienda.

Tambi茅n se ha creado una secci贸n llamada 鈥Marketing鈥 donde podemos crear cupones e instalar algunas herramientas de marketing.

WooCommerce nos ha creado tambi茅n una serie de p谩ginas autom谩ticamente, en las opciones de la barra de la izquierda seleccionamos 鈥P谩ginas鈥 y 鈥Todas las p谩ginas鈥 y podemos ver qu茅 p谩ginas tenemos creadas en este momento:

Como vemos WooCommerce nos ha creado varias p谩ginas que son las p谩ginas est谩ndar de cualquier tienda online y que nos ofrecen toda la funcionalidad que necesitamos para gestionar todo el proceso de compra sin que necesitemos escribir ni una sola l铆nea de c贸digo.

Las p谩ginas que WooCommerce ha creado para nosotros son:

  • Carrito: Es la p谩gina donde veremos los productos que hemos a帽adido al carrito.
  • Finalizar compra: Es la p谩gina donde se realiza el pago.
  • P谩gina de inicio: Es la portada de nuestra web, es lo primero que van a ver nuestros clientes cuando accedan a nuestra tienda online. 
  • Mi cuenta: Es la p谩gina con los datos del usuario.
  • Tienda: Es la p谩gina de la tienda donde se muestran los productos.

M谩s adelante veremos c贸mo personalizar nuestra tienda.

Llegados a este punto vamos a ver qu茅 aspecto tiene ahora nuestra tienda, arriba a la izquierda encontraremos un icono de una casa y el nombre que le hemos dado a nuestra tienda, si pinchamos en 茅l y seleccionamos 鈥Visitar el sitio鈥 accederemos a la parte p煤blica de nuestra web:

El aspecto de nuestra tienda ser谩 algo similar a esto:

No est谩 nada mal, sin apenas esfuerzo tenemos la estructura de una tienda creada.

Tenemos una portada que muestra lo que ofrecemos en nuestra tienda. 

Podemos incluso hacer el proceso de compra de un producto, sin embargo no es posible terminar el proceso de compra ya que no hemos configurado los m茅todos de pago, tambi茅n hay otras muchas cuestiones que configurar para dejar tu tienda a punto para empezar a vender. Pero solo con lo que hemos visto ya podemos intuir la potencia de Woocommerce y todo lo que nos ofrece ya predise帽ado sin tener que escribir ni una sola l铆nea de c贸digo.

El pr贸ximo post veremos c贸mo configurar los ajustes de Woocommerce.

Este tutorial es un fragmento de mi libro “Crea tu propia tienda online con WordPress y WooCommerce desde cero y sin saber programar“, si quieres disfrutar de todo el contenido completo y de paso apoyar al autor puedes comprar el libro en amazon:

Un saludo, y si a煤n no lo has hecho no olvides suscribirte a mi blog para no perderte los pr贸ximos posts 聽:-),

Tambi茅n puedes seguirme en Twitter en 鈥嶡revigames y no olvides que me ayudas mucho聽si compartes este post en las redes sociales.

Deja una respuesta

Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *

Este sitio usa Akismet para reducir el spam. Aprende c贸mo se procesan los datos de tus comentarios.