Crear Tienda Online en 30 minutos. (Usando WordPress, Elementor y Astra)

por Marisol Serrano
actualizada abril 7, 2021

La pandemia del COVID-19 y el Distanciamiento Social han traído a la luz algo importante: Que cada ves más y más negocios físicos se ven forzados a tener presencia en Internet! y también que millones de trabajadores seguirán sus operaciones desde casa, en parte la empresa ahorra costos, en parte el trabajador puede trabajar mediante el internet. En este tutorial te muestro una manera sencilla de crear Tu Primer Tienda Online.

Cómo empezar a crear una tienda online:

Iniciar una nueva tienda de comercio electrónico puede ser una tarea abrumadora para un principiante. Especialmente si no es un desarrollador, configurar una tienda de comercio electrónico en línea puede ser un desafío. Sin embargo, si sigues paso a paso el tutorial para configurar una tienda de comercio electrónico profesional, puedes crear fácilmente tu tienda en poco tiempo y sin costo alguno.

¿Qué herramientas se van a utilizar?

Al menos un producto para publicar.
Instalar el tema de Astra, (versión gratuita).
Elementor, (versión gratuita).
El plugin Local translate.
Otro plugin que se llama Starter Templates. Es de Astra y es gratuito.
WooCommerce, es una plataforma para manejar la parte de E-commerce.
Un método de pago.

Paso #1 Insertando la plantilla:

Una vez instalado y activado el plugin Starter Templates, tenemos que seleccionar que maquetador estaremos utilizando, en este caso es Elementor:

crear tienda online3 — Ahí nos muestra todas las plantillas que podemos disponer.

Nota: En las plantillas todo lo que ponga Agency, es de pago así que para nos muestre sólo lo gratuito, en el buscador escoges del menú: gratis y escogemos también Business

Podemos utilizar para el ejemplo las plantillas de business o ecommerce y escogemos en este caso la plantilla que dice Organic.

Podemos importar solo HOME o importar el sitio completo, más adelante te enseñaré como importar sólo HOME si ya tienes el sitio creado, en este ejemplo importaremos el sitio completo.

Nota: Al importar esta plantilla Organic también se van a importar todos los plugins que el sitio necesita, especialmente con el de WooCommerce.

crear tienda online5 — Ahora empezarán a importarse y activarse, una vez terminado podemos Ver el sitio para ver como luce.

NOTA: La plantilla que utilizamos en el ejemplo es de Astra, por eso instalamos el plugin Starter Templates.

Mantenimiento:

Es una buena práctica avisar a tus futuros clientes que tu sitio va a estar abierto próximamente si es un sitio completamente nuevo o el cartel de Mantenimiento. Para ello nos vamos al menú a Elementor—->Herramientas—->escogemos la pestaña que dice: Modo de mantenimiento—-> Modo mantenimiento—->quién puede acceder: personalizado—-> Perfiles: Administrador—–> Guardar cambios(Ver imagen)

crear tienda online6 — Añadir nueva plantilla: Modo Mantenimiento—-> clic en Publicar—> clic en editar con Elementor

Utilizamos una página ya hecha que viene gratis con Elementor, en el buscador ponemos Maint que es igual que Maintenance y así sólo nos aparece todo lo relacionado con Mantenimiento—-> Insertar y posiblemente Elementor te pide que conectes tu cuenta con ellos, una vez realizado eso la plantilla queda insertada. Y nos disponemos a cambiar el texto de la plantilla con nuestros propios datos y gustos como nuestro correo e-mail, colores, etc, una vez esté a nuestro gusto le damos clic en Guardar, Regresamos a la ventana de mantenimiento, le damos clic en Actualizar y ahora si ya podemos usar nuestra plantilla.

crear tienda online7 — Podemos ir en modo Incógnito para comprobar que la página de mantenimiento esté funcionando.

Ultimar detalles de WooCommerce:

Para eso vamos al Dashboard, si no te aparece el rótulo que dice: Ejecutar el Asistente de Configuración, que estaría en la parte de arriba, entonces vamos a WooCommerce—>Ajustes (ver imagen)

crear tienda online8 — Hacemos esos pasos y aún así si no aparece el rótulo de asistente vamos a Ayuda(ver imagen)

crear tienda online9 — clic en Asistente de configuración

Configurar WooCommerce, estos son los pasos:

Empezamos diciendo que si y poniendo los datos de tu tienda:

crear tienda online10 — Le das en Sí, por favor

crear tienda online11 — Clic en Seguir sin seleccionar nada más

En la siguiente página pregunta por la categoría o el sector donde opera la tienda, le damos clic en Otra y en la descripción ponemos Frutas y Verduras—-> SEGUIR—–> la siguiente página es importante: Nada de lo que está con precio nos interesa, sólo seleccionamos donde dice: Productos Físicos, si tienes algún producto digital como manuales, PDF, etc puedes activar donde dice Descargas, en este ejemplo no lo necesitamos así que le damos en SEGUIR—->

crear tienda online12 — En esta página seleccionamos eso—-> SEGUIR

crear tienda online13 — Aquí nos pide elegir un tema, seguimos con el tema activo

En la siguiente página que dice: Mejora tu tienda con Jetpack y Woocommerce services, eso no lo necesitamos, le damos clic en No, gracias. Ya tenemos esos detalles al día, aún necesitamos administrar y ajustar WooCommerce.

