eCommerce: Herrajes Inteligentes

Documentación técnica versión 1.0


Introducción

  • Proyecto : Tienda en Línea: Herrajes Inteligentes
  • WordPress : v 5.3.2
  • WooCommerce : v 3.9.1
  • Autor : Mario Cervantes
  • Contacto de soporte : supermcmario @ gmail.com

Antes que nada, gracias por confiar en mi, estoy muy orgullosos de trabajar para ustede, creemos sinceramente que este proyecto tiene mucho futuro.

Este documento tiene el propósito de ser un respaldo en la capacitación que les ofrecemos para operar y manipular el sitio que he desarrollado para ustede. Por favor, revise cada sección con detalle para poderle sacar el mejor jugo a este instructivo. Como complemento les ofrecemos las ligas a la documentación de WordPress aquí, la de WooCommerce aquí.

Requerimientos

Necesitarás algunas cosas simples para poder cumplir con los cambios y tareas de esta documentación.

  1. Editor de código por texto, puede ser cualquier editor.
  2. Un navegador web actualizado. Preferentemente Google Chrome
  3. Acceso al WordPress con usuario y contraseña (Se accede aquí: WordPress Admin)

Sea cuidadoso en las modificaciones que haga pues algunos cambios son irreversibles.
Se sugiere tener un respaldo diario en el servidor.

Sobre WordPress #ir arriba

Generales

El sitio herrajesinteligentes.com.mx esta desarrollado con WordPress, el cual es un sistema de gestión de contenidos (CMS) que permite crear y mantener una tienda en linea, blog u otro tipo de web.

Más de 60 millones de personas han elegido WordPress para impulsar el lugar en la web. Cerca del 30% de todos los sitios en el mundo están hechos con WordPress.

Un factor en particular que hace de WordPress una plataforma superior a las demás, sería la utilización de sus Plugins, que son componentes de código, es decir, programas que se instalan en WordPress para ampliar su funcionalidad, pudiendo crear todo tipo de página como: blogs, webs empresariales, tiendas online, periódico digital, portafolios, etc.

En nuestro caso, Wordpress dispone de varios plugins que nos permitirán incorporar una tienda online en nuestra web. De todos ellos, WooCommerce es la mejor opción.

WooCommerce

Gracias a WordPress y el plugin WooCommerce podremos disponer de una tienda online con todas las funcionalidades típicas que esperamos encontrar en una aplicación de este tipo: creación de productos ilimitada, organización de productos por categoría, posibilidad de agregar atributos a los productos, diversos sistemas de pago y envío, gestión avanzada de pedidos, etc.

Las funcionalidades de nuestra tienda no se acabarán con las que incorpore el propio WooCommerce, sino que podremos añadir cientos de nuevas opciones gracias a los plugins específicos para él: importación masiva de productos, portes de envío por código postal, pasarelas de pago con tarjeta de crédito, precios de producto por cantidad, generación de facturas, etc.

Accesso al administrador

  1. Para entrar al wordpress utilizaremos esta dirección: https://herrajesinteligentes.com.mx/wp-admin
  2. Colocaremos el nombre de usuario y contraseña y daremos click en "Acceder"



Menú Principal en Dashboard

Al entrar aparecerá el “Escritorio” o Dashboard principal, en el cual tienes todo para manejar las diferentes áreas de WordPress y tu sitio Web.



  1. ESCRITORIO: Es la ventana principal donde podrás ver un resumen del estado del sitio, al igual que noticias de actualizaciones.
  2. MEDIOS: Aquí es donde se encuentran todas las imágenes de productos, logos, documentos,etc.
  3. PÁGINAS: En esta sección se encuentran todas las páginas de nuestro sitio web, como por ejemplo el home, nosotros, faqs, contactos, etc
  4. WOOCOMMERCE: Aquí se muestra todo lo relacionado a nuestro plug in de woocommerce que hace que nuestra pagina funcione como tienda en línea.
  5. PRODUCTOS: Aquí se encuentran todos los productos de nuestra tienda en linea. Muestra opciones como agregar nuevo, categorías, etc.

Editar Páginas #ir arriba

Para editar una página del sitio primero debió haber ingresado al panel de administrador (que se explica en las líneas ateriores como; Acceso al administrador)

Una vez dentro del administrador en la misma ventana abrá la sección que desea editar; en la barra gris superior aparecen dos enlaces que utilizaremos para modificar los sitios ¨Editar pagina¨ y ¨Edit with WPBakery Page Builder¨ ambas opciones estan subrayadas de amarillo en la siguiente imagen


La que vamos a utilizar es ¨Edit with WPBakery Page Builder¨ al dar click veremos el sitio de la siguiene forma:


1. En la herramienta marcada con el numero uno agregaremos elementos a nuestra sección (recomiendo mucho echar un vistazo a esta part puesto que es muy versatil y se pueden agregar muchos tispod e contenido)
2. Al posicionarse sobre la columna aparecen estas herramientas azul con naranja que permite mover los elemntos, modificar el ancho, agregar o eliminar columnas.
3. Al posicionarse sobre algun elemento; texto, imagen, etc aparece la herramienta verde que muestra un lapicito y al dar click en el podra editar dicho elemento.
4. Es para agregar una columna por debajo de la mostrada.
5. Al dar click sobre este icono se mostraran las opciones del sitio responsivo y e despliegan las posibilidades del diseño de la sección en sus diferentes versiones; desktop, tablet, mobile.
6. Finalmente al editar la sección no olvide en oprimir el boton de update para guardar y publicar los cambios realizados

A continuación dejo un video explicativo de la potente herramienta para editar las secciones:



Es importante tener mucho cuidado al editar las páginas ya que podría modificar toda la estructura del sitio y marcarle error a la hora de previsualizar

Subir Imágenes #ir arriba

Las imágenes en un ecommerce son muy importantes ya que son referencia que un cliente tiene de lo que va a comprar: no sólo debe haber un número suficiente de imágenes del producto, sino que deben tener la suficiente calidad para que se vea correctamente.

El proceso de subir imágenes es el siguiente:


Estas son las medidas que tienen que tener por defecto las imágenes de los productos en nuestro sitio:

  • Formato: .jpg y en RGB
  • Tamaño: 600px x 600px minimo
  • Resolución: 72 dpi
  • Peso: Se recomienda subir la imagen por OPTIMIZILLA (http://optimizilla.com/)
  • Nombre: Debe ser igual al SKU del producto (en minúsculas y sin espacios)

Actualizar Productos #ir arriba

Con WooCommerce puedes importar nuevos productos o cualquier dato de los ya existentes desde la pestaña de producto o desde un archivo CSV.

A continuación mostraremos cómo se hacen estos procedimientos. Vamos a necesitar contar con Excel o algún programa similar.


Es importante comprender que WooCommerce va a leer cada una de los encabezados de las columnas antes de importar el archivo separado por comas CSV por lo que no tenemos que modificar las cabeceras para respetar su valor.


Descarga un archivo de ejemplo la explicación de las Cabeceras

Monitorear Pedidos#ir arriba

Los datos que suelen aparecer por defecto en cada pedido son los siguientes:



  • 1. Pedido: Nos indica el número de pedido, datos del cliente que lo ha hecho y los productos que ha comprado.
  • 2. Fecha: Fecha en la que se realizó el pedido.
  • 3. Estado: Icono que nos indica el estado de un pedido.
    • Pendiente de pago: No está pagado.
    • Procesando: Se ha procesado el pago correctamente y se está preparando el pedido para su envío.
    • En espera: Si han pagado con un método no automático (transferencia bancaria, contra reembolso, cheque, etc).
    • Completado: Pedido pagado y enviado. Todo listo.
    • Cancelado: Se ha cancelado por el cliente o por el administrador de la tienda.
    • Devuelto: Se ha devuelto el pedido y reembolsado el importe.
    • Falló: Ha fallado el método de pago automático (PayPal, tarjeta de crédito)
  • 4. Total: Importe total del pedido y forma de pago usada


Es importante comprender que WooCommerce va a leer cada una de los encabezados de las columnas antes de importar el archivo separado por comas CSV por lo que no tenemos que modificar las cabeceras para respetar su valor.


Descarga un archivo de ejemplo la explicación de las Cabeceras

Gestionar Cupones #ir arriba

Como ejemplo pondremos un cupón de descuento basado en porcentaje para una categoría de productos determinada y un gasto mínimo del pedido.


Términos #ir arriba


Toda la información contenida en este documento es confidencial y tiene el único propósito de documentar técnicamente al equipo de Herrajes Inteligentes en el uso y manejo de la plataforma que ha desarrollado el equipo de FrontFace. Cualquier duda o comentario al respecto puede escribir a soporte@frontface.mx

Respaldo

Se cuenta con un respaldo del sitio a la fecha de esta entrega (1 Feb 2020), sin embargo cualquier gestión futura puede generar costo extra. Las siguientes cuestiones no incluyen en la garantía y tendrán un costo extra:

  1. Nueva sesión de capacitación.
  2. Nuevas funcionalidades o alcances del sitio no acordados con anterioridad.
  3. Correcciones en consecuencia de modificaciones o cambios que no hayamos realizado nosotros.
  4. Actualizaciones de Plugins o del mismo WordPress.
  5. Conflictos referentes al hospedaje web del proyecto.
  6. Cambios por modificaciones de proveedores terceros, como PagoFacil o Mailchimp.
  7. Correcciones en consecuencia de modificaciones impertinentes ya.
  8. Actualización de productos o añadir nuevos adicionales.