Cómo hacer un sitio web de tienda de comercio electrónico en línea con WordPress

El comercio electrónico está al rojo vivo porque hace que sea increíblemente fácil ganar 6 cifras al mes sin crear un negocio de ladrillo y mortero con costos indirectos increíblemente altos..


Pero el problema para muchos son las costosas tarifas mensuales de la mayoría de las plataformas de comercio electrónico como Shopify. Si recién está comenzando, desea una solución más asequible para poder gastar más en cosas como marketing y publicidad..

La buena noticia es que no necesita pagar altas tarifas mensuales con Shopify para poder vender productos en línea. Si está buscando una alternativa de Shopify o una alternativa de eBay, este tutorial paso a paso lo dejará con una increíble tienda en línea gratis.

Todo lo que necesita es una cuenta de alojamiento web y un poco de esfuerzo, y podrá crear un sitio web de comercio electrónico en muy poco tiempo..


Empecemos!

Cosas que necesitas:

  • Hosting. Recomiendo SiteGround.
  • UNA nombre de dominio.
  • Tema de WordPress. Para este tutorial, usamos el tema gratuito de Astra.
  • WordPress Page Builder. Para esto, utilizamos el creador de páginas gratuito Elementor.
  • WooCommerce, el mejor complemento de WordPress para comercio electrónico.

Paso 1. Compre un alojamiento web y un nombre de dominio.

Si es nuevo en este negocio de creación de sitios web, permítame aclarar primero qué es un alojamiento web y un nombre de dominio y por qué los necesita..

¿Qué es un hosting y un nombre de dominio??

Un alojamiento web es un lugar en Internet donde vivirá su sitio web. Es como una casa física donde se pueden encontrar tus cosas. El nombre de dominio, por otro lado, es la dirección de su sitio web. Es como su dirección que le da a las personas para que puedan visitarlo en su casa. “Facebook.com”, “Google.com” y “WordPress.com” son ejemplos de nombres de dominio.

Puede comprar un nombre de dominio en casi cualquier sitio web que venda nombres de dominio. Solo tienes que buscar el mejor precio. Pero en cuanto al alojamiento de sitios web, es absolutamente importante obtener alojamiento de una empresa confiable. Porque si su alojamiento es lento o poco confiable, la velocidad y el tiempo de actividad de su sitio web se verán afectados, y finalmente dañará su negocio de comercio electrónico.

Siteground, mi servicio de alojamiento web preferido

Puede usar cualquier servicio de alojamiento web de alta calidad para crear un sitio web de comercio electrónico, pero en este tutorial, vamos a usar Siteground.

SiteGround es un proveedor de alojamiento web altamente recomendado en línea, ya que ha atendido a los usuarios de WordPress y aún así tiene un precio asequible. Son más conocidos por su rápido rendimiento y soporte igualmente rápido.

Estas son las características clave de SiteGround:

  • Certificado SSL gratuito
  • Soporte informado rápido
  • Entorno de ensayo de WordPress
  • Migraciones gratuitas de sitios web
  • 30 días de copias de seguridad

SiteGround es una opción sólida para sus necesidades de alojamiento web. Atienden a sitios web de WordPress y ofrecen menos recursos que sus competidores pero mayor confiabilidad.

Hice un trato increíble con ellos para dar un 70% de descuento a cualquiera que se registre usando este enlace. Entonces, si quieres ahorrar dinero en tu hosting, haga clic en este enlace y compra tu hosting ahora.

Una vez que llegue a su página de inicio, verá cuatro tipos diferentes de alojamiento:

elegir un plan de sitio

Elija el alojamiento de WordPress y haga clic Empezar. Luego verá tres planes de precios:

precios de alojamiento de wordpress en el sitio

Elija uno de acuerdo a sus necesidades y presupuesto. También puedes ver sus comparación de cada plan de alojamiento para tener una mejor idea de qué plan se adapta mejor a sus necesidades.

Una vez que haya decidido un plan, haga clic en Obtener plan. Luego será llevado a una página donde tendrá que elegir un dominio. Si ya compró un nombre de dominio, seleccione “Ya tengo un dominio”. Pero si no tiene uno, seleccione “Registrar un nuevo dominio” para comprar un dominio dentro de Siteground.

elige un dominio

Una vez que tenga un nombre de dominio que le guste y esté disponible, haga clic en Continuar. El siguiente paso es proporcionar sus datos personales y de facturación para completar la compra. Proporcione sus datos con precisión y haga clic Pagar ahora. Ahora tiene un alojamiento web confiable y un nombre de dominio.

Segundo paso. Instalar WordPress.

