Cómo crear una tienda en línea fantástica con WooCommerce, Divi y Bluehost (Enero 2019)

Más de 74 millones de sitios dependen de la plataforma de WordPress para alojar sus blogs, vender sus productos o simplemente escribir sus reflexiones diarias para que el mundo las vea. Cuando empiezas a construir tu sitio web de comercio electrónico, definitivamente tienes muchas opciones que tomar, y WordPress se relaciona con esto. ¿Cuál de las plataformas destacadas de comercio electrónico elegirás? ¿Estás planeando agarrar un tema para vender tus productos o hay alguien a quien puedas pagar para construir el sitio desde cero? Diablos, ¿qué planea vender en su sitio web de comercio electrónico? Hay miles o millones de temas de WordPress para elegir cuando busca la estructura de interfaz y back-end para comenzar a vender en línea. Casi lo mismo con el alojamiento (pero preferimos Bluehost).

Los mejores temas incluyen herramientas de administración de comercio electrónico rápidas y sencillas para que pueda subir productos y administrar cosas como descuentos, recompensas, botones y páginas de productos. Su tema también es lo primero que las personas verán cuando visiten su sitio. Los guía a través del proceso y realmente lleva la diferencia entre que alguien esté satisfecho con la experiencia o no.

En resumen, los temas de WordPress son cruciales, y el divi El tema de WordPress de Elegant Themes es una opción bastante agradable para que lo considere. Se puede utilizar para un sitio web empresarial estándar, pero también incluye integraciones para la venta de comercio electrónico y procesos de venta rápidos. Aprendamos cómo crear una tienda en línea con el tema de Divi WordPress.

Obtenga su dominio y alojamiento primero

El primer paso en cualquier proceso de creación de sitios web es obtener una cuenta de hosting, un nombre de dominio e instalar WordPress en el sitio. divi no es diferente Hay muchas formas de obtener hosting y nombres de dominio, pero personalmente creo que Bluehost es una de las opciones más seguras y confiables (para más detalles, consulte mi Bluehost review).

Lo que es realmente genial es que Bluehost ofrece un plan de integración de WordPress + WooCommerce eso le da todo lo que necesita para comenzar a vender en línea.

¿Cómo empezar?

Vaya a la Bluehost página que habla sobre la integración, luego haz clic en el botón Comenzar ahora.

Tenga en cuenta que este servicio comienza en $ 11.95 por mes, y es muy similar a cómo instalaría un sitio regular de WordPress en una cuenta de hosting Bluehost.

La principal diferencia es que WooCommerce ya está instalado. Además, recibes lo siguiente:

  • Positiva seguridad de comercio electrónico SSL
  • Una línea de soporte dedicada
  • Al menos 100 GB de espacio de sitio web
  • Ancho de banda no medido
  • Cuentas de correo electrónico 100
  • Dominios gratis
  • Una IP dedicada

woocommerce_and_wordpress

En el futuro, puede elegir el plan que desea pagar y pasar a la página siguiente.

choose_your_plan

Después de eso, puedes probar nuevos nombres de dominio para descubrir si lo que deseas aún está disponible. Una vez que encuentre un nombre de dominio disponible que se ajuste a su marca, pase a la página siguiente.

Registro de dominio BlueHost

Después de eso, ingrese toda su información personal, detalles de pago y decida qué tipo de plan de hosting anual o mensual desea usar. Se vuelve más barato cuanto más meses te comprometes desde el principio.

Información del paquete

Por lo general, puede omitir toda la basura extra añadida, a menos que esté realmente interesado en pagar para hacer una copia de seguridad de su sitio o pagar por la protección de la privacidad. Generalmente no necesita esto o puede obtenerlo gratis más adelante. Después de eso, puede crear sus datos de inicio de sesión para su cuenta Bluehost, que luego lo llevará al CPanel. Una vez que haya iniciado sesión en el CPanel, navegue hasta el área de constructores de sitios web, haga clic en WordPress y siga el proceso para obtener WordPress en su sitio.

Constructores de sitios web de BlueHost

Por lo general, esto solo lleva cinco minutos, ya que todo está automatizado y solo tiene que hacer algunas credenciales de inicio de sesión para iniciar sesión en el back-end de su sitio. Una vez que todo está configurado, le dará el nombre de dominio adecuado para acceder si desea cambiar las cosas en el backend de su sitio.

Creando tu tienda en línea con Divi

Paso 1

Comience por ir al Página del producto The Elegant Themes para el tema de Divi WordPress. Esta página ofrece la opción de una demostración de tema y un botón de descarga rápida. Elegant Themes vende sus temas utilizando una estructura de pago anual o única que es agradable para los desarrolladores con múltiples sitios de clientes o personas que ejecutan numerosos sitios web de comercio electrónico. Realmente no se puede comprar un solo tema, pero el Plan personal por $ 67 por año es similar a lo que podría pagar por un tema regular, y puede detener los pagos anuales si ya no desea la asistencia. Siéntase libre de jugar con el tema antes de comprometerse con el pago.

