Tu tienda online con WooCommerce y WordPress

Crear una tienda online con WordPress

Andy Garcia

WordPress sirve para crear cualquier tipo de web, por ejemplo una red social, una red de blogs, un simple blog personal y también una tienda online…

Para crear una tienda online con WordPress puedes usar varios plugins, uno de los más populares es WooCommerce

En primer lugar debes instalar WordPress (punto org), para ello necesitas las versiones adecuadas de Apache, MySQL, PHP y por supuesto un sistema operativo, pero no te preocupes, cualquier empresa de hosting, o servicio de hosting gratis, te lo da resuelto junto con un panel de control y un instalador automático de WordPress, sólo necesitas seguir uno de estos tutoriales:

Ahora ya tienes WordPress instalado y puedes instalar WooCommerce desde el backend de WordPress, el primer paso es identificarte como administrador añadiendo «/wp-admin» a la dirección de tu web.

Escritorio de WordPress

El procedimiento de instalación de WooCommerce es igual que el de cualquier otro plugin, usando el buscador interno desde «Plugins/Añadir nuevo«.

Instalar WooCommerce

Una vez instalado WooCommerce, se activa como cualquier otro plugin y a partir de ahí puedes seguir los siguientes pasos para configurar una tienda básica.

  • Pulsar el botón «Instalar páginas de WooCommerce«.

Instalar páginas de WooCommerce

  • WooCommerce te informa de las novedades de tu versión, el siguiente paso es pulsar el botón «Ajustes«.

Ajustes de WooCommerce

  • Desde la pestaña «General» de la página de ajustes, puedes indicar tu ubicación, en qué paises vas a vender online y con cuál moneda.

Ajustes generales

  • En la pestaña «Productos» no tienes que tocar nada, pero observa que hay unos símbolos de interrogación con ayuda contextual sobre cada elemento.

Ajustes de productos

  • En la pestaña «Impuestos/Opciones de Impuestos«, puedes «Habilitar impuestos» marcando la opción correspondiente y pulsando el botón «Guardar cambios«.

Ajustes de impuestos

  • En la pestaña «Impuestos/Tarifas Estándar«, pulsa el botón «Insertar fila» y a continuación indica la «Tarifa» y el «Nombre del impuesto«

Ajustes de IVA al 21%

  • En la pestaña «Finalizar compra» deberías deshabilitar el uso de cupones, si no tienes intención de usarlos, y puedes asignar una página de «Terminos y condiciones» que previamente debes haber creado como página.

Ajustes de finalizar compra

  • En la misma pestaña «Finalizar compra«, pero en la parte inferior, puedes configurar los «Ajustes» de las diferentes pasarelas de pago o desactivar las que no vayas a usar, así como establecer la predeterminada.

Pasarelas de pago

  • Para configurar Paypal lo único que necesitas es indicar la dirección de «E-mail de Paypal» que va a recibir los pagos, todo lo demás es opcional.

Ajustes de Paypal

  • En la pestaña «Envío» puedes configurar los tipos de envío o predeterminar la opción que ya viene activada por defecto, esto es «Envío gratuito«.

Ajustes de envío

  • En la pestaña «Cuentas» no tienes que tocar nada.

Ajuste de cuentas

  • En la pestaña «E-mails» puedes configurar los e-mails que son enviados de forma automática, así como modificar las plantillas correspondientes.

Ajustes de e-mails

Ya tienes tu tienda online correctamente configurada, pero aún no tienes productos que vender, los siguientes pasos serán la creación de categorías, atributos y productos para el catálogo.

  • Añadir las categorías de los productos, en el ejemplo hemos creado las categorías «Españolas» y «Extranjeras«, nuestros productos serán películas.

Categorías en WooCommerce

  • Añadir atributo, en el ejemplo hemos creado el atributo «Formato» con los términos «Blu-ray» y «DVD«.

Atributos en WooCommerce

  • Añadir nuevo producto indicando «Título«, «Descripción larga«, «Categoría«, «Precio» (dejando «Información del producto» como «Producto simple«).

Añadir producto

  • En la misma página (haciendo scroll vertical) también hay que indicar «Etiquetas» (opcional), «Descripción corta» y una «Imagen destacada«, también podrías añadir más imágenes en «Galería del producto«.

Publicar producto

  • En el siguiente ejemplo vamos a crear un «Producto variable«, todos los pasos son iguales que con el producto anterior, excepto que hay que cambiar la «Información del producto» por «Producto variable» para poder configurar el atributo y las variaciones.

Producto variable

  • Pulsar la pestaña «Atributos«, seleccionar «Formato» de la lista desplegable y pulsar el botón «Añadir«, pulsar el botón «Seleccionar todos» para añadir todos los valores, marcar la opción «Usado para variaciones» y pulsar el botón «Guardar atributos«.

Atributos del producto

  • Pulsar la pestaña «Variaciones» y pulsar el botón «Añadir Variación» tantas veces como valores tiene nuestro atributo, en nuestro ejemplo son dos valores, para cada uno de los valores podemos indicar sus variaciones, en nuestro ejemplo (para simplificar) hemos indicado un precio diferente para cada una, pero podrías indicar diferente tamaño, peso, etc…

Variaciones del producto

  • Ya tienes un artículo sin atributos ni variaciones y el otro con 2 variaciones, así que ya puedes ver tu catálogo de productos o probar a hacer tu primera compra (para comprobar que todo funciona correctamente), antes de continuar introduciendo los datos del resto de los artículos de tu tienda.

Catálogo virtual

En la imagen del ejemplo hemos inyectado una línea de código CSS usando el plugin «Simple Custom CSS» para ajustar mejor el aspecto del catálogo de productos, concretamente el código añadido es el siguiente:

.twentyfourteen .tfwc { max-width: inherit; }

Si lo deseas puedes instalar un theme diferente y cambiar radicamente el diseño de tu tienda online, pero eso lo dejamos para tu criterio personal.

También puedes probar algunos plugins para WooCommerce GRATIS, concretamente «Poor Guys Swiss Knife» seguramente te resultará útil ya que te permite configurar más cosas de tu tienda online, por ejemplo los campos del formulario que tiene que rellenar el cliente justo antes de comprar o el texto de la mayoría de los botones de tu tienda, para ajustarlos al contexto de la misma.

image_pdfVer en formato PDFimage_printFormato para IMPRIMIR
Diseño Web, eCommerce , ,