WordPress es una herramienta gratuita de código abierto que te permite crear sitios web incluso si no tienes ni idea de la codificación. Es el sistema de administración de contenido de sitios web más fácil y poderoso hasta la fecha. Hay muchas cosas que me encantan de WordPress, y si lees más de mis tutoriales o ves mis videos, descubrirás más acerca de por qué creo que WordPress es la mejor herramienta para crear sitios web para personas que no son expertos en tecnología..

Siteground en realidad viene con una instalación de WordPress con un solo clic que hace todo el trabajo duro de instalar y configurar WordPress por usted.

Una vez que haya completado su compra de alojamiento, verá una pantalla con un enlace que dice “Proceda al área del cliente”. Haga clic en eso y se lo dirigirá a una página donde puede configurar su nueva cuenta de alojamiento. Debajo Configura tu sitio web, Seleccione Comience un nuevo sitio web.

Luego verá una lista de software que puede instalar. Seleccione WordPress.

instalar wordpress

Luego deberá proporcionar los detalles de inicio de sesión de administrador para su nuevo sitio web, como su dirección de correo electrónico, nombre de usuario y contraseña. Asegúrese de proteger estos detalles porque los usará para iniciar sesión en su sitio web.

Una vez hecho eso, haga clic en Confirmar > Configuración completa. Y ahora tiene un sitio web de WordPress en vivo y autohospedado.

Para comenzar a personalizar su sitio web, deberá iniciar sesión en el backend de WordPress. Para hacer eso, vaya a su panel de Siteground y cambie a Mis cuentas lengüeta. Haga clic en el Instalación pestaña, y aquí verá el nombre de dominio que registró. Al otro lado hay un verde Ir al portal de administración botón. Haga clic en este botón para ir a su página de inicio de sesión de WordPress.

ir al panel de administración de WordPress

Las páginas de inicio de sesión de WordPress suelen tener estos formatos: yourdomain.com/wp-admin y yourdomain.com/wp-login. Recuerde la URL de su página de inicio de sesión para que la próxima vez pueda acceder ingresando directamente la URL en su barra de direcciones y sin tener que iniciar sesión en Siteground..

La página de inicio de sesión de WordPress tiene este aspecto:

página de inicio de sesión de WordPress

Ingrese su nombre de usuario y contraseña aquí para iniciar sesión en su sitio web por primera vez.

Paso 3. Instale el tema Astra y los sitios Astra.

Astra Theme es el tema que usaremos para que nuestro sitio web de comercio electrónico se vea excelente y profesional lo más rápido posible. Puede usar otros temas si lo prefiere, pero para este tutorial, iremos con Astra Theme.

Astra es un tema gratuito de WordPress que tiene excelente velocidad y simplicidad. Combínalo con los sitios de Astra (complemento gratuito), y cualquiera puede tener un hermoso sitio web con unos pocos clics del mouse. También hay una versión Pro disponible que hace de Astra el tema perfecto..

Estas son las características que más me gustan de Astra:

  • Uno de los temas más rápidos disponibles
  • Más de 100 sitios de inicio (la mayoría son 100% gratuitos)
  • Función de menú mega flexible
  • Potente paquete de complementos
  • Amplio soporte de WooCommerce

Astra Theme es una excelente opción para cualquier proyecto de diseño web de WordPress. De hecho, es el tema que estoy usando en este sitio web y en todos mis proyectos..

Tengo plena confianza en el desarrollador y me ha impresionado lo bien codificado que está el tema..

Pero más que eso, el tema es tan simple de usar debido a todo el cuidado y el pensamiento que se le ha dado. En la mayoría de las situaciones, se configura en función de las herramientas que está utilizando.

Para instalar Astra, vaya a Apariencia > Tema > Añadir nuevo. Busque Astra, haga clic Instalar en pc, y Activar.

instalando el tema astra

Otra cosa que amo a Astra es el hecho de que tiene un complemento llamado Sitios de inicio de Astra con una biblioteca de plantillas gratuitas y premium preconstruidas. Puede usar estas plantillas para su propio sitio web con solo unos pocos clics. Utilizaremos una plantilla de sitio de Astra para reducir el tiempo de creación de nuestro sitio web a la mitad.

Después de instalar Astra, verá este mensaje en su tablero:

Los sitios de Astra comienzan

Hacer clic Empezar. Esto instalará los sitios de inicio de Astra para usted.

Elegir tu generador de páginas

Luego se le preguntará qué creador de páginas prefiere, y en este tutorial, voy a usar Elementor. Elementor es un creador de páginas de WordPress que ha tomado el diseño web de WordPress por sorpresa. Tenía el conjunto de características más profundo, pero es muy fácil de usar y dominar. Elementor es el creador de páginas gratuito más completo. También hay un complemento Pro para agregar características de desarrollador adicionales.

