Crea tu tienda online con Woocommerce en WordPress

 

A día de hoy, ya nadie discute lo importante que es dejarse ver por Internet, cualquier negocio por pequeño que sea debería tener su propia Web e incluso figurar en redes sociales como Facebook o Instagram.

Si no estás en Internet prácticamente “no existes”.

Empresas como Alibaba o Amazon venden a diario millones de artículos a un solo golpe de ratón.

El  comercio electrónico se encuentra en su punto más álgido, incluso nosotros sencillos autónomos, podemos aprovechar esta tendencia y vender nuestros propios productos. Tan solo necesitamos transformar nuestra web en una tienda online.

Con esta guía, aprenderás a transformar tu web en una estupenda tienda online, podrás seguir publicando tus posts a la vez que vendes tus productos, y todo ésto con la sencilla instalación de un plugin como WooCommerce.

Tu tienda online con WordPress y WooCommerce: ¿Qué es WooCommerce?

WooCommerce es uno de los plugins más utilizados para la creación de tiendas online en WordPress (400.000 instalaciones activas) es libre y gratuito e incluso se crean plugins propios para él (los llamados addons).

Este plugin te permitirá vender cualquier tipo de producto, ya sea ropa, entradas, fruta o lo que se te ocurra, da igual físico o descargable.

Tu tienda online con WordPress y WooCommerce: Instalación y Configuración:

 

PASO 1. Preparaciones previas:

Necesitarás un sitio web creado con WordPress.org y hosting propio, WordPress.com no es válido puesto que no  permite la instalación de plugins.

Si no tienes  un sitio  con WordPress.org puedes crearte una cuenta gratuita en Hosting, podrás instalar WordPress de una forma totalmente automática.

Si no sabes cómo configurar tu cuenta, darte de alta y empezar a utilizar WordPress, estás tardando en darte de alta en mi blog, donde te regalo la guía que te introducirá en el mundo de WordPress, con muchos ejemplos, de una forma muy clara y sencilla.

Suscríbete y recibe la Guía Básica para crear tu sitio Web con WordPress

¿Ya tienes tu sitio en WordPress.org? Pues entonces no perdamos más tiempo y vayamos al paso 2.

PASO 2. Instalando WooCommerce:

Dirígete al repositorio de plugins de WordPress, en el buscador introduce la palabra WooCommerce e instálalo.

woocommerce1

Una vez instalado no olvides activarlo.

woocommerce2

 

Y con esta sencilla instalación tenemos nuestro plugin listo para comenzar a trabajar.

woocommercee3

 

PASO 3. Configura el menú de WordPress:

WooCommerce creará de forma automática todas las páginas que necesitarás para poder administrar tu tienda online.

  • Cart “Carrito” Donde aparecen tus artículos.
  • Checkout “Salida de producto o forma de pago” Donde se introducen los datos de facturación.
  • My Account “Mi cuenta” Donde tú como administrador podrás gestionar los pedidos.
  • Shop “Tienda” La tienda propiamente dicha, donde figurarán todos los productos de tu tienda online.
woocommerce3-1
Puedes modificar el nombre de las páginas para que aparezcan en español

Como ya hiciste en la creación de tu menú principal, lo único que deberás hacer es agregar las páginas que te interesen (Por ejemplo el Carrito y la Tienda).

 

PASO 4. Algunas configuraciones básicas en WooCommerce:

Antes de comenzar a trabajar deberás realizar algunos cambios básicos como configurar tu ubicación, moneda y símbolos

(fíjate en la imagen y no olvides guardar los cambios)

PASO 5. ¿Comenzamos a añadir productos?

Por fin estamos en disposición de poder empezar a añadir productos a tu tienda.

woocommerce5

Un aspecto muy interesante de WooCommerce es que está inspirado en la interface de WordPress, lo que te permitirá familiarizarte rápidamente con él.

  • En el Título de entrada pon el nombre del producto.
  • El Cuerpo se utiliza para poner una descripción del producto.
  • En Categorías de los productos podrás crear o elegir una categoría en la que incluir tu producto (También podrás crear tantas subcategorías como necesites).

woocommeerce6

Al igual que ocurría con tus posts, podrás crear o añadir Etiquetas a tus productos.

  • En Imagen del producto deberás seleccionar la imagen de tu producto (Será la que figure en tu tienda online)
  • La Galería del producto sirve para incluir imágenes de productos similares, que se añadirán en forma de carrusel al producto final en tu tienda online (por ejemplo: chaquetas similares de distinto color).

