CREA TU TIENDA

ONLINE CON

WOOCOMMERCE

www.pepacobos.es

Copyright ©2015 Pepa Cobos. Todos los derechos reservados.

Puedes imprimir una copia de este documento para tu uso personal. Excepto para ese fin, ninguna parte de esta publicación puede ser reproducida, guardada o transmitida

de cualquier forma, ya sea electrónica, mecánica, grabada, fotocopiada, escaneada o por

cualquier otro medio sin el permiso expreso del autor. Las peticiones al respecto deben hacerse llegar a pepacobos@pepacobos.es

Descarga de responsabilidad: Aunque el autor ha puesto el máximo empeño en preparar esta guía y en que todo su contenido esté actualizado y correcto, los consejos y

estrategias contenidos en la misma pueden no ser adecuados para tu situación particular.

En caso de duda deberías consultar con un profesional. El autor no se hará responsable en ningún caso por ninguna pérdida de beneficios o cualquier otro efecto indeseado que

se produzca como consecuencia de la aplicación de estos consejos.

Algunos de los enlaces que aparecen en esta guía pueden ser enlaces de afiliado,

lo que quiere decir que gano una pequeña comisión por cada producto vendido a través

de ellos aunque NUNCA recomiendo nada que no haya probado antes y me guste.

WOOCOMMERCE PARTE 1

WooCommerce es un plugin de Wordpress (WP). Añade a tu instalación de WP, una

serie de páginas y widgets que te ayudarán a crear tu tienda online.

Este es el enlace a WooCommerce

www.woothemes.com/woocommerce/

Trabaja con cualquier tema de WP pero en el caso de Genesis necesita una ayuda externa para que funcione correctamente.

Hay temas hijos de Genesis que ya vienen preparados para funcionar con WooCommerce sin necesidad de ayuda (aunque como verás es una acción que no tiene

absolutamente ninguna dificultad) como por ejemplo los de Oh Hello Designs cuya página web puedes visitar desde aquí: www.ohhellodesigns.com

Instalación de WooCommerce

Lo primero que hay que hacer es entrar en el panel de control de WP, ahí a Plugins-

Añadir Nuevo. En buscar pondremos WooCommerce. E instalamos el que tiene mas de 7 millones de descargas.

Una vez instalado, activamos el plugin. Salen varios avisos (pueden aparecer uno, dos o más dependiendo de tu instalación).

El primer aviso a tener en cuenta es el que nos dice que tenemos que instalar las páginas necesarias por WooCommerce para funcionar.

También nos aparece el aviso para comprobar si queremos o no mandar parámetros

de configuración del plugin a los desarrolladores para ayudarles en futuras versiones.

Por último, nos recuerda que hay que integrar Genesis con WooCommerce.

Instalamos las páginas necesarias.

Y ahora, ya de forma impepinable, tenemos que hacer que sea compatible con Genesis.

©Pepa Cobos 2015

WOOCOMMERCE PARTE 2

Cómo conectar WooCommerce con Genesis.

Tenemos Genesis Connect for WooCommerce, un plugin gratuito. Hay que instalarlo, desde el panel de control de WP dentro de plugins- Añadir nuevo.

Buscamos por nombre e instalamos. Una vez instalado hay que activarlo . En ese

momento te avisará de que hay que insertar una línea de código en el archivo functions.php del tema hijo para que todo quede funcionando. El código a insertar es el

siguiente:

add_theme_support  (‘genesis-­‐coonet-­‐woocommerce’);

Entramos a FileZilla y pegamos la línea la final de la página.

Ahora te tienes que fijar en si el texto que ves en las opciones de WooCommerce

está en español o en inglés. Si no te aparece traducido tendrás que regenerar la traducción. Puede que directamente ya te haya salido, si es así enhorabuena; si no vamos a

“System Status” debajo de WooCommerce, y arriba elegimos “Tools” y bajamos hasta donde pone “Force Translation Upgrade” y ya está.

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 3

Hay algo que debes de tener claro desde el principio, después de la instalación, la web no ha cambiado en absoluto. WooCommerce no toca nada a no ser que tú quieras.

Lo único que puedes observar es que tienes un widget de WooCommerce en el desktop inicial.

WooCommerce instala varias páginas y varios widgets.