Características clave de Elementor:

  • Live Front End Page Editor
  • Características de personalización del sitio web
  • Biblioteca de plantillas y bloques
  • Amplias opciones de respuesta móvil
  • El generador de ventanas emergentes más potente
  • PRO: Crear encabezados / pies de página personalizados
  • PRO: Crear diseños de tipo de publicación

Elementor es el creador de páginas más fuerte actualmente disponible. Lanzan constantemente nuevas características que están en línea con las tendencias de diseño actuales. Esto significa que podrá mantener su sitio web relevante. Si, en el camino, desea acceder a funciones avanzadas, puede actualizar a Elementor Pro, lo que creo que es un valor increíble teniendo en cuenta todos los módulos adicionales y funciones de potencia que incluye.

Elección del tema de su sitio Astra

Una vez que haya elegido su creador de páginas, se lo dirigirá a la biblioteca de plantillas de Sitios Astra. Hay un montón de hermosas plantillas que puedes usar. Tómese su tiempo para elegir la plantilla que desee. Y tenga en cuenta que estas plantillas son totalmente editables con el generador de páginas que seleccionó, lo que significa que podrá personalizar cada parte y elemento del sitio web, como el encabezado, las imágenes, los colores, el logotipo, etc..

Para este tutorial, voy a usar la plantilla de impresión personalizada porque se ve increíble y muy orientada al comercio electrónico.

Para instalar un tema, solo tiene que hacer clic en él para acceder a la vista previa. Si te gusta lo que ves, haz clic en Importar tema botón y asegúrese de que todas las casillas estén marcadas.

Si te das cuenta, hay un cuadro que dice “Instalar complementos necesarios”. Al marcar esta casilla, se instalarán todos los complementos necesarios para que el tema se vea exactamente como está. Para el tema de Impresión personalizada, instalará Elementor, WooCommerce y WPForms. Esto me ahorra mucho tiempo porque ya no tendré que instalar estos complementos uno por uno. Todo esta hecho por mi.

importando el tema del sitio astra

Importar el tema puede llevar un tiempo. No cierre su navegador ni presione Actualizar. Espera, y cuando termine, verás un azul Ver sitio botón. Haga clic en ese botón para acceder a su sitio web que ahora tiene el tema que acaba de importar.

Paso 4. Personaliza tu sitio web.

Su sitio web ahora se ve impresionante, pero querrá personalizarlo. Lo primero que quiere hacer es elegir su paleta de colores. Si ya tienes el color de tu marca, será más fácil.

Elegir una paleta de colores

Un sitio web normalmente tiene un conjunto de 3 colores: el primario, el acento y el color pop. El color primario es el color dominante de su sitio web y muy probablemente el color de su marca. El color de acento se usa normalmente en encabezados o títulos de publicaciones si desea que se vean un poco diferentes para atraer la atención hacia ellos. Por último, el color emergente debe contrastar el resto de los colores para resaltar elementos importantes del sitio web, como los botones de llamada a la acción..

Para elegir una paleta de colores del sitio web, utilizo dos herramientas. El primero es Coolors.co donde puede navegar por diferentes paletas de colores y elegir lo que desea usar en su sitio web.

página de inicio

Si ve una paleta que le gusta, pase el mouse sobre ella, haga clic Ver, y será llevado a una nueva ventana donde verá los códigos hexadecimales de cada color.

paleta de colores con código hexadecimal

Estos códigos hexadecimales son lo que necesita para usar estos colores en su sitio web. Más adelante les mostraré cómo usar estos códigos hexadecimales en el backend de WordPress.

Otra herramienta genial es Colorzilla, una extensión de Google Chrome que le permite obtener el código hexadecimal de cualquier color que vea en cualquier sitio web para que pueda usarlo por su cuenta. Si quieres obtener la extensión Colorzilla, haga clic aquí. Luego haga clic Añadir a Chrome.

colorzilla

Puede llevar un tiempo, pero una vez que lo haya hecho, verá este icono en su barra de herramientas:

icono de colorzilla

Ahora, si ve un color en cualquier sitio web que desea probar y usar en su propio sitio web, solo tiene que hacer clic en este icono y hacer clic en el color que desea copiar. El código hexadecimal se copiará automáticamente y podrá pegarlo en el backend de su sitio web. Es fácil. Esta es una herramienta práctica que te permitirá usar colores geniales en un clic.

Personalizar tipografía

También desea utilizar su propia tipografía para que su sitio web se destaque. Los sitios web normalmente tienen 2-3 fuentes. Tendrá una fuente para titulares o menú, una fuente para el cuerpo y una “fuente emergente” adicional. Al igual que los colores, no puede usar cualquier fuente. Debes asegurarte de que se vean bien juntos y enviar el mensaje correcto sobre tu marca.

Me gusta usar Fontpair.co que es un sitio web que muestra cómo se ven juntas dos fuentes diferentes.