Tema de Divi WordPress

Paso 2

Una vez que se registre, haga clic en el botón de descarga del tema. Esto coloca el tema como un archivo zip en su computadora. Vaya a la pestaña Aspecto en el servidor de su sitio de WordPress y haga clic en la opción Temas.

Nuevo tema de Wordpress

Paso 3

Haga clic en el botón Agregar nuevo.

Wordpress agrega un nuevo tema

Haga clic en el botón Cargar tema. Encuentre y cargue el archivo zip del tema. Siga el proceso para activar completamente el tema y luego podrá ver el tema en la interfaz de su sitio.

Carga del tema de Wordpress

Paso 4

Si vas a la Página de documentación de Divi Theme Encontrará casi todas las herramientas y funciones con las que puede trabajar en el tema, pero nos centraremos principalmente en la creación de un sitio web de comercio electrónico. El tema Divi es totalmente compatible con WooCommerce para que pueda visualizar todos sus productos a partir de eso.

Lo increíble es que el registro inicial de Bluehost ya instaló WooCommerce en su sitio web de WordPress, por lo que no tiene que preocuparse de instalarlo o configurarlo. Ya debería estar disponible en su tablero de instrumentos.

Paso 5

Técnicamente ya tiene el sitio de comercio electrónico completamente configurado, pero queremos agregar algunos productos para que se vea como un sitio de comercio electrónico en la interfaz. Vaya a su panel de WordPress, haga clic en la pestaña Productos en WooCommerce y haga clic en el elemento Agregar producto.

WooCommerce agregar nuevo producto

Paso 6

Esto abre una nueva página de producto para que llene. Se ve muy similar a cualquier editor de páginas de WordPress, excepto que puede agregar un nombre de producto, una descripción y una imagen destacada para que las personas puedan ver cómo se ve el producto en su sitio web.

Comercio electrónico agregar un nuevo campo de productos

Paso 7

Si se desplaza hacia abajo debajo del área de descripción, encontrará todas las funciones de WooCommerce posibles para jugar. Siéntase libre de modificar cosas como números de SKU, inventario, precios, envío y atributos. Las características son demasiado grandes para que las describa todas aquí, pero pueden ir al Página de documentación de WooCommerce para comprender todo lo que puede configurar en su sitio de comercio electrónico.

Características de WooCommerce

Paso 8

El objetivo de esto es crear una página de inicio o una página normal que muestra todos sus productos cuando las personas se muestran en su sitio. Por lo tanto, debe ir a Páginas> Agregar nuevo en el lado izquierdo de su tablero de WordPress.

Nueva página de Wordpress

Paso 9

Crea un título para tu página. Haga clic en el botón Usar creador de páginas en la parte superior y toque en el área Insertar módulos para incluir un encabezado de ancho completo. No tiene que elegir un encabezado de ancho completo, pero vamos a ir a este tutorial.

Constructor de páginas wordpress

Paso 10

Haga clic en el botón de encabezado de ancho completo.

Agregar un encabezado

Paso 11

Complete los detalles para el título del sitio, el texto del subtítulo y el color del texto. Incluso puede cambiar la etiqueta de administrador, que es principalmente para su propia referencia. Presione el botón Guardar cuando se complete.

Personalización del encabezado

Paso 12

Toque las tres barras a la izquierda del módulo de encabezado Full Width para cambiar más configuraciones.

Configuración de woocommerce de WordPress

Paso 13

Aquí puede darle al encabezado un bonito color de fondo e incluso incluir un video para su empresa.

Ajusta estos botones alrededor

Paso 14

Ahora que el encabezado está completo, podemos incluir el módulo de comercio electrónico haciendo clic en el área Insertar columnas.

Configuración de comercio electrónico de Wordpress

Paso 15

Elija cuántas columnas desea, luego haga clic en la opción Insertar módulos que aparece. Seleccione el botón Comprar cerca de la parte inferior.

Configuración de comercio electrónico de Wordpress

Paso 16

Siéntase libre de modificar la forma en que desea mostrar sus productos. Por lo tanto, es posible que desee mostrar sus productos recientes, junto con los elementos de 12 en la página, algunas columnas y cómo desea que se soliciten. Haga clic en el botón Guardar.

Configuración de comercio electrónico de Wordpress

Paso 17

Una vez que esto esté completo, puede presionar el botón Vista previa o Publicar para ver los cambios en la interfaz. Como puede ver, los productos se muestran muy bien y siempre puede regresar para cambiar sus productos o la configuración de escaparate en el back-end de WordPress. ¡Felicidades!

Si tiene alguna pregunta sobre cómo configurar el Tema de Divi WordPress, por favor, háganos saber en la sección de comentarios a continuación.

divi Clasificación: 5.0 - Revisado por

Catalin Zorzini

Soy un blogger de diseño web y comencé este proyecto después de pasar algunas semanas luchando por descubrir cuál es la mejor plataforma de comercio electrónico para mí. Echa un vistazo a mi actual top constructores de sitios de comercio electrónico de 10.