PÁGINAS

•Cart- Es el carrito

•Checkout - Pago

•My Account - Mi cuenta

•Shop - Tienda

•Contact Page - Página de contacto

WIDGETS

•Búsqueda de producto

•Capa de filtros de navegación

•Capa de Navegación WooCommerce

•Carrito de WooCommerce

•Categorías de producto

•Etiquetas de producto

•Filtros de precio

•Productos mejor valorados

•Productos vistos recientemente

•Productos WooCommerce

AJUSTES DE WOOCOMMERCE

Tenemos que entrar en WooCommerce - Ajustes y entramos en los primeros que son

“General”

Lo primero es señalar en qué ubicación nos encontramos, en nuestro caso es España (o la que sea).

©Pepa Cobos 2015

Lugares de venta- Elige a qué paises quieres vender.

En Default customer address elegimos “Geolocalizar dirección” para que la web directamente interprete desde qué pais está accediendo nuestro cliente.

La otras dos opciones no las tocamos.

En Opciones de Moneda elegimos la moneda en la que vamos a realizar las transacciones.

Posición de moneda a la derecha. Separador de miles con un punto y el separador decimal una coma y dos posiciones decimales. (Estos ajustes dependerán lógicamente de

la moneda elegida)

Siguiente opción - “Productos”

En general no toco nada, elijo unidad de peso y de medida. Habilitas o no las calificaciones (que tus usuarios puedan opinar sobre tus productos)

Luego Visualización: Elegimos cuál es la página de tienda (ahora es el momento de crear la tuya propia)

Mostramos por categorías y subcategorías y no por productos pero puedes elegir lo

que quieras aquí.

Las medidas de imágenes las dejamos tal y como están pero apúntalas para saberlas

y poder hacerlas a esa medida exacta para que no se distorsionen.

Inventario: Activamos la gestión de stock o no y decidimos si queremos activar la congelación o no.

Notificaciones de stock bajo o sin stock

La visibilidad de stock agotado y cómo mostrar que hay bajo stock a los compradores.

Productos descargables: Lo dejamos en forzar descarga

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 4

Ahora toca el turno de “Impuestos”. Podemos activarlos o no activarlos. Recuerda siempre preguntar a alguien que sepa de este tema.

En principio, por lo que yo se, habría que cobrar el IVA al tipo del pais de la persona que compra.

Tienes que decidir si el precio es con impuestos incluidos o sin ellos. De cara al

cliente lo mejor es que el precio sea final pero de cara al vendedor (a ti) lo mejor es que el precio sea sin impuestos y luego se le añadan según el pais. Tú eliges.

Calculamos los impuestos basados en la dirección de envío (o la dirección de facturación por ejemplo)

El impuesto lo basamos en el contenido del carrito y luego he elegido mostrar los

precios en la tienda con impuestos incluidos y mostrarlos en el carrito y al realizar el pedido.

En las opciones que están arriba vamos a ver las tarifas estándar y tendrías que mirar las demás en caso de que tus productos se ajusten a las especificaciones de IVA de tarifa

reducida o tarifa cero.

Estando en tarifas estándar, hay que definir los impuestos por paises.

Para ver los códigos de paises puedes entrar en http://en.wikipedia.org/wiki/ISO_3166-1#Current_codes

O directamente haciendo click en donde dice “Ver aquí” en la página de tarifas

estándar.

NO cometas el mismo error que yo y añade, además de los otros paises, el nuestro

también. Es decir hay que añadir España (o el pais en el que vivas).

En tarifa hay que añadir el tipo impositivo con cuatro decimales. Puedes encontrar la lista de impuestos que yo use en el vídeo (mira por favor que sea la más moderna y

actualizada) en http://ec.europa.eu/taxation_customs/resources/documents/taxation/vat/how_vat_works/rates/vat_rates_en.pdf

Lo último que tienes que decidir es si tiene que cobrar impuesto al envio o no.

Opción - “Finalizar compra”

Lo primero que vemos es la opción de habilitar el uso de cupones (para dar la opción de introducir algún código para descuento)

Lo siguiente es habilitar compras sin registro, es decir, la posibilidad de que tus clientes compren sin registrarse previamente.

También se puede forzar el pago seguro (solo si tienes SSL activado en tu página)