usando fontpairs.co

Si ve algo que le gusta, solo tenga en cuenta cómo se llama para que pueda ir a WordPress y agregarlo directamente allí.

También me gusta usar WhatFont, una extensión de Google Chrome que te dice qué fuente se usa en cualquier sitio web. Para instalar WhatFont, haga clic aquí luego haga clic Añadir a Chrome. Luego verá este icono en su barra de herramientas:

icono de whatfont

Si desea conocer el nombre de una fuente, simplemente haga clic en este icono y desplace el mouse sobre el texto. WhatFont le dirá el nombre de esta fuente, y si hace clic en ella, también verá el tamaño, color, familia, estilo, peso y más de la fuente.

usando whatfont

Conseguir un logotipo

También necesitaría un logotipo de marca para diferenciar su sitio web y establecer su identidad de marca. Hay varias maneras de obtener un logotipo. Puedes intentarlo tú mismo usando una increíble herramienta de diseño llamada Canva. Es bastante popular ya que hace que el diseño sea realmente fácil incluso para principiantes..

Canva viene con muchas plantillas de logotipos que puede modificar para hacer las suyas propias. Sin embargo, tenga en cuenta que si desea exportar el logotipo con un fondo transparente, deberá actualizar a Pro (que tiene una prueba gratuita de un mes). Siempre puedes ir a Photoshop o Photopea para eliminar el fondo, pero eso solo agrega un paso adicional al proceso.

logotipos de canva

Si desea ahorrar tiempo, puede contratar a un diseñador de logotipos independiente para que lo haga por usted. Puede probar sitios web como Fiverr.com o 99design, pero debe tener cuidado al elegir un artista en función de su estilo, historial, reseñas, calificaciones y más.

Personalizando su sitio web

Ahora es el momento de usar esos colores, fuentes y logotipos en su sitio web. Si estás en el panel de back-end de WordPress, ve a Apariencia > Personalizar para abrir el personalizador de temas.

tema personalizado

Si estás en la interfaz de tu sitio web y hay una barra negra en la parte superior, puedes hacer clic Personalizar para abrir el personalizador.

tema personalizado

Así es como se ve el personalizador de temas:

personalizador de temas

Aquí, puede cargar su logotipo, cambiar los colores y la tipografía del sitio, personalizar los botones y mucho más. Los cambios que realice aquí se muestran en tiempo real en su sitio web para que pueda ver inmediatamente cómo se ve. Además, cada tema tiene diferentes opciones de personalización, por lo que si está utilizando otro tema que no sea Astra, puede ver diferentes opciones aquí.

En Astra, para cambiar los colores de su sitio, vaya a Colores y fondo. Tendrá la opción de cambiar los colores base, las migas de pan, el encabezado y los colores de la barra de pie de página.

editor de fondo de color

Los colores base son el tema, el enlace, el texto y el color de desplazamiento del enlace de su sitio web. Si desea cambiar, por ejemplo, el Color del tema, haga clic en Seleccionar el color. Verás dos formas de seleccionar un color. Primero, puede pegar un código hexadecimal en un cuadro. Entonces, si encontró un color en Coolors.co o en cualquier otro lugar, puede pegar el código Hex aquí. También puede seleccionar un color en una herramienta de selección incorporada.

editor de color base

Para cambiar la tipografía de su sitio, regrese al menú principal del personalizador y haga clic en Tipografía. Podrá cambiar la base, la ruta de exploración, el contenido y la tipografía del blog..

personalizador de tipografía

Lo siguiente es agregar su logotipo. Para cargar su logotipo, vaya a Diseño > Encabezamiento > Identidad del sitio. En la sección Logotipo, haga clic en el Cambiar logo abotone y cargue su logotipo.

subir logo

Astra también te permite ajustar el ancho de tu logotipo para que puedas cambiar qué tan grande o pequeño quieres que aparezca. Si se desplaza hacia abajo, también podrá cambiar el título de su sitio, agregar un eslogan del sitio y un ícono o favicon del sitio.

Puede hacer mucho más en el área de personalización de Astra, como cambiar el ancho del contenido de su sitio, cambiar la estructura de la publicación del blog, personalizar su pie de página y encabezado, y más. Explore sus opciones aquí para ver qué le gusta más para su sitio web.

Una vez que haya terminado de personalizar, no olvide hacer clic Publicar para que sus cambios se publiquen en su sitio.

Paso 5. Personaliza tu sitio web con Elementor.

En este punto, tiene los conceptos básicos de personalización como cambiar el color del sitio, la tipografía, agregar un logotipo y todo eso. Ahora es el momento de llegar a los detalles esenciales y comenzar a usar Elementor (o cualquier creador de páginas que prefiera) para cambiar completamente la apariencia de su sitio.