Administración y Ajustes de WooCommerce:

Para hacer los debidos ajustes nos vamos a WooCommerce—–>Ajustes y comprobamos o añadimos datos:

crear tienda online14 — Vamos viendo y añadiendo datos en las pestañitas

General : comprobamos que los datos estén correctos. En opciones de moneda elegir la correcta de tu tienda, en el ejemplo es Estados Unidos.
Productos : Hacer los cambios necesarios como unidad de peso, dimensiones, dependiendo del país. (Guardar Cambios)
Inventario : en el ejemplo la tienda de frutas y verduras no llevará control de inventario ya que está empezando asi que quitaremos el check en donde dice: Gestionar Inventario. (Guardar Cambios)
Envíos : tampoco va a tener, sólo va a tener entrega a domicilio.
Pagos : Aquí si tenemos que configurar algo. Para que funcione la tienda tiene que estar por lo menos activado un método de pago. Para el ejemplo seleccionaremos el que dice Contra reembolso, arrastramos la selección hacia arriba pra que esté a mano. Lo activamos y configuramos. Cambias el texto a tu conveniencia. (Guardar Cambios)
Cuentas y Privacidad : Aquí podemos permitirle a los clientes que hagan pedidos sin tener una cuenta pero no es aconsejable pero depende de cada uno, la utilidad de que hagan una cuenta es de que los datos ya quedarían guardados para una próxima vez. En el ejemplo lo desactivamos por el momento y activamos el que dice: Permite a los clientes crear una cuenta al finalizar comprar. (Guardar Cambios)
Correos electrónicos : Aquí estarán todos los correos electrónicos que se generan. Revisar bien que los correos estén correctos donde van a recibir o comunicarse con los clientes. Ahí lo pueden editar también como el texto que irá en los emails, cambiar de colores usando la paleta de colores: coolors.co, etc. (Guardar Cambios)
Integración : Sin cambios
Avanzado : Sin cambios

Vamos a la página, la actualizamos y veremos los cambios que hemos hecho.

Probamos con los productos del ejemplo para verificar que todo esté correcto para que funcione nuestra Tienda.

Crear un producto y cambiar algunos rótulos:

Lista de lo que vamos a modificar a continuación:

Cambiamos los nombres del menú al idioma español,
Modificamos el texto principal
Cambiaremos la fotografía a una más acorde al tema de nuestra tienda
Activaremos el botón de Shop(compra) para que los clientes puedan comprar nuestros productos.
Y borraremos de la página principal lo que no vamos a necesitar por el momento.

Menú:

Para encontrar el menú vamos a la parte de atrás y en el menú principal vamos a Apariencia—-> Menús

Una vez que vamos a Apariencia, Menús lo abrimos en una nueva pestaña preferentemente y cambias el título a cada una de las etiquetas.

Clic en Guardar Menú.

Clic en Refrescar. Listo.

Agregar producto:

Vamos a vender un combo, una cajita de frutas y verduras y para ello vamos a la parte de atrás en WooCommerce, Productos—->Todos los productos—-> Añadir uno nuevo, abrir en una nueva pestaña preferentemente.

Le ponemos el nombre, en el ejemplo sería: Cajita de Frutas y Verduras — Combo #1. El contenido. Colocamos el precio. Descripción corta. Del lado derecho podemos poner una categoría. Poner etiquetas para que los buscadores de Google las localice. Poner una imagen del producto. Publicar. Podemos ver como quedó el producto con la categoría, etiquetas, etc.

Añadir el producto a la página principal:

Le damos clic en Editar con Elementor: cambiamos todos los textos necesarios, cambiar la imagen, si no te gusta el filtro que tiene la imagen lo puedes elminar en Estilo—> Filtros CSS y le das clic en el botón de volver a los valores por defecto. Ahora para activar el botón de Shop le añadimos un link y para ello vamos a la página donde está el producto, copiamos el link, regresamos a donde estábamos editando y le damos clic al botón, en la parte izquierda donde dice Enlace pegamos el link, clic en la ruedita para poner que se abra en una ventana nueva y le damos a Actualizar. Ya con esto tenemos modificada la primera sección de la página para que sea compatible con lo que nosotros queremos para este producto. Clic en Ver página. (ver imagen)

Ahora creamos un segundo producto y le hacemos todos los cambios necesarios. Una vez estén hechos todos los cambios le damos a Publicar.

Para que aparezcan los producto que agregamos le damos en editar Shortcode: (ver imágenes)

crear tienda online19 — Borramos lo de visibility=”featured”

crear tienda online20 — Asi queda el shortcode pero para que aparezcan los productos tiene que poner Combos.

Podemos borrar todo lo que no nos interese dándole a la x.

Para finalizar hacemos las pruebas oportunas haciendo los pedidos de las dos cajitas, comprobamos que nos salen en el carrito, que tienen los datos necesarios. Llegarán dos correos, uno para el cliente y el otro para el administrador o el dueño del negocio. Para ver esos pedidos se van a la parte de atrás de la plataforma en WooCommerce—->productos—->pedidos y verán los dos pedidos que ahora se estarán procesando y para finalizarlo en la lista donde pone procesando le dan a Completado y Actualizan y lo mismo lo hacen con el siguiente pedido. Y ya podrán ver los productos Completados en vez de Procesando.

Eso es lo básico para tener tu primera tienda en linea y que el cliente pueda pedir.