©Pepa Cobos 2015

En “Página de pago” cambiamos las páginas correspondientes por las que nosotros

hayamos creado.

** Tenemos que crear estas páginas previamente. Desde páginas- Añadir nueva

creamos las páginas que necesitemos. Podemos crear una llamada “Cesta de la compra” por ejemplo y otra llamada “Pago” (o como quieras llamarla)

IMPORTANTE hay que introducir los códigos correspondientes de cada página.

Ahora elegirás las paginas recién creadas en lugar de las que ya están.

Endpoints de pago no lo tocamos.

Por último elegimos las pasarelas de pago. Y guardamos.

En las opciones superiores damos todos los datos de las pasarelas de pago

seleccionadas.

En Paypal por ejemplo yo he habilitado el PayPal estándar. En descripción tienes que

poner lo que verán tus clientes antes de elegir esta opción de pago. Lo que viene por defecto está bien si no quieres complicarte demasiado la vida.

En email de PayPal tendrás que poner el que tengas asociado a tu cuenta de Paypal.

PayPal Sandbox lo puedes habilitar para hacer pruebas pero tienes que tener una cuenta de desarrollador.

Lo demás no lo tocamos. Guardamos cambios.

En Transferencia bancaria, lo mismo, rellenaríamos todos nuestros datos.

En mi caso deshabilito las otras opciones de pago.

En “Envío” - Opciones de envío.

Selecciono Habilitar envío y habilitar la calculadora de envío.

En modo para mostrar los envíos lo dejo como está.

En destino del envío dejo la dirección de envío.

También puedes restringir envíos a los paises a los que, por algún motivo, no quieras

realizar envíos.

En métodos de envío eliges los que mejor te convengan.

En las opciones superiores podemos habilitar el envío con precio único. Es una buena opción si no hay mucha diferencia de precio entre los distintos envíos. Una vez elegidas las

opciones damos a guardar.

En la opción superior de envío gratuito ya lo teníamos activado. Lo que hay que elegir

ahora es las circunstancias que se tienen que dar para que se habilite el pedido gratuito. Yo he elegido una cantidad mínima de dinero gastado. O un cupón. Así regalaré el envío a

quien se gaste mas de X euros o a quien tenga un cupón para el envío gratuito.

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 5

Entramos en “Cuentas”

Página de mi cuenta - Es es la página a la que tendrán acceso los usuarios que se hayan registrado.

Elijo una página (que he creado antes claro)

Se eligen las opciones que queramos habilitar y le damos a guardar cambios.

La opción de “Emails” en donde configuramos los mensajes que queramos que se manden desde la tienda.

En la primera pestaña elegimos el nombre de y el email desde el que se enviarán los correos.

En la plantilla de email podemos elegir por ejemplo una cabecera (una imagen) para

poner en la parte superior de nuestros correos.

Podemos cambiar también el pie del email y los colores principales.

En las demás pestañas elegimos los emails que se mandan por pedido nuevo, pedido cancelado, procesando un pedido, pedido completado, factura de cliente, nota del cliente,

restablecer contraseña y nueva cuenta. En todos ellos tienes que elegir el texto que quieres que se envíe.

La opción de “Webhooks” no la tocamos.

Ahora en la barra lateral de la izquierda bajo WooCommerce tenemos Pedidos, en los que se listarán los pedidos que estén pendientes o procesados.

Cupones en los que podremos crear los cupones que queramos regalar o dar5 o lo que se nos ocurra.

En Informes están todas las estadísticas de la tienda.

En Ajustes está todo lo que hemos visto hasta ahora.

En Estado del Sistema vemos si todo está funcionando bien.

Y en Complementos están diferentes opciones adicionales que puedes añadir (de pago o no) a WooCommerce.

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 6

Vamos a entrar en la barra lateral a la izquierda en “Productos” y dentro de estos en

Categorías.

Añadimos el nombre (perfumes). El slug es lo que aparecerá en la barra de la URL.

En descripción lo que quieras.

Elegimos el tipo de visualización determinado y por ultimo añadir una imagen. Lo mejor es que todas tus imágenes sean del mismo tamaño para luego evitarte problemas a

la hora de dar forma a la tienda.

Ahora vamos a Añadir producto