Como mencioné antes, voy a usar Elementor en este tutorial porque simplemente creo que es lo mejor, pero puedes usar cualquier creador de páginas con el que te sientas cómodo.

Dentro de Elementor, puede hacer casi cualquier cosa con su sitio web sin codificar o contratar un desarrollador web. Agregar elementos es un simple proceso de arrastrar y soltar.

Hay dos formas de editar una página con Elementor. Primero, si estás en el backend de WordPress, haz clic en Páginas y debería ver una lista de todas las páginas de su sitio web, incluidas las que se crearon automáticamente con la plantilla del sitio Astra. Las páginas que se hicieron con un generador de páginas específico (por ejemplo, Elementor) se etiquetarán como tales:

paginas

Para editar una página con su generador de páginas, pase el mouse sobre ella y haga clic Editar con (generador de páginas). En mi caso, será Editar con Elementor.

editar con elementor

Una vez que hagas clic en eso, serás llevado dentro de Elementor.

Otra forma es si está en la interfaz de su sitio web, vaya a la página que desea editar y haga clic Editar con elementor en la barra negra en la parte superior:

editar con elementor

Cualquiera de estos te llevará dentro de Elementor. Una vez dentro de Elementor, podrá usar diferentes imágenes para su encabezado, cambiar textos, cambiar íconos y más. Puede comenzar cambiando los textos y la imagen en el encabezado para adaptarlos a su negocio. Aquí hay algunas cosas que puede hacer con textos dentro de Elementor:

edición de textos en elementor

Como puede ver, puede cambiar el texto directamente en el área de edición de contenido, cambiar el tamaño, el peso, el color y la familia de la tipografía. También puede agregar animaciones como desvanecimientos simples, zoom y más. Hay un montón de cosas que puedes hacer aquí para agregar sabor a tu sitio web.

También querrás cambiar las imágenes de tu sitio web para que coincidan con la naturaleza de tu negocio. Cambiar las imágenes en Elementor es muy fácil de hacer. Solo tiene que hacer clic en la imagen y las opciones aparecerán en la barra lateral izquierda. Puede cargar una nueva imagen, cambiar su tamaño, agregar un borde o sombra, agregar una animación y más.

edición de imágenes en elementor

Dentro de Elementor, también puede cambiar textos de botones, personalizar el área de testimonios, agregar más elementos / bloques como textos, imágenes, botones, videos y más.

Elementor Pro viene con muchas más funciones, como la capacidad de agregar formularios (que generalmente requiere un complemento de terceros), la capacidad de cargar sus propias fuentes, agregar controles deslizantes, agregar tablas de precios y listas de precios, personalizar sus encabezados y pies de página ( que está fuera del alcance de la mayoría de los creadores de páginas) y mucho más.

Si desea comprar Elementor Pro y al mismo tiempo obtener acceso gratuito a mis cursos de Elementor Pro, haga clic en este enlace aquí.

Paso 5. Configurar WooCommerce.

Ahora es el momento de configurar WooCommerce, que es el complemento de WordPress que convierte cualquier sitio web en una tienda en línea. Le permite agregar productos, aceptar pagos en línea, crear cupones, establecer envíos e impuestos, y mucho más.

WooCommerce ya estaba instalado para mí por el tema Custom Print Astra Site, así que ahora tengo que entrar y configurarlo. Si todavía no tienes instalado WooCommerce, solo ve a Complementos > Añadir nuevo y busca WooCommerce.

Lo primero que tenemos que hacer es ir a WooCommerce > Configuraciones. Verá 7 pestañas: General, Productos, Envío, Pagos, Cuentas y privacidad, Correos electrónicos y Avanzado.

Primero echemos un vistazo a la General lengüeta. En esta pestaña, podrá establecer la dirección de su tienda, en qué países venderá y enviará, y habilitará las tasas impositivas.

configuración general de woocommerce

Si se desplaza hacia abajo, también verá opciones para habilitar cupones y personalizar cómo se muestran los precios en su sitio web, incluida la moneda, dónde se mostrarán, etc..

El siguiente es el Productos pestaña donde puede establecer opciones relacionadas con el producto. Puede establecer qué página será su página de Tienda, qué sucede cuando los visitantes agregan un producto al carrito, establecen las dimensiones del producto, habilitan y configuran las reseñas de los clientes y habilitan las calificaciones por estrellas.

configuración del producto woocommerce

En la parte superior de esta sección, también tiene opciones para Inventario y Productos descargables. En la sección Inventario, si marca la casilla junto a Habilitar la gestión de stock, verá una lista de opciones que lo ayudarán a administrar su inventario. Por ejemplo, puede establecer el umbral de inventario bajo para que cuando su stock alcance ese número, se le envíe una notificación. También puede optar por ocultar los artículos en stock de su sitio web.