woocommerce7woocommerce8

En la parte baja de nuestro documento (debajo del cuerpo) encontrarás las opciones de configuración del producto.

Comenzaremos con la configuración de un producto como “producto simple“ (Es decir como un producto único en el que no existen más opciones “no hay más tallas o colores”).

Para este ejemplo introduciré una chaqueta de cuero, no se trata ni de un producto virtual (que únicamente podamos ver) ni de un producto descargable (no es un fichero) así pues “Virtual” y “Descargable” quedarán desmarcadas.

  • En precio normal deberás poner el precio del artículo.
  • En precio rebajado deberás poner el precio del artículo si estuviese en periodo de rebajas (Puede configurarse incluso una fecha de inicio y fin).
  • En estado del impuesto deberás seleccionar imponible si quieres que a este artículo se le cargue algún impuesto a su precio final.
  • En clase de impuesto deberá figurar el impuesto que queremos imponer (si lo dejamos en estándar aplicará el IVA, no obstante, este impuesto aún debemos configurarlo en el apartado de impuestos, lo veremos más adelante).

woocommerce9

  • SKU (referencia) sirve para identificar nuestro producto con algún código nuestro o proporcionado por el proveedor
  • Gestión de inventario permite indicar las existencias del producto (Este dato aparecerá en la web al lado del producto).
  • Si se activa la opción “Vendido individualmente” nuestro cliente no podrá adquirir más de un artículo similar en el mismo pedido.

woocommerce10

En la sección de Envío podremos seleccionar tanto el “peso” como las “dimensiones del paquete” que vamos a enviar.

  • Clase de envío sirve si queremos seleccionar algún método de envío (Como agrupar productos similares en el envío).

woocommerce11

Este es un ejemplo de cómo podría verse el producto  (Configurado como producto simple) , obviamente el resultado final dependerá de la plantilla que estéis utilizando, este es solo un ejemplo.

woocommerce12-2

Configuraremos este mismo producto como “producto variable” (Es decir añadiremos opciones como talla o color).

Haz clic sobre la pestaña de “Atributos” para crear los atributos de Talla y Color junto con sus variantes (Fíjate en la imagen)

woocommerce12

Haz clic sobre la pestaña de “Variaciones” para configurar las distintas variaciones.

  • En valores por defecto del formulario indicarás qué valor será el primero que figure en la Web (yo lo dejo por defecto).
  • Más abajo podrás seleccionar el producto y sus distintas combinaciones (Dimensiones del producto, precio, imagen, etc) como ves yo he comenzado configurando la talla S negra (Creada anteriormente en Atributos) y expandiendo el menú indicado con la flecha podré indicar otros valores como el precio o poner una imagen, y así con todas las combinaciones que necesites realizar (S Roja, S Azul, M negra, M roja, ..)

woocommerce13

Al desplegar “el menú” que comentábamos en el paso anterior aparecen  nuevas opciones de configuración.

  • El logotipo de imagen te permite subir una imagen para la variación que estás configurando.
  • Puedes añadirle el precio, su estado en el inventario (Si hay o no existencias) la clase en envío o si lleva algún tipo de impuesto. Una vez configurada la variación no olvides guardar los cambios, recuerda que podrás crear tantas variaciones como necesites.

woocommerce14

Éste es otro ejemplo de cómo podrían ver tus clientes un artículo configurado como “producto variable”. Ahora sí se puede seleccionar talla y color.

woocommerce15-1

PASO 6. ¿Comenzamos con la gestión del Stock?

Éste es un apartado importante,  si vendemos artículos físicos deberemos saber cuantos artículos tenemos.

Ya explicamos que dentro de cada producto podremos decidir si queremos gestionar el stock o no, si  decidimos “no gestionarlo” su venta será ilimitada, por el contrario, “si activamos la gestión del stock”, podremos definir las existencias del mismo e incluso permitir la opción de reservas en caso de haberse agotado las existencias.

woocommerce16

 

PASO 7. Precios rebajados y cupones de descuento

Cuando entramos a cualquier tienda online es común encontrar productos rebajados por un período de tiempo o cupones de descuento.