Ponemos un título. Un texto en el que describimos el producto o contamos una historia o lo que nos parezca que va a ser más efectivo a la hora de alentar la compra, y

seleccionamos una categoría a la que pertenece ese producto (tenemos que haber creado antes las categorías). Más abajo podemos añadir imágenes a la galería de producto si

queremos que el comprador pueda ver más imágenes de lo que va a comprar.

Hay que asignar imagen destacada si queremos que en la página de producto se vea una imagen grande para empezar.

Y abajo tenemos que rellenar la información del producto.

Referencia, precio, impuestos, cuánto stock hay, tipo de envío permitido, productos

enlazados,... En atributos y avanzado no ponemos nada.

Podemos también añadir una descripción corta del producto.

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 7Ahora en la página de “Productos” debajo de WooCommerce nos dice el stock que

queda, el precio,...

En la página de cada producto en particular encontrarás una nueva zona en la que puedes poner que no queda stock pero que se permite la reserva y así permitirá la compra y te lo mostrará a ti como en stock. Si NO se permite la reserva a ti te aparecerá como

agotado.

Para quitar la barra lateral de las páginas de tienda o de categoría simplemente entramos en la categoría de Woocommerce o en la página creada y elegimos la plantilla sin barra lateral.

Podemos cambiar el CSS siempre que queramos.

El comprador puede cambiar el orden en el que aparecen los productos. Una vez en el producto ve la descripción completa del producto y puede añadirlo a la cesta de la

compra o carrito.

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 8El proceso de compra.

Si no te aparece alguna pagina comprueba que tienes el código insertado en dicha

página.

Al terminar la compra al comprador le llega un mail con su recibo de pedido

A mi como tienda me llega otro con el nuevo pedido y otro avisándome de stock bajo

(porque hay stock bajo lógicamente)

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 9A partir de la instalación de WooCommerce nos aparecerá, a no ser que hayamos

indicado lo contrario, un nuevo recuadro en el panel de control inicial de Wordpress. En él podremos ver de un solo vistazo las ventas generadas en el último mes, el producto más

vendido, los pedidos pendientes, el stock,...

Dentro de WooCommerce-Informes tengo acceso a estadísticas más avanzadas.

Ahora vamos a WooCommerce-Cupones y hacemos click en añadir cupón.

Lo primero es elegir un código de cupón que es lo que queremos que escriban para aplicar el cupón.

Podemos poner una descripción opcional (el cliente sólo lo ve si aplica el cupón en la

factura final )

El tipo de descuento. Que será un porcentaje, un descuento fijo, en el carrito total o

en un producto determinado.

Puedes permitir o no el envío gratuito.

Restricción de uso y límite de uso, se marcan las limitaciones y restricciones que va

haber para usarlo.

Una vez creado hay que darle a publicar y ya está preparado el cupón para usarlo.

Cuando te hagan un pedido desde la pantalla de WooCommerce-Pedidos podrás marcar el pedido como completado (cobrado) y como finalizado (enviado) y ver de golpe

todo lo que tengas pendiente o hayas finalizado.

©Pepa Cobos 2015

WOOCOMMERCE VIDEO 10

Los widgets de WooCommerce.

Se crean al instalar WooCommerce y se pueden introducir en cualquier sitio donde

puedan usarse widgets.

Vamos a Apariencia-Widgets. Tenemos:

Capa de Navegación de WooCommerce que lo que permite es precisar aún más una búsqueda dentro de las categorías. Es decir, reduces los artículos que se muestran

mediante filtros.

Carrito WooCommerce - Nos muestra el carrito donde lo situemos. Sólo se ve si

tenemos algo dentro del carrito. (Podemos marcarlo o desmarcarlo)

Categorías de productos de WooCommerce - Muestra las categorías disponibles de producto como desplegable (oculta) o como lista.

Etiquetas de productos - Muestra las etiquetas de producto en forma de nube de etiquetas.

Filtro de precios - Nos permite filtrar los productos que se muestran por precio.

Productos mejor valorados - Los que mas han valorado los clientes

Productos vistos recientemente - Son los productos que el usuario ha estado visitando últimamente. Le recordamos lo que “debe” comprar ;)

Productos WooCommerce - muestra la lista de productos (el número que tú hayas marcado)

©Pepa Cobos 2015