configuración de inventario woocommerce

En cuanto a Productos descargables sección, esto solo es relevante si está vendiendo contenido descargable en su sitio web, por lo que si está vendiendo productos puramente físicos, puede omitir este. Tendrá la opción de solicitar a los compradores que inicien sesión antes de poder descargar sus productos. También puede dar acceso a descargas después del pago.

opciones de productos descargables

La siguiente pestaña es Envío. Esto solo es relevante si vende productos físicos que se enviarán a los compradores. Dentro de esta pestaña hay tres subsecciones: Zonas de envío, opciones de envío y clases de envío.

En las zonas de envío, tendrá que agregar zonas de envío y asignar métodos de envío disponibles a estas zonas. Esto llevará un tiempo si realiza envíos a varios países.

zonas de embarque

Si necesita más ayuda con las zonas de envío, puede consultar la zona de envío de WooCommerce documentación.

El siguiente es el Opciones de envío sección. En esta sección, puede controlar cómo se muestran las tarifas de envío en su sitio web y establecer un destino de envío predeterminado o requerido.

opciones de envío

La última sección en Envío es Clases de envío. Con las clases de envío, puede asignar diferentes tarifas de envío a un grupo de productos, por ejemplo, productos más pesados ​​que necesitan más franqueo.

clases de envío

Para establecer sus tarifas de envío, vaya a Zonas de envío y crear o editar un método de envío existente como “Tarifa plana”.

agregar un costo de envío

Una vez que hagas clic Editar, Aparecerá una ventana emergente. Aquí, podrá agregar la tarifa de envío fija y el costo adicional para la clase de envío que acaba de crear.

costo de envío de una clase de envío

Si necesita más ayuda para configurar los ajustes de envío, puede consultar el WooCommerce documentación para envío.

Ahora pasemos a Pagos. En esta pestaña, podrá habilitar o deshabilitar las pasarelas de pago como PayPal, transferencia bancaria directa, contra reembolso y más. Una vez que habilite un método, haga clic en Preparar para vincular sus cuentas y comenzar a aceptar pagos.

Métodos de pago

Si desea poder aceptar pagos de Stripe, puede instalar un complemento llamado Pasarela de pago de banda de WooCommerce. Solo ve a Complementos > Añadir nuevo y busca el complemento. Instalar y activar este complemento habilitará el método de pago Stripe en WooCommerce, pero debe ingresar a WooCommerce > Configuraciones > Pagos para configurarlo.

En el Cuentas y privacidad pestaña, podrá configurar los ajustes relacionados con la creación de la cuenta y la privacidad del usuario. Puede elegir permitir que los invitados compren sin crear una cuenta, configurar su página de privacidad y páginas de políticas, y elegir cuánto tiempo se conservarán los datos del usuario.

cuentas y privacidad

El siguiente es el Correos electrónicos pestaña donde verá una lista de correos electrónicos que WooCommerce envía automáticamente en función de ciertas condiciones. Por ejemplo, se puede enviar un correo electrónico a la dirección de correo electrónico que elija cada vez que se realiza un nuevo pedido. También puede ver correos electrónicos con actualizaciones sobre los pedidos de los clientes, como los pedidos reembolsados ​​o completados.

Notificaciónes de Correo Electrónico

Finalmente, el Avanzado La pestaña, que reemplazó a la pestaña API, le permite configurar más detalles técnicos como configuraciones de página donde puede decirle a WooCommerce qué página actuará como su página de carrito o página de pago.

configuración de página woocommerce

Si se desplaza hacia abajo, podrá modificar lo que WooCommerce llama como puntos finales que son apéndices de la URL que les permite mostrar contenido diferente sin la necesidad de una nueva página.

Paso 6. Agregar productos.

Una vez que haya terminado con la configuración básica de WooCommerce, ahora es el momento de agregar productos. El tema del sitio Astra que utilizamos en este tutorial ya viene con productos de muestra, y así es como se ve una página de producto en la interfaz:

página del producto

Veamos ahora cómo podemos cambiar esto y agregar nuestros propios productos en el back-end..

Para agregar un nuevo producto o editar un producto existente, simplemente haga clic en la opción de menú Productos en la barra lateral izquierda en el panel de WordPress. Luego verá una lista de todos los productos que tiene. Alternativamente, si está en la interfaz de una página de producto, puede hacer clic en Editar producto en la barra negra en la parte superior de la página. Esto lo llevará directamente al editor de productos..

editor de producto

Aquí es donde puede cambiar el título del producto y la descripción del producto. Si te desplazas hacia abajo, verás una sección llamada Datos del producto. Aquí es donde pasarás la mayor parte de tu tiempo. Aquí, puede seleccionar el tipo de producto, y desde allí puede configurar otros ajustes del producto..