Para rebajar un producto e incluso agregar una fecha en la que ésta rebaja será efectiva deberás desplazarte de nuevo a la configuración del producto y justo debajo del precio normal encontrarás ésta opción (Precio rebajado y Fechas del precio rebajado).

woocommerce17-1

En el menú de WooCommerce, en la sección de Cupones, encontrarás la herramienta para gestionar los cupones de descuento.

woocommerce18-3

La idea es crear un cupón (por ejemplo MLCREATIV2) para ofrecer un descuento a los usuarios que lo utilicen.

Podremos decidir si el cupón se aplica a todo el carrito o a un solo producto, si es necesario una inversión mínima, si tiene límites de uso o si existen productos excluidos.

woocommerce19

PASO 8. ¿Agregamos el IVA a nuestros productos?

En el menú de WooCommerce en la sección Ajustes, encontrarás una pestaña dedicada a los impuestos, en la que podrás crear tantos tipos de IVA como necesites, aunque hoy en día lo normal es un solo tipo al 21%.

woocommerce20

“Si no aparece la pestaña Impuestos es porque olvidaste activarla en Woocommerce/Ajustes”.

Pincha en Tarifas estándar (Verás una serie de líneas que debes configurar).

  • Código de país (código alpha-2 correspondiente al país que se aplica el impuesto. Para España es “ES”.
  • Código de provincia, es el código de la provincia a la que se le va a aplicar el impuesto.
  • Código postal, es el código postal de los lugares a los que se va a aplicar el impuesto.
  • Ciudad, es el nombre de la ciudad a la que se va a aplicar el impuesto.
  • Tarifa, es el porcentaje de impuesto que se aplica.
  • Nombre de impuesto, hace referencia al nombre del impuesto en cuestión.
  • Prioridad, se refiere al orden con que se aplicará el impuesto en caso de haber varios.
  • Compuesto, se refiere a que el impuesto se aplicará al resto de tasas en caso de haberlas.
  • Si marcas Envío se aplicará el IVA también a los gastos de envío del pedido.

woocommerce21

Veamos como configurar todo esto:

Inserta 5 nuevas filas y escribe “ES” en el campo Código de país. También selecciona la casilla “Compuesto” en todas.

En las 4 primeras filas introduce el Código de provincia de las provincias que no tienen IVA (Las Palmas “GC”, S.C Tenerife “TF”, Ceuta “CE” y Melilla “ML”). En el campo de Tarifa por el valor “0” y en “Nombre de impuesto” puedes poner por ejemplo Sin IVA.

La última fila queda reservada para las provincias que llevan IVA. Deja vacío el campo “Código de provincia” y en el campo de “Tarifa” escribimos 21 (Porcentaje actual de IVA). En “Nombre de impuesto” pondremos 21% IVA.

(Guarda los cambios)

Recuerda Configurar correctamente los impuestos para que no haya ningún problema.

woocommerce23(Recuerda que para que los impuestos sean efectivos, en la creación del producto deberás seleccionar “Sujeto a impuestos” y luego indicar el “tipo de impuesto”)

Ésta configuración sirve para productos que lleven el 21% IVA,  si también vendes productos con IVA reducido del 10%, deberás configurarlo en la pestaña “Reduced Rate Tarifas”. Se hace exactamente igual, con la salvedad de que en la fila 5 deberás desmarcar la casilla de “Envío”, en “Tarifa” deberás poner 10 y finalmente en “Nombre de Impuesto” obviamente 10% IVA.

Para que el IVA se aplique de forma automática al precio de cada producto, en la ficha de producto debes ir a “Información del producto >General” y después en el campo “Estado de impuestos” selecciona Sujeto a impuestos y en el campo Tipo de impuesto selecciona el “Tipo de impuesto” que se le aplique a tu producto (Por defecto el tipo de impuesto para IVA es el estándar).

PASO 9. ¿Agregamos otros impuestos a nuestros productos?

WooCommerce trae consigo  3 tipos de impuestos, “Tarifas estándar”, “Reduced Rate Tarifas” y “Zero Rate Tarifas”.

Si necesitas crear otros tipos de impuestos deberás hacerlo en la pestaña de “Impuestos”, añadiendo una nueva línea con el nombre del nuevo impuesto en “Tasas de impuestos adicionales”  (Guardar cambios).

woocommerce23-3

Cuando vuelvas a cargar la página de Impuestos,  verás en la parte de arriba (junto a “Tarifas estándar”, “Reduced Tarifas” y “Zero Rate Tarifas”) el nuevo impuesto creado, solo falta configurarlo como te he enseñado.

PASO 10. ¿Necesitas generar tus propias facturas?

Para mantener una contabilidad idónea de tu tienda necesitarás generar tus propias facturas.

WooCommerce no trae por defecto esta función, sin embargo puedes instalar plugins como WooCommerce PDF Invoices & Packing Slips para solucionar este problema.

woocommerce24

Una vez hayas instalado y activado el plugin, en tu menú WooCommerce aparecerá una nueva pestaña con el nombre de Facturas PDF. Es sencillo de configurar, no obstante, en futuras entregas te explicaré como utilizar este plugin).

woocommerce25

PASO 11. Pasarelas de pago ¿Conectamos nuestra tienda con nuestro banco?

Seguramente tu objetivo principal será el de obtener algún rendimiento de tu nueva tienda online, por eso éste es uno de los puntos más importantes de esta guía.

WooCommerce trae diferentes métodos de pago preinstalados por defecto (Transferencia bancaria, Pagos por cheque, Contra reembolso y Paypal) a los que tendrás acceso a través de Woocommerce >Ajustes >Finalizar compra.

woocommerce26

Dividiremos los pagos en “métodos de pago manuales” y “métodos de pago que precisan una pasarela de pago (TPV virtuales)”.

Los método de pago manuales necesitan nuestra intervención, para una vez realizado el pago, señalar los pedidos como pagados (Contra reembolso, Cheques, Transferencia bancaria).

En cuanto a las pasarelas de pago WooCommerce únicamente trae instalada PayPal, un sistema muy sencillo y fácil de utilizar, en el que tan solo es necesario indicar la dirección a la que llegarán los pagos, aunque es cierto que sus tarifas no son las más económicas, y que el público no termina de darle su total aceptación.

Otra opción, como ya sabes,  son las pasarelas de pago configuradas para trabajar directamente con los bancos que permiten realizar pagos con tarjetas de crédito. Para configurar una pasarela de pago de este tipo, además de la intervención de WooCommerce necesitarás la ayuda de tu banco y para ello deberás:

PRIMER PASO -Solicitar el acceso a un TPV en tu oficina bancaria (El proceso es tan sencillo como rellenar alguna documentación y firmar el TPV).

SEGUNDO PASO -Integrar el TPV en tu tienda online, muy sencillo con la utilización de plugins (Instalas el plugin e introduces los datos proporcionados por el banco).

Existen una gran cantidad de plugins que te permiten configurar la pasarela de pago de tu tienda online, sin embargo, si pretendes obtener un óptimo rendimiento deberías optar por una opción de pago.

El plugin que voy a presentarte posee una relación calidad-precio estupenda con un soporte técnico totalmente en español que soluciona rápidamente cualquier duda o problema que pudiera surgir. Se trata de RedSys Gateway for WooCommerce PRO. (Puedes buscarlo desde el propio repositorio de WordPress o descargarlo directamente desde su enlace)

woocommerce26-1

RedSys Gateway for WooCommerce PRO Configuración:

Una vez adquirido e instalado el plugin desde WooCommerce > Finalizar compra > RedSys, podrás acceder a su formulario de configuración

Título: Es el que verán los usuarios de la pasarela (lo normal es poner Pago con tarjeta de crédito)

Descripción: Aquí podemos poner algún dato más sobre la pasarela, aunque el que viene por defecto está bien.

Titular: Pondremos el titular del TPV, su forma social o tu nombre si eres autónomo.

Nombre del comercio electrónico: Aquí pondremos la marca o tu mismo nombre.

FUC del comercio electrónico: Es el identificador en RedSys que debe darte el banco.

Número de terminal: A no ser que tengas varios establecimientos con el mismo TPV será 1, aunque este dato también te lo dará el banco.

Clave secreta de encriptación: Es la clave con la que se firmarán las comunicaciones y también te lo dará el banco.

(Existen diferentes opciones según el entorno de nuestro trabajo, por lo general podemos dejar el resto marcado por defecto, pero podemos):

Cobrar en otra moneda que no sean euros.

Modificar el entorno, usaremos Sis-t para las pruebas y luego el asignado por el banco para funcionar en producción.

