Cómo crear una tienda en línea fantástica con WooCommerce, Divi y SiteGround (octubre 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 comienzas a construir tu sitio web de comercio electrónico Ciertamente tienes muchas opciones que hacer, y WordPress se enlaza con esto.

Cual del destacado plataformas de comercio electrónico vas a elegir? ¿Está planeando capturar un tema para vender sus productos o hay alguien a quien pueda pagar para construir el sitio desde cero? Heck, ¿qué planeas vender a través de tu sitio web de comercio electrónico?

Nota del editor: esta publicación se publicó originalmente en enero 15, 2015 y se ha renovado y actualizado completamente para que sea precisa y completa.

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 Iart or 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 Tema de WordPress de Temas elegantes Es una opción bastante bonita para que la consideres. Puede usarse para un sitio web de negocios 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 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 alojamiento y nombres de dominio, pero personalmente creo que SiteGround es una de las opciones más seguras y confiables. (Para más detalles echa un vistazo a nuestra completa Revisión de SiteGround).

Lo realmente genial es que SiteGround ofrece un servicio especializado. gestionado WooCommerce hosting Paquete de servicio con prácticamente todo lo que necesita para comenzar a vender en línea. Dentro del paquete, puede conformarse con cualquiera Plan de inicio para principiantes, Plan GrowBig para empresas en crecimiento, o GoGeek Para tiendas establecidas de WooCommerce.

Cada uno de estos ofrece características avanzadas para optimizar su sitio WooCommerce a un precio razonable.

Dicho esto, otro servicio de alojamiento que recomendamos para las tiendas Divi WooCommerce es BlueHost. Aunque las características aquí no coinciden con las de SiteGround, aún se obtiene el alojamiento enfocado en WooCommerce a través de su paquete de comercio electrónico de WordPress. Los planes pueden manejar cómodamente una tienda Divi WooCommerce, pero lamentablemente, no obtendrá servicios administrados.

👉 Ahora, en aras de la claridad, procedamos con SiteGround ...

¿Cómo empiezas?

Vaya a la SiteGround Managed WooCommerce Hosting página, seleccione un plan ideal y haga clic en Obtener Plan.

En mi opinión, la Plan GoGeek Parece la opción más adecuada ya que admite sitios web ilimitados de WooCommerce con capacidades avanzadas de comercio electrónico. Además de una mayor potencia del servidor, obtiene soporte prioritario, almacenamiento de WordPress, respaldo a pedido y recursos súper informativos, así como transferencias de sitio gratuitas y Cloudflare CDN, entre otras características sólidas.

👉 Y en lo que respecta a las asignaciones de recursos, este plan tiene en cuenta:

  • Buzón 6GB
  • Almacenamiento de base de datos 1 GB
  • Almacenamiento SSD
  • Transferencia de datos sin medir
  • 30GB espacio de almacenamiento
  • Hasta 100,000 visitas mensuales

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

Pero recuerda, ese es un precio especial para principiantes. Espere que aumente a $ 34.95 en futuras renovaciones, lo que sigue siendo un cargo razonable si considera todas las características que obtiene a lo largo del tiempo.

Ahora, una vez que haya seleccionado su plan preferido, Iart Le dirigirá a su página de registro de dominio. Si ya posee un dominio, elija la segunda opción e ingrese sus detalles. De lo contrario, proceda con el registro de un nuevo nombre de dominio en $ 15.95 al año.

La siguiente es la etapa final, donde elige sus opciones de alojamiento preferidas, así como también ingresa su información de pago y sus datos personales, antes de crear la cuenta.

Bueno, por supuesto, estas son cosas básicas que has manejado muchas veces antes. Por lo tanto, no debería tener dificultades para ingresar su número de teléfono, país, nombre, correo electrónico, contraseña de la cuenta, etc.

La parte de pago requiere que ingrese los datos de su tarjeta de crédito. Puede proceder con cualquiera Descubrir, MasterCard or Visa.

Sin embargo, y bastante interesante, Iart no incluye a PayPal, a pesar de su creciente popularidad entre los comerciantes de WooCommerce. Pero, afortunadamente, resulta que pueden aceptar pagos de PayPal, aunque de manera indirecta.

Por lo tanto, si este es su modo preferido, simplemente deje los campos en blanco y comuníquese con los agentes de ventas de SiteGround a través de la herramienta de chat en vivo. Te ayudarán a completar el proceso a través de PayPal.

La última sección contiene varias opciones para su servicio de alojamiento, incluida la ubicación de su centro de datos preferido, más el período de suscripción.

Ahora, para minimizar la distancia de transferencia de datos entre los servidores de Siteground y los visitantes de su sitio WooCommerce, elija la ubicación del centro de datos más cercana a su área de mercado objetivo.

Luego, elija cualquier servicio adicional que desee incluir en su paquete, ¡y listo! Eso es todo lo que se necesita para configurar una cuenta de Siteground.

Una vez que haya terminado, inicie sesión en su cuenta y vaya directamente a su área de cPanel. Encontrarás un instalador de WordPress predeterminado. Entonces, selecciónelo, ingrese sus datos de inicio de sesión de WordPress y presione el botón de instalación.

Bueno, te darás cuenta de que el proceso de instalación de WordPress tarda unos segundos ya que está completamente automatizado. Y después de que todo esté configurado, SiteGround 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

¿Qué es Divi?

Ok, si no lo has probado, apuesto a que ya lo has oído. divi no es un tema común de WooCommerce. Es, de hecho, uno de los temas de WordPress más populares en Temas elegantes. Y, curiosamente, Divi es Tema eleganteproducto estrella.

Entonces, ¿qué tiene de especial este tema? ¿Y hay algo sobresaliente en el WooCommerce de Divi?

Bueno, a diferencia de los temas típicos de WordPress, Divi es más que un paquete completo. Eso significa que combina características de tema estándar con funcionalidades adicionales que son útiles para las tiendas Divi WooCommerce.

que es divi

Aunque no me malinterpretes. Aunque el soporte principal de Divi para WooCommerce es el enfoque principal aquí, el tema es capaz de mucho más que eso. En esencia, Divi se puede integrar perfectamente con cualquier tipo de sitio, gracias a su amplia gama de diseños de sitios web. No sólo el comercio electrónico.

Luego, para colmo, Divi viene con su propio complemento intuitivo de creación de páginas de WordPress. Puede usarlo para personalizar libremente su tienda Divi WooCommerce sin ningún tipo de codificación.

De hecho, Divi fue desarrollado para principiantes. Por lo tanto, puede esperar encontrar un panel de control ordenado casi sin curva de aprendizaje. Solo lleva unos minutos familiarizarse con todo el ecosistema Divi, configurarlo y personalizar los diseños de WooCommerce de Divi.

👉 Al final, por lo tanto, podrá capitalizar divi'S:

  • Conjunto de diseños personalizables para cualquier tipo de sitio web de WordPress, incluidas las tiendas en línea WooCommerce.
  • Generador de páginas fácil de usar, que proporciona una gran cantidad de elementos de sitios web y capacidades de diseño.
  • Proceso de personalización flexible sin ninguna forma de codificación. Incluso los novatos pueden configurar y ajustar cómodamente las tiendas Divi WooCommerce completamente funcionales.
  • Integración directa de WordPress. Divi es uno de los pocos temas externos de WordPress que se puede instalar sin problemas y sin ajustes complejos.
  • Plantillas WooCommerce optimizadas para comercio electrónico.

Constructor de página Divi Drag and Drop

Como hemos dicho, Divi viene en dos sabores diferentes. Cuando pagas la membresía en Temas elegantes, encontrará el tema Divi estándar en el tablero, acompañado por el complemento Divi WordPress Page Builder.

Pero vale la pena señalar que este constructor no está vinculado exclusivamente al tema Divi. Viene como un complemento adicional para cada tema individual adquirido de Elegant Themes.

Dicho esto, Divi WordPress Page Builder es un editor de arrastrar y soltar con capacidades avanzadas de personalización. Le permite mover y definir elementos, columnas, filas y módulos sin ninguna experiencia de codificación. En otras palabras, es el tipo de constructor de un Divi WooCommerce El principiante esperaría conseguirlo.

configuración divi

Pero no te confundas. Aunque Divi Page Builder se dirige a principiantes, es un editor que también facilita desarrolladores con experiencia. Pueden combinar sistemáticamente sus características visuales con controles CSS para impulsar sus sitios web Divi WooCommerce al siguiente nivel.

Ven a pensarlo, sin embargo, no necesita un desarrollador para diseñar todos los elementos en su tienda Divi WooCommerce. Puede confiar solo en las funcionalidades visuales.

¿Y sabes qué?

divi incluso intenta hacer que todo el proceso sea mucho más sencillo etiquetando y codificando por colores sus módulos de diseño.

Y hablando de eso, otra provisión notable aquí es la simplificación general de Divi del proceso de personalización del diseño. Si desea introducir una nueva sección, por ejemplo, debería hacer un solo clic. Luego, duplicar, eliminar e insertar módulos para su tienda Divi WooCommerce solo le llevará unos pocos clics.

Mientras tanto, la ventana de edición de Divi mostrará los cambios de diseño de su sitio en tiempo real. Podrá rastrear cada ajuste visualmente y ver cómo afecta el diseño de perspectiva general de su tienda Divi WooCommerce.

Diseños prediseñados de sitios web Divi WooCommerce

Para salvarte del proceso dolorosamente exigente de crear un sitio web desde cero, el tema Divi WordPress viene con una gran cantidad de plantillas de sitios prediseñadas. Y dado que puede necesitar diferentes opciones de diseño de la misma plantilla, Divi ofrece sus diseños de sitios web como paquetes completos. En consecuencia, obtienes diferentes diseños de plantillas y colores.

Bueno, para ser más precisos, Divi proporciona sobre 7-8 diferentes diseños prediseñados en cada paquete de sitio web. Teniendo en cuenta que cada uno viene completamente construido, puede adoptar fácilmente los diseños sin volver a modificar su estructura subyacente. Solo un par de retoques aquí y allá.

diseños de sitios web divi

Ahora, para encontrar uno perfecto para su tienda en línea WooCommerce, simplemente desplácese por las diferentes categorías de sitios en Divi Theme. O bien, use palabras clave para buscar en todas las opciones a la vez.

Bueno, en general, no lleva mucho tiempo identificar un adecuado divi Diseño de tienda online. Solo necesita integrarlo con WooCommerce, y estará en camino de configurar un sitio atractivo de comercio electrónico de WordPress.

Continuando, una cosa particularmente destacable que notará es que Divi no se enfoca solo en el aspecto. Los diseños de WooCommerce que vienen con Divi Theme también se han creado teniendo en cuenta la funcionalidad.

Por lo tanto, además de las páginas típicas de la tienda como el pago, los productos y el carrito, Divi incluye módulos de comercio electrónico por defecto. Más específicamente, obtienes secciones como productos destacados, artículos en venta y mucho más.

¿Divi es adecuado para WooCommerce?

A fin de cuentas, Divi es cada vez más popular porque es fundamentalmente una solución de tema de WordPress todo en uno.

Combinado, el Divi Page Builder y Tema divi La oferta ofrece casi todo lo que necesita para configurar cualquier tipo de sitio de WordPress. Y eso incluye una tienda de WooCommerce completamente funcional con todas las capacidades básicas de comercio electrónico.

👉 En pocas palabras, Divi es una opción que vale la pena considerar para su sitio WooCommerce porque:

  • Puede personalizar su sitio web de WooCommerce a través de un editor visual de arrastrar y soltar.
  • Divi le permite guardar sus ajustes como elementos globales en todos los diseños.
  • Viene con más de 20 diseños de sitios web pre-diseñados y bien diseñados.
  • Puede exportar fácilmente los diseños y, posteriormente, aprovecharlos en otros sitios web.
  • Puede diseñar su tienda WooCommerce con múltiples columnas, filas y elementos de contenido.
  • Todos los diseños de WooCommerce se han optimizado para dispositivos móviles.
  • Al igual que MS Word, editar el contenido del texto es tan simple como hacer clic y luego escribir.
  • El proceso completo de personalización del sitio se realiza un seguimiento en tiempo real, por lo que proporciona una vista previa en vivo de todos los cambios de diseño.
  • Los diseños de WooCommerce vienen con módulos y páginas de tiendas primarias en línea.

Paso 1: Regístrate con temas elegantes para obtener acceso a Divi

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: instala Divi en tu sitio de WordPress

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: Configura tu tienda WooCommerce

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 que es sorprendente es que el registro inicial de SiteGround ya instaló WooCommerce en su sitio web de WordPress, por lo que no tiene que preocuparse por instalarlo o configurarlo. Ya debería estar disponible en su panel de control.

Paso 5: agrega tus primeros productos a WooCommerce

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 debajo de 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: Explora las características de WooCommerce

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: Crea la página de inicio

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: agrega un título para tu página Divi

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: Vista previa y publicación

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.

Conclusión

Y eso es todo lo que se necesita para obtener su divi La tienda en línea de WooCommerce está en funcionamiento usando una cuenta de hosting de SiteGround.

En el futuro, puede estar seguro de que SiteGround manejará todas las cosas técnicas críticas como las actualizaciones de WordPress y WooCommerce seguridad. Esa es la diferencia fundamental entre el hospedaje administrado de WooCommerce y las soluciones de hospedaje compartido regular. Por lo tanto, le brinda el tiempo y el espacio tan necesarios para centrarse en la administración de su tienda WooCommerce.

Y como ya hemos visto, eso debería ser una brisa con el tema Divi. Siempre puede acceder a su diseño Divi WooCommerce desde su backend de WordPress para personalizarlo aún más. Si lo desea, incluso puede cambiar el diseño completo cambiando a un diseño diferente que pueda manejar una tienda WooCommerce también. La decisión es tuya.

Si tiene alguna pregunta sobre la configuración del tema de Divi WordPress, háganoslo 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.