WooCommerce le permite agregar estos tipos de productos:

  • Físico, descargable, virtual.. Un producto virtual no necesariamente necesita ser descargado. Un ejemplo es una cita o una sesión de entrenamiento individual.
  • Producto simple. Este es un producto de un solo artículo.
  • Producto agrupado. Este es un paquete de diferentes productos..
  • Producto externo. Los productos que se compran fuera de su sitio web como un enlace de afiliado.
  • Producto variable. Un producto variable tiene variaciones como colores y tamaños..
tipos de productos

Cada vez que crea un nuevo producto, el primer paso es elegir su tipo. Cada tipo viene con un conjunto diferente de opciones. Por ejemplo, un producto descargable tendrá estas opciones:

opciones de productos descargables

En el lado izquierdo de esta sección, verá más opciones para inventario, envío, productos vinculados y más.

En Inventario, podrá agregar el SKU, proporcionar un número específico de existencias para este producto en particular, establecer el estado del stock y más.

En Envío, puede especificar el peso y las dimensiones del producto, así como asignar una clase de envío que creamos en el paso anterior.

envío en datos del producto

En Productos vinculados, puede asignar un artículo de venta adicional y venta cruzada a un producto. Una venta adicional es un producto que usted recomienda en lugar del producto actual porque tiene un precio más alto. Las ventas cruzadas son productos que recomendará en el carrito según el producto actual. Si desea agregar una venta adicional o una venta cruzada, escriba el nombre del producto en los cuadros correspondientes.

productos vinculados

También puede agregar atributos a sus productos en el Atributos sección. Puede ser tamaño, color, peso, etc. Además, si está creando un producto variable, primero debe agregar un atributo aquí. Si desea obtener más información sobre cómo crear un producto variable, consulte La guía de WooCommerce aquí.

Si te desplazas hacia abajo Datos del producto cuadro, verá un área donde puede agregar una breve descripción del producto. Esta descripción aparecerá junto a su producto y cerca del precio. Mantenlo corto y dulce. Puede agregar una imagen de producto en el lado derecho. Si tiene más imágenes de productos, puede agregarlas en el Galeria de productos sección.

breve descripción e imagen del producto

También es importante establecer la visibilidad del catálogo que se puede encontrar en la parte superior de la página debajo de Publicar. En algunos casos, es posible que desee ocultar ciertos productos porque tal vez lo esté ofreciendo como venta cruzada con un precio exclusivo con descuento. Aquí es donde puedes hacer eso.

visibilidad del catálogo

Una vez que haya terminado con todo aquí, haga clic en Actualizar para guardar todos tus cambios.

Si desea obtener más información sobre los diferentes tipos de productos y cómo puede crearlos adecuadamente, esto Guía de WooCommerce Es un gran lugar para comenzar. Siga agregando más productos a su sitio web con los mismos pasos que le mostré aquí hasta que cree sus listas de productos.

Paso 7. Personaliza tus pagos.

WooCommerce es un gran complemento como has visto hasta ahora, pero una queja común en su contra es la falta de opciones de pago. No podrá cambiar el aspecto de las páginas de pago y no podrá crear un embudo de ventas con él. Un embudo de ventas es una excelente manera de aumentar el valor de compra de un cliente, por lo que si no lo tiene en su sitio web, realmente está dejando dinero sobre la mesa.

Si desea crear un embudo de ventas para su sitio web de comercio electrónico, el mejor complemento que puede ayudar es CartFlows. Es un complemento de WordPress para crear embudos que le permite crear embudos hermosos y altamente efectivos dentro de WordPress.

cartflows

Si desea obtener más información sobre cómo crear un embudo de ventas con CartFlows, puede consultar este tutorial que hice.

Paso 8. Mantente al tanto del abandono del carrito.

Antes de finalizar este tutorial, permítanme agregar una cosa más sobre el abandono del carrito. Es un hecho en el comercio electrónico que muchos clientes van a abandonar sus carritos sin completar la compra..

Esto podría deberse a muchas razones. Podrían haberse distraído, se cortó el suministro eléctrico o la conexión, surgió algo urgente. Sea lo que sea, muchos de estos carros abandonados son ventas perdidas si no haces nada al respecto.

Afortunadamente, hay un complemento llamado Recuperación del abandono del carro de WooCommerce plugin que realiza un seguimiento y envía automáticamente correos electrónicos de seguimiento a los clientes con carritos abandonados, todo GRATIS!

Si utilizó el tema de Astra Site que utilicé aquí, este complemento ya se habría instalado para usted. Pero si no, puede instalarlo yendo a Complementos > Añadir nuevo y busca el complemento.

Creará una nueva opción en WooCommerce llamada Abandono del carro. Si hace clic en este, podrá ver una descripción general de cuántos carros abandonados tiene, cuántos se han recuperado y cuántos se han perdido..

órdenes recuperables abandono del carro

También podrá personalizar los correos electrónicos de seguimiento que envía WooCommerce al cambiar a Correos electrónicos de seguimiento pestaña, coloca el mouse sobre el correo electrónico que deseas editar y haz clic Editar.

correos electrónicos de seguimiento

Luego será llevado al editor de correo electrónico:

personalizar correos electrónicos de seguimiento

Terminando

Crear un sitio web de comercio electrónico de WordPress puede parecer complicado y abrumador, pero espero arrojar una luz sobre ello y mostrar cómo puede hacerlo todo usted solo con un poco de ayuda. Me complace escuchar sus historias de éxito, y si necesita ayuda, puede comunicarse conmigo en la sección de comentarios a continuación..

SiteGround

SiteGround es un proveedor de alojamiento web altamente recomendado en línea, ya que ha atendido a los usuarios de WordPress y aún así tiene un precio asequible. Son más conocidos por su rápido rendimiento y soporte igualmente rápido.

Características clave de SiteGround:

  • Certificado SSL gratuito
  • Soporte informado rápido
  • Entorno de estadificación de WordPress
  • Migraciones gratuitas de sitios web
  • Copias de seguridad diarias

SiteGround es una opción sólida para sus necesidades de alojamiento web. Atienden a sitios web de WordPress y ofrecen menos recursos que sus competidores, pero mayor confiabilidad.

Echa un vistazo a SiteGround

Astra Theme

Astra es un tema gratuito de WordPress que se centra en la velocidad. Opcionalmente, puede comprar la versión Pro por $ 59 que agrega algunas configuraciones y opciones adicionales.

Características clave del tema Astra:

  • No es el tema de Fastes, pero no es holgazán
  • Muchos sitios de demostración gratuitos
  • Función de mega menú flexible
  • Opciones de diseños personalizados
  • Soporte de WooCommerce
  • Soporte de LearnDash

Astra Theme es una elección justa para cualquier proyecto de diseño web de WordPress. Supongo que la pregunta más importante es si incluso necesita comprar un tema en estos días, ya que los creadores de páginas están haciendo las mismas cosas para las que necesitaría un tema. Por ejemplo, Elementor tiene el tema gratuito Hello que le permite a su creador de páginas hacer todo el trabajo..

Todavía hay algunas buenas razones para comprar un tema profesional, pero para la mayoría de las personas, lo más probable es que estén bien con un tema gratuito.

Sin embargo, para mí, creo que Astra Theme no se ha mantenido al día con las tendencias actuales y ya no lo recomiendo.

Hay mucho mejores temas modernos disponibles que ofrecen constructores de encabezado y pie de página incorporados en lugar de estar restringidos a 3 diseños, más diseños de página y publicación más flexibles..

Echa un vistazo a Astra Theme

Elementor

Elementor es un creador de páginas de WordPress que ha tomado el diseño web de WordPress por sorpresa. Tiene el conjunto de características más profundo, pero es muy fácil de usar y dominar. Elementor es el creador de páginas gratuito más completo. También hay un complemento Pro para agregar características de desarrollador adicionales.

Características clave de Elementor:

  • Live Front End Page Editor
  • Características de personalización del sitio web
  • Biblioteca de plantillas y bloques
  • Amplias opciones de respuesta móvil
  • El generador de ventanas emergentes más potente
  • PRO Crear encabezados / pies de página personalizados
  • PRO Crear diseños de tipo de publicación

Elementor es el creador de páginas más fuerte actualmente disponible. Lanzan constantemente nuevas características que están en línea con las tendencias de diseño actuales. Esto significa que podrá mantener su sitio web relevante.

Elementor Pro es un valor increíble teniendo en cuenta todos los módulos adicionales y características de potencia que incluye.

Si comenzara un nuevo proyecto de sitio web hoy, Elementor sería el creador de páginas que elegiría. Considero que es un creador de páginas de WordPress que es un placer usar.

Echa un vistazo a Elementor

CartFlows

CartFlows es un creador de embudos de ventas para WordPress. Le permite crear embudos de ventas de forma rápida y sencilla utilizando el creador de páginas que elija.

Características clave de los flujos de carro:

  • Plantillas diseñadas profesionalmente
  • 5 golpes de orden de ubicación
  • Upsells de un clic
  • Utilice su generador de páginas preferido
  • Extensible a diferencia de los embudos de clic
  • Temporizadores de cuenta regresiva y pruebas divididas

Si desea un creador de embudos de ventas para WordPress y está de acuerdo con hospedarse usted mismo o con el alojamiento administrado de WordPress, entonces CartFlows es una gran opción porque es muy fácil de usar pero muy potente.

Mira el carrito de compras

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map