Elegir si queremos que paguen solo con tarjeta de crédito o con iuPay

Elegir que el pedido se marque completado automáticamente en función de las circunstancias.

Cambiar el logo.

Elegir el idioma para la pasarela.

Forzar la comunicación por métodos alternativos en caso de problemas por incompatibilidad con algún plugin o protocolo.

Resumiendo:

Al contratar el servicio TPV Virtual de Redsys, la entidad bancaria te proporcionará los datos para el entorno de pruebas (entorno Sis-t)

Deberán facilitarte un  “código de comercio”, “clave de encriptación” y “número de terminal”.

Además también deberían facilitarte los datos de alguna tarjeta de pruebas para que puedas realizar pruebas de pagos autorizados y rechazados (Debes usar el entorno Sis-t para estas pruebas).

woocommerce26-4Una vez realizada al menos una prueba con pago autorizado y denegado (por ejemplo, utilizando un número de tarjeta no válido) solicita a tu banco el acceso al entorno real (también llamado de producción).

Para este último paso, el banco te enviará una nueva clave de encriptación y debes cambiar el entorno de Sis-t  que te indiquen (casi siempre Sis o Sis-d).

Finalmente, será conveniente realizar una prueba con un pago real con tarjeta para comprobar que todo funciona correctamente.

Os dejo un estupendo vídeo tutorial creado por los chicos de Codection.com en el que explican de una manera clara todos los puntos que hemos tratado en relación a la configuración de las pasarelas de pago, por si quedase alguna duda.

PASO 12. ¿Necesitas integrar un servicio de paquetería?

Realizados los pedidos habrá que avisar a la correspondiente empresa de servicio de paquetería para trasladar los pedidos a su destino.

En este aspecto WooCommerce también puede echarnos una mano, a través de plugins específicos, que nos permiten integrar agencias de transporte como SEUR, ASM o DHL, si bien es cierto que cada vez más empresas de paquetería disponen de sus propios plugins para WordPress y WooCommerce.

Si tu compañía de transporte es SEUR deberás ponerte en contacto con ellos para que puedan proporcionarte todo lo necesario (plugin, aplicación y códigos de activación).

Básicamente el plugin de SEUR se encargará de exportar los datos del pedido a una aplicación para imprimir una etiqueta de envío. La versión actual no cuenta con ningún sistema de seguimiento, de esto se encargará SEUR desde su web, a través del número de seguimiento enviando al cliente tras haber echo el pedido.

Si tu compañía es ASM de igual forma deberás ponerte en contacto con ella para que te proporcionen el plugin. Según indica en su web, ASM ofrece una solución completa incluyendo el cálculo de tarifas, seguimiento del pedido e impresión de etiquetas.

La compañía de transporte DHL también posee su propio plugin para WooCommerce (DHL Shipping) una completa solución “de pago” que te permitirá administrar tus envíos. De igual forma también tendrás que contactar con ellos para obtener el plugin.

Si tu compañía de paquetería no dispone de ningún plugin para WooCommerce, no te quedará otra que introducir los gastos de envío a mano, utilizando un plugin como Table Rate Shipping.

Si además necesitas realizar un seguimiento de tus pedidos puedes utilizar el plugin Aftership (solo necesitarás proporcionar el nombre de la empresa con la que has hecho el envío y el número de seguimiento del paquete).

Y esto es todo por hoy, de momento para comenzar vuestras andaduras por el mundo de las tiendas virtuales tenéis material más que suficiente, no obstante seguiré completando esta guía y por supuesto, respondiendo a las dudas que puedan ir surgiendo.

Neotron

Soy titulado en sistemas microinformáticos y redes y he creado mi propia Web para poder ofrecerte soporte técnico y resolución de problemas informáticos.
También soy redactor en la página de videojuegos http://eljugonocasional.com.
Si quieres saber más, me encontrarás haciendo clic en mi imagen o directamente en la web http://conectapc.net/

Latest posts by Neotron (see all)

Sobre Neotron 1 Artículo
Soy titulado en sistemas microinformáticos y redes y he creado mi propia Web para poder ofrecerte soporte técnico y resolución de problemas informáticos. También soy redactor en la página de videojuegos http://eljugonocasional.com. Si quieres saber más, me encontrarás haciendo clic en mi imagen o directamente en la web http://conectapc.net/

Sé el primero en comentar

Deja un comentario