Cómo crear un sitio web de comercio electrónico con WordPress y Elementor 2020

En este tutorial, te enseño cómo crear un sitio web de comercio electrónico con WordPress y Elementor 2020 que puedes personalizar por completo.

WordPress es la plataforma CMS más utilizada para crear todo tipo de sitios web, incluidos los sitios web de comercio electrónico. Además, aprenderá a usar el generador de páginas Elementor para crear páginas web increíbles, que en este momento es el generador de páginas número 1 y más popular para WordPress. WordPress controla más de 1/3 de Internet. La mayoría de las grandes empresas de comercio electrónico como Sony, Bata, eBay y muchas más lo utilizan para el desarrollo y mantenimiento de su sitio web. Y lo mejor de usar WordPress es que no necesita aprender ningún tipo de lenguaje de codificación ni ningún otro. jerga técnica para hacer su sitio web. Es una plataforma simple de arrastrar y soltar que brinda muchas plantillas y diseños incorporados que ayudan a crear un sitio web atractivo y fácil de usar. Además, proporcionaré plantillas prefabricadas que puede importar fácilmente y hacer que su sitio web de comercio electrónico esté en funcionamiento en cuestión de minutos.

Con solo seguir todo este tutorial, estará listo para crear y ejecutar su propio sitio web sin ayuda externa. Este tutorial ayudó a muchas personas a crear su sitio web y logró que sus negocios obtuvieran una ventaja sobre su competencia en esta brutal industria del comercio electrónico. Así que sigue este sencillo tutorial que se explica por sí mismo y adquiere una habilidad que te ayudará durante toda tu vida. Todo el proceso se ha enseñado paso a paso y se proporcionan todas las infografías y representaciones pictóricas para que sea lo más fácil de entender posible.

Entonces, comencemos a crear un sitio web de comercio electrónico con WordPress y Elementor 2020

Introducción a un sitio web de comercio electrónico

La imagen de arriba es un ejemplo de una página de inicio o página de destino de un sitio web de comercio electrónico típico. Las páginas de destino son muy importantes para las conversiones y las ventas en el sitio web de comercio electrónico. Por lo tanto, la página de destino debe ser atractiva y contener pancartas y notificaciones de ventas y precios reducidos o de recién llegados, especialmente para sitios web de comercio electrónico. Para obtener conversión, debe enfatizar sus productos más vendibles en la página de destino y proporcionar un enlace fácil a esos productos. Puede mostrar sus categorías de productos en la página de destino y proporcionarles un enlace.

En la parte superior, tenemos un encabezado que contiene nuestra ubicación, número de teléfono, nuestros números de contacto a la izquierda y a la derecha, tenemos los íconos de nuestras páginas de redes sociales de Facebook, Twitter, YouTube, etc. Debajo, tenemos una tienda botón que enlaza con la página de compra de productos de nuestro sitio web. Además, tenemos un botón Cuenta, al hacer clic en el cual los usuarios pueden ir a su propio panel personal para acceder y administrar su información y compras. También tenemos el logo de nuestra empresa en la propia cabecera. En el medio, tenemos nuestro enlace a nuestras páginas, a saber. Inicio, Sobre Nosotros, Tienda, Mi Cuenta y Contáctenos.

Después de eso tienes todos tus productos y banners, que aprenderás a crear en este tutorial, mostrados de una manera muy atractiva . Después de eso, también tenemos una sección de Boletín, donde los usuarios pueden suscribirse a su sitio web y no a notificaciones y correos electrónicos sobre productos, ofertas, cupones, etc. Debajo tenemos nuestro pie de página, que brinda información sobre nosotros y un botón de suscripción por correo electrónico.

Como puede ver en la imagen, la página de la tienda enumera todos los productos disponibles en nuestro sitio web, donde los usuarios pueden consultar cualquier producto haciendo clic en ellos. En la barra lateral, tenemos un filtro de precios, lista de categorías, reseñas y anuncios de video de nuestros productos. Debajo de cada producto, también hay un formulario de revisión y productos relacionados. A continuación, tenemos la página Acerca de nosotros que muestra la descripción de su negocio e información sobre su equipo. Y luego tenemos una página de contacto donde los usuarios pueden comunicarse con nosotros mediante un formulario de contacto. A continuación, tenemos un panel de Mi cuenta que tendrá un panel personal para cada cliente que contiene su información personal, de compra y de pago.

Puede ver la página del carrito después de comprar algo como puede ver en la imagen, donde puede cambiar los detalles de su compra, verificar el monto total y proceder a pagar. Luego, los visitantes pueden realizar el pago completando los detalles de envío y pagando la compra. Aprenderemos a crear todas estas páginas paso a paso en este tutorial para que su sitio web esté completamente listo para comenzar su negocio.

Obtener alojamiento e instalar WordPress y Elementor

• Compra de dominio de NameHero

Lo primero que debemos hacer para crear un sitio web es obtener un nombre de dominio y alojamiento para su sitio web. Debe seleccionar un buen alojamiento, ya que todo su sitio web se basará y admitirá en su sitio de alojamiento, por lo que debe verificar y comparar varios alojamientos en función de criterios como confiabilidad, soporte técnico, espacio, seguridad, diseño, oportunidades de SEO, etc.

Hay varios proveedores de alojamiento en el mercado y la mayoría de ellos tienen diferentes ofertas. He probado muchos de ellos y finalmente me he decidido por NameHero para todos mis sitios web. Lo uso personalmente y lo comparé con otros 22 alojamientos y encontré que son los mejores. Como puede ver en la imagen, tienen 4 opciones diferentes y recomiendo la opción Plus Cloud para un sitio web de comercio electrónico. Puedes usar mi enlace para obtener un descuento. www.nombrehero.com/darrelwilson

Después de solicitar su plan, podrá elegir su nombre de dominio, es decir, el nombre de su sitio web. Puedes elegir el nombre que quieras. Puede seleccionar su dominio según su necesidad, como .net, .biz, etc. El siguiente y último paso es completar su información sobre los detalles de la cuenta y el pago. Se recomienda encarecidamente obtener la Protección de ID en la casilla de verificación del complemento, ya que lo protege de los spammers. Complete la compra haciendo clic en las siguientes páginas y pasando al proceso de pago.

• Instalar WordPress

Para instalar WordPress en su alojamiento, vaya a su 'Área de cliente' en su página de alojamiento, haga clic en 'Alojamiento web en la nube'. A continuación tienes Mis Productos y Servicios, donde verás el paquete Plus Cloud con tu nombre de dominio, haz clic en el botón Activo al lado como puedes ver en la imagen. A continuación, a la izquierda, verá el botón 'Ir a cpanel' y haga clic en él. En la página siguiente, como puede ver en la imagen, desplácese hacia abajo hasta la categoría de software y haga clic en 'WordPress Manager by Softaculous'.

Esto abrirá un instalador de WordPress, haga clic en el botón Instalar ahora. Se abrirá una página de configuración que contiene la versión, el nombre de su dominio y el directorio, como puede ver en la imagen. POR FAVOR QUITE TODO LO ESCRITO BAJO EL DIRECTORIO. TAMBIÉN EN EL PROTOCOLOELIJA 'https:/'. En la configuración del sitio, puede cambiar el nombre y la descripción de su sitio. También podemos hacer esto más tarde. Ingrese sus detalles de administrador, como nombre de usuario, contraseña y correo electrónico, que serán sus datos de inicio de sesión de WordPress. En la página siguiente, desplácese hacia abajo por las plantillas ya que no las estamos usando y haga clic en 'Instalar'. Haga clic en el enlace URL de administrador que se encuentra en la página siguiente y su nuevo WordPress se creará y estará disponible en Internet. Ahora está en su tablero de WordPress como en la imagen donde puede editar su sitio web.

• Configuración general de WordPress

Antes de diseñar su sitio web, aprendamos a cambiar su configuración en el tablero de WordPress. En su tablero de WordPress, verá varias pestañas a la izquierda de la página, como puede ver en la imagen. Una de las más importantes es la pestaña 'Configuración' donde encontrarás la configuración general de WordPress. Debe cambiar su enlace permanente de 'Día y nombre' a 'Nombre de la publicación' para que la dirección de su sitio web sea más fácil de entender. Esto también es muy importante para su SEO. Otra pestaña en su tablero de WordPress es la de 'Usuarios', donde personaliza su perfil y la apariencia de su tablero de WordPress. Haga clic en 'Guardar cambios' para actualizarlo.

Para volver a iniciar sesión en WordPress después de cerrar la sesión, debe escribir su URL en la barra de direcciones seguida de '/wp-admin', que lo llevará a la página de inicio de sesión de WordPress donde puede ingresar su nombre de usuario y contraseña para iniciar sesión.

Creación de páginas y Menú

Ha creado un sitio web funcional ahora, todavía no está completo. Ahora necesita agregar páginas a su sitio web. En su tablero de WordPress, haga clic en la pestaña 'Páginas' y seleccione la opción 'Agregar nuevo'. También puede hacerlo haciendo clic en el botón 'Agregar nuevo' en la parte superior de la página. Cuando haga esto, el tablero abrirá un editor de páginas, como se muestra en la imagen a continuación, donde puede crear su nueva página. Aquí, puede poner el nombre de la página y diseñar el diseño de la página. Haga clic en el botón 'Publicar' y se creará su página web. Aquí, en este tutorial, crearemos páginas básicas como Inicio, Acerca de nosotros y Contacto, que son requeridas por cada sitio web. Por ahora, no vamos a entrar en el contenido de las páginas, lo que haremos más adelante. Puede ver estas páginas haciendo clic en ver debajo del nombre de la página en el panel de control de WordPress.

Después de haber creado páginas separadas, debe crear un menú para poder navegar por estas páginas. Crear un menú es muy fácil usando WordPress. Simplemente navegue a su tablero, busque la pestaña 'Apariencia' y haga clic en 'Menús'. Esto abrirá un editor de menús, donde puede crear y nombrar sus menús como puede ver en la imagen a continuación. Una vez que crea un menú, puede asignar diferentes páginas de su sitio web al menú. Siempre puede reasignar la cronología de los elementos del menú y puede crear un menú desplegable colocando un elemento debajo del otro arrastrando y soltando.

Ahora lo que debe hacer es hacer clic en 'Personalizar' en la parte superior izquierda como se muestra en la imagen e ir a 'Configuración de la página de inicio' y cambiar su página de inicio a 'Una página estática' y elegir su página de inicio como la página estática, que debe seleccionar de la lista desplegable. Haces esto para que cada vez que alguien visite tu sitio web, siempre sea dirigido a tu página de inicio. Acceder directamente a alguna otra página, como su página Acerca de nosotros, Contacto o sus últimas publicaciones, no tendrá sentido para los espectadores.

Descargar Elementor

Ahora necesitamos comprar nuestro creador de páginas Elementor pro, que usaremos para crear las páginas web de nuestro sitio web de comercio electrónico. Puedes comprarlo usando mi link.www.darrelwilson.com/elementor.Desde su página, puedes consultar varios paquetes disponibles. No podemos usar la versión gratuita ya que necesitamos el generador de temas y los servicios de construcción de Woocommerce. Una vez que compre su paquete, abra su cuenta como se muestra en la imagen desde donde debe hacer clic en 'Descargar complemento' y se descargará un archivo zip.

A continuación, debe cargarlo en su sitio web de WordPress. Vaya a su tablero en su WordPress, haga clic en 'Complementos' en la barra de herramientas a la izquierda, haga clic en 'Agregar nuevo' y su complemento adicional se abrirá como se muestra en la imagen. Haga clic en 'Cargar complemento' y seleccione su archivo zip de Elementor e instálelo. Haga clic en 'Activar complemento' y se creará un nuevo botón 'Elementor' en su barra de herramientas de WordPress. Vaya allí y haga clic en 'Conectar y activar'.

Instalar temas de WordPress

Ahora instalemos un tema de WordPress en nuestro sitio web. WordPress ofrece toneladas de temas prediseñados para elegir, para la apariencia de su sitio web. En la pestaña "Apariencia" del panel de control de WordPress, encontrará el botón "Tema" desde el que puede instalar un tema. Puede seleccionar cualquier tema de las opciones disponibles. A los efectos de este tutorial, vamos a utilizar el tema Astra que puede encontrar en el menú popular. Haga clic en 'Activar' debajo del nombre del tema. 'La mejor parte de usar este tema es que incluye toda la configuración básica y la funcionalidad que se requiere para que un sitio web funcione y es muy compatible con el generador de páginas de Elementor.

Editar páginas con Elementor

Ahora aprendamos cómo editar nuestras páginas con Elementor. Vaya a la página de inicio de su sitio web de WordPress y haga clic en 'Editar página' en la fila negra superior que abrirá el editor de páginas. Primero cambiemos la configuración de la página en el lado derecho como se muestra en la imagen. Cambie el diseño del contenido a 'Estiramiento de ancho completo' y seleccione 'Deshabilitar título' ya que queremos esa configuración para nuestra página de inicio.

Ahora haga clic en 'Editar con Elementor' para abrir el Editor de Elementor como se muestra en la imagen. Veamos un tutorial rápido del editor de Elementor aquí. Para agregar una nueva sección a la página, haga clic en el botón Más y seleccione el patrón de columna que desee. Para agregar los elementos, haga clic en los 9 puntos en la barra de herramientas en el lado izquierdo que le dará una lista de elementos como en la imagen. Puede arrastrar y soltar cualquiera de estos elementos que desee en la página y editarlos.

Una vez que haga clic en cualquier módulo de la página, su barra de herramientas de edición aparecerá a la izquierda. Aquí en la imagen, estamos editando el encabezado, por lo que ha aparecido 'Editar encabezado' que contiene 3 pestañas. El primero es ^Contenido , que ofrece varias opciones para el contenido del elemento. El ^segundo es Estilo, donde puede diseñar el estilo, como el color, el tamaño, la fuente, etc. del elemento. Y el ^tercero es Avanzado donde puedes poner animaciones y otras cosas. Del mismo modo, puede agregar, editar y diseñar un cuadro de texto de la misma manera debajo de su encabezado.

Puede agregar un botón y dar un enlace a cualquier otro sitio web que se abrirá al hacer clic en él. Puede cambiar la configuración a 'Abrir una nueva ventana', para que los usuarios no abandonen nuestro sitio. También puede seleccionar un ícono para su botón desde la Galería de íconos. Todo esto estará en la barra de herramientas 'Editar botón' a la izquierda como se muestra en la imagen.

Ahora, en lugar de diseñar cada elemento por separado, podemos usar las plantillas prefabricadas y bloquear haciendo clic en el ícono de la carpeta en Elementor. Desde la biblioteca, puede seleccionar una página completa o secciones o bloques específicos. Hay todas las categorías de bloques disponibles según su necesidad. Para la página de destino, seleccione cualquier bloque de la categoría Héroe. He seleccionado el Sonido del futuro en el ejemplo.

Construyendo la página de inicio

Ahora vamos a crear una página similar a la página de inicio que vimos en la sección de introducción, usando este bloque. Primero cambiemos el fondo a toda la sección. Para editar toda la sección, haga clic en los seis puntos en la parte superior de la sección como se muestra en la imagen. Ahora verá la barra de herramientas 'Editar sección' desde donde puede usar Estilo para cambiar el fondo. Aquí hay un ENLACE A LAS IMÁGENES DE DEMOSTRACIÓN GRATUITAS que puede usar en su sitio web de comercio electrónico. Cargue estas imágenes en Elementor a continuación y seleccione la imagen de fondo. Puede cambiar la superposición de fondo si parece oscuro.

Ahora puede editar los elementos del bloque como lo hicimos anteriormente. Cambie el texto, el color, la fuente, la topografía, etc. Puede usar el duplicado haciendo clic en el botón azul en la parte superior derecha de un elemento. Puede agregar un divisor entre los cuadros de texto y diseñarlo de la manera que desee usando 'Editar divisor'. Ahora edite el botón según nuestro diseño, como agregar o reducir el relleno para cambiar el espacio a su alrededor. Vincularemos este botón a nuestra página de Tienda más adelante, también puede agregarle un ícono. Puede cambiar el estilo y la animación cuando pasa el cursor sobre todo en la barra de herramientas 'Editar botón' como se muestra en la imagen.

A continuación, coloque el título animado de las secciones Pro Elements desplazándose hacia abajo en la barra de herramientas del elemento. Puede cambiar el estilo, la forma, el color, la topografía, etc. del título usando la barra de herramientas 'Editar título animado' como se muestra en la imagen. Puede verificar todos los elementos y estilos y diseñar las cosas de la manera que desee. Hay mucho ensayo y error para encontrar el diseño perfecto. Haga clic en el botón 'Actualizar' para aplicar estos cambios a su sitio web.

A continuación, en la página de destino, tenemos que crear secciones que se vinculen a varias categorías, como la sección de mujeres, la sección de hombres y las novedades. Agregue una nueva sección de 3 columnas, agregue encabezado, texto y botón en ellos. Puede crear uno y duplicarlo dos veces para ahorrar tiempo y esfuerzos. Una vez más, tendrá que editar el texto, los estilos, el fondo, etc. de esta sección, como hicimos en la sección anterior. Puede utilizar las imágenes proporcionadas por mí para el fondo de las 3 categorías. Mientras usa el editor de texto, para finalizar la línea y pasar a la línea siguiente, como aquí lo estamos haciendo con la Sección de Mujeres, use <br> como se muestra en la imagen.

Aquí no tenemos ninguna plantilla o bloques en esta sección, por lo que tendrá que crear y diseñar cada sección desde cero, lo que puede parecer una tarea larga por ^primera vez, pero puede usar todos los trucos de arrastrar y soltar y como la duplicación como como copiar el botón 'Comprar ahora' hecho en la sección anterior y simplemente cambiar el estilo del botón o pasar el mouse en lugar de hacerlo desde cero. Tendrás que ver todas las opciones en la barra de herramientas Editar para cada elemento para saber cuál se adapta mejor a tu gusto. Este será un gran ejercicio para su sentido artístico. Para cambiar el espaciado de los contenidos dentro de una columna, haga clic en el ícono Editar columna en la parte superior izquierda de la columna para abrir la barra de herramientas 'Editar columna' donde puede cambiar el relleno en el sección avanzada como se puede ver en la imagen de abajo.

Puede duplicar las columnas de las filas y luego editar el texto y el fondo para las otras dos categorías de la sección de Hombres y Novedades para que no tenga que cambiarles el estilo nuevamente. Debe diseñar la imagen de fondo y el color del texto de cada sección de manera diferente para que cada categoría se vea claramente. Si el primero tiene una imagen de fondo oscuro con un color de texto claro, el siguiente debe ser opuesto. Todas estas técnicas, las aprenderá cuando comience a diseñar y vea estos efectos usted mismo. Use el forlay de fondo para enfatizar el texto sobre la imagen, también ajuste la posición del texto usando arrastrar y soltar o la opción de Alineación para que no cubra las caras en la imagen de fondo. También puede cambiar la posición de la imagen de fondo usando 'Editar columna' como antes. Haga clic en el botón azul en la parte superior de la sección para abrir 'Editar sección' y puede estirar el ancho de la sección al 100%.

A continuación, debajo de eso, agregaremos íconos. Para eso, primero agregue una nueva sección e inserte un cuadro de imagen desde la barra de herramientas de Elementor. Elija la imagen del icono para las imágenes que he proporcionado como se muestra en la imagen. Estos cuadros de íconos son para alentar la compra para dar títulos atractivos como 'Envío gratis' y escribir la descripción y la condición en el texto a continuación. Diseñe el cuadro de imagen como desee cambiando la posición de la imagen, el tamaño, el color del título y la descripción y el texto, etc. desde la barra de herramientas 'Editar imagen'. Duplíquelo después del diseño para que no tenga que diseñar todos los íconos nuevamente. Después de eso, puede editar el texto de cada cuadro para el propósito que desee. Desde la sección avanzada, puede agregar márgenes usando Padding para que la página no se vea demasiado congestionada.

Puede agregar bordes a las columnas, para que sea más atractivo. Haga clic en el botón 'Editar columna' y, en la categoría 'Estilo', puede agregar un borde y diseñar los bordes. Puede seleccionar el tipo de borde, el ancho, la ubicación, el radio, etc. Puede seleccionar el borde solo en uno o más lados específicos, como aquí hemos hecho el borde derecho. Compruebe todas las herramientas de diseño disponibles en la barra de herramientas y seleccione usted mismo. Cuanto más lo haga usted mismo, más se acostumbrará a todas las herramientas y funciones y será más rápido y fácil para usted.

A continuación, agregaremos la sección 'Nueva llegada'. Pero antes agregaremos un divisor entre estas filas para que se vean claras y distinguibles. Nuevamente agregue una nueva sección, agregue 'Divisor' desde la barra de herramientas de Elementor y diséñelo usando la barra de herramientas 'Editar divisor' como se muestra en la imagen. Agregue un texto 'Nueva llegada' en el divisor que se usará como título para la siguiente sección, así que cambie el tamaño, la fuente, etc., como se muestra en la imagen para que se vea atractivo.

Creación de productos

Tenemos que crear productos para vender en nuestro sitio web de comercio electrónico ahora. Los productos pueden ser simples o variables, los productos simples no tienen opciones de selección, como el tamaño, el color o el estilo, mientras que los productos variables tienen varias opciones disponibles, como el tamaño o el color de la ropa. Vamos a aprender a crear ambos.

Woocommerce

Para crear productos, necesitaremos agregar un nuevo complemento. Así que vayamos a su panel de control de WordPress, haga clic en 'Complementos' en la barra de herramientas y luego haga clic en 'Agregar nuevo' como lo hicimos anteriormente. Desde la biblioteca de complementos, busque 'Woocommerce'. Woocommerce es el mejor complemento de comercio electrónico en mi experiencia personal. Haga clic en 'Instalar' y haga clic en Activar. Ahora se abrirá el complemento de Woocommerce como se muestra en la imagen. Rellene el formulario y haga clic en 'Continuar'. A continuación, seleccione su industria, en este tutorial estamos creando un sitio web de moda e indumentaria. A continuación, tenemos el tipo de productos donde se ofrecen 2 opciones: físicas y descargas, seleccione ambas y haga clic en 'continuar'. Luego obtendrá algunas preguntas, contéstelas y vuelva a hacer clic en 'Continuar'.

A continuación, deberá seleccionar un tema para su complemento, seleccione el tema 'Astra'. A continuación, le dará la opción de activar los servicios de Jetpack, lo que nos será útil, así que seleccione 'Sí, por favor', que lo llevará a la página de su cuenta de Jetpack, complete sus datos y cree una cuenta. Se le redirigirá a su panel de control de WordPress, pero un nuevo 'Woocommerce' estará disponible en su barra de herramientas, como se muestra en la imagen. Todas estas configuraciones de impuestos, las haremos más adelante.

Ahora comencemos a crear productos. Primero crearemos un producto simple de Camisa Verde Mujer como se muestra en la imagen.

Haga clic en 'Productos' en su barra de herramientas que abrirá la página 'Agregar nuevo producto' como se muestra en la imagen a continuación. Complete el nombre y la descripción del producto. A continuación, en Datos del producto, seleccione 'Producto simple' ya que primero crearemos un producto simple. Ponga el precio regular y el precio de venta, que puede programar a continuación, como se muestra en la siguiente imagen a continuación. En estas fechas, el precio de venta será aplicable automáticamente.

A continuación, haga clic en la configuración de 'Inventario' debajo de General, donde puede colocar la Disponibilidad de existencias. También puede permitir o rechazar pedidos pendientes aquí, si selecciona 'No permitir', no se tomarán pedidos si el producto está agotado. Ponga el 'Umbral de stock bajo' para recibir una notificación cuando el stock sea bajo.

A continuación, en la categoría 'Envío', ingrese los detalles de peso y dimensiones del producto para fines de envío. En los productos 'vinculados', puede 'ventas adicionales' que mostrarán productos relacionados y ventas cruzadas que mostrarán productos relacionados en el carrito después de que el usuario compre el producto original. Agregue los productos relacionados que desee mostrar a los compradores cuando estén comprando este producto en particular. En la categoría 'Avanzado', puede enviar una nota a los compradores y activar las reseñas.

Debajo de esta configuración, si se desplaza hacia abajo, tiene 'Descripción breve del producto' como en la imagen. Aquí escriba la descripción completa según nuestro producto de ejemplo. Aquí también puede diseñar la fuente y el estilo de la descripción. En el lado derecho, si ve la imagen, hay una opción 'Imagen del producto'. Haga clic en 'Establecer imagen del producto' que abrirá la página 'Imagen del producto' donde puede seleccionar y cargar la imagen de su producto. Debajo de la 'Imagen del producto', se encuentra la 'Galería de productos' donde puede colocar otras imágenes de su producto desde diferentes ángulos para una mejor comprensión de los espectadores, como se muestra en la imagen.

Arriba tiene 'Categorías de productos' en la barra de herramientas del lado derecho como se muestra en la imagen. Aquí puede categorizar sus productos. Así que vamos a crear una nueva categoría haciendo clic en 'Agregar nueva categoría'. Escriba el nombre 'Mujeres' y haga clic en Publicar. Ahora puede ver su producto haciendo clic en el botón 'Ver producto'. Mostrará cómo se mostrará el producto a los espectadores cuando hagan clic en él. Se abrirá una nueva ventana emergente del producto donde puede ver el producto e incluso ampliar las imágenes para obtener una mejor vista. Puedes editar lo que quieras de nuevo.

Si no le gusta el estilo y el tema de la página de visualización, puede cambiarlo con 'Configuración de Astra' en la barra de herramientas del lado derecho, como se muestra en la imagen . Por ejemplo, si desea eliminar la barra lateral, haga clic en 'Barra lateral' y seleccione 'Sin barra lateral'. Haga clic en 'Actualizar' para guardar los cambios y puede volver a hacer clic en Ver producto para ver los cambios. Así que este fue un ejemplo de cómo crear un producto simple. Puede agregar tantos productos y categorías como desee utilizando este mismo procedimiento. Si hace clic en el botón Categoría en la página Producto, se abrirá una Nueva página de la categoría donde se mostrarán todos los productos de esta categoría. En este punto, esto será muy suave, pero luego diseñaremos esta página también.

A continuación, aprendamos cómo crear un producto variable. Nuevamente tenemos que ir a la página 'Agregar nuevo producto' como antes. Esta vez vamos a crear un producto variable para hombres. Proporcione el título y la descripción del producto como lo hicimos anteriormente. Recuerde que esta no es la descripción principal sino la pequeña descripción adicional que se muestra a continuación, la descripción principal debe escribirse en 'Descripción breve del producto'. Aquí vamos a cambiar los 'Datos del producto' a 'Producto variable'. Todas las demás configuraciones, como Inventario, Envío, Productos vinculados, etc., son similares al Producto simple que creamos anteriormente, por lo que puede completar estos detalles por su cuenta.

Ahora haga clic en 'Atributos' donde agregaremos nuevos atributos o características a nuestro producto. Haga clic en 'Agregar' para hacerlo. A continuación, como se muestra en la imagen, crearemos nuevos atributos del producto, como tamaño, color, etc. Primero, coloquemos Tamaño en el cuadro 'Nombre'. En el cuadro 'Valores', escriba Pequeño primero, seguido del símbolo '|' (sin los corchetes). Presione la tecla 'Shift' + la tecla arriba del botón Enter para escribir este símbolo como se muestra en la imagen, luego escriba Mediano y nuevamente el mismo símbolo y luego Grande. Puede agregar tantas variables como desee, como S, M, L, XL, etc. usando ese símbolo. Seleccione la casilla de verificación 'Usado para todas las variaciones' y haga clic en 'Guardar atributo'.

A continuación, agregaremos otro atributo. Haga clic en el botón 'Agregar' nuevamente, escriba 'Color' en el cuadro Nombre y en el cuadro Valor, agregue los nombres de los colores que desea separados por el símbolo que usamos en el atributo Tamaño. Aquí estamos escribiendo, 'Blanco|Azul' como las dos opciones disponibles. Vuelva a marcar la casilla Usado para variaciones y haga clic en 'Guardar atributos'.

Ahora, aplicaremos estos atributos a nuestros productos. Haga clic en 'Variaciones' debajo de 'Atributos' y seleccione 'Crear variaciones a partir de todos los atributos' y haga clic en 'Ir'. Haga clic en 'Sí' en la ventana emergente para verificar esta opción. Lo cual abrirá las opciones como se muestra en la imagen. Puede ver que se han agregado 6 variaciones al combinar 3 tamaños con 2 colores, a saber, Small White, Small Blue, Medium White, Medium Blue, Large White y Large Blue.

Haga clic en el primero para abrir su configuración de edición como se muestra en la imagen. Primero, tenemos que subir la imagen de esta variación. Haga clic en 'Subir imagen' y seleccione la imagen de la galería. A continuación tienes que poner el precio normal de esta variación. Este es un campo obligatorio por lo que aunque los precios sean los mismos, tienes que escribirlos aquí. Nuevamente puede agregar el Precio de venta y programarlo como lo hicimos en el Producto simple. Puede completar los detalles de stock y los detalles de envío como lo hicimos en el Producto simple.

Nuevamente, tendrá que hacer el mismo proceso para otras variaciones también. Así que haga clic en el nombre de la variación, cargue la imagen y coloque el precio Small Blue y así sucesivamente. Aquí ponemos solo la imagen y el precio de todas las variaciones que se requieren, pero puede poner todos los demás detalles en su sitio web según sus propios términos. Encima del nombre de las variaciones, puede ver la opción para poner 'Valor de formulario predeterminado' donde puede seleccionar qué variación se mostrará como predeterminada en el cuadro de producto cuando los usuarios vean el producto.

Otras configuraciones, como la descripción breve del producto, serán similares al producto simple que hicimos anteriormente, así que complete los detalles según su producto. Lo mismo para la imagen del producto, donde debe colocar la imagen para la variación predeterminada, ya que se mostrará primero a los espectadores cuando vean el producto. Debe poner su variación más vendible como producto predeterminado. No es necesario que coloque una galería de productos para productos variables, ya que las vistas podrán ver diferentes imágenes de la variación. Cree una nueva categoría 'Hombres' y seleccione su casilla de verificación como lo hicimos para el Producto simple. Haga clic en Publicar para aplicar estos cambios en el sitio web.

Ahora puede hacer clic en Ver producto para ver cómo lo verán los espectadores. Como puede ver en la imagen, el producto se abrirá. Aquí, como se trata de un producto variable, tendrá una lista de atributos y sus valores en su cuadro desplegable. Puede hacer clic en estos cuadros para ver varias variaciones de este producto. Verá la imagen y los precios que estableció para la variación cuando haga clic en ellos. Nuevamente, también puede cambiar el tema de la página del Producto si no le gusta usando la Configuración de Astra. Cambiemos la configuración y eliminemos la barra lateral y cambiemos el diseño del contenido a ancho completo como lo hicimos con un solo producto para mantener la coherencia. Puede hacer tantos productos variables con tantas variaciones como desee, pero tendrá que completar los detalles de cada variación como lo hicimos aquí. Entonces, con más atributos y más valores de ellos, tendrás muchas más variaciones. Una cosa a tener en cuenta es que el Precio del producto se muestra como un rango porque muestra los precios de la variación de menor precio y la variación más costosa como un rango. Ahora hemos aprendido cómo crear productos simples y variables.

Ahora agreguemos estos productos a nuestra página de inicio. Vaya a su página de inicio y haga clic en 'Editar con Elementor'. Desplácese hacia abajo hasta el final donde creamos el divisor New Arrivals. En la barra de herramientas de Elementor a la derecha, haga clic en la barra 'Buscar widgets' y escriba producto. Seleccione el elemento Producto y arrástrelo y suéltelo en el cuadro de su página debajo del divisor Novedades y verá los productos allí.

En la barra de herramientas 'Editar productos' como puedes ver en la imagen, tienes el número de columnas y filas de producto que quieres mostrar aquí para que no se muestren todos tus productos en esta página. También puede usar la categoría de estilo para cambiar el espacio entre columnas y entre filas, las alineaciones y el borde de la imagen. Aquí también puede diseñar el título del nombre del producto, como su color, fuente, espaciado, topografía, etc. Lo mismo para las estrellas de calificación, tanto llenas como vacías. Del mismo modo, también para el precio, puede cambiar la fuente, el color, la topografía, etc. tanto para el precio normal como para el de venta. El siguiente es el botón, puede diseñar el botón de la forma que desee, como el color de fondo, el color del texto, el color del borde, etc. El uso de Elementor hace que toda esta edición sea tan fácil. Solo tienes que usar todas las herramientas de edición disponibles y jugar con él y todos los resultados estarán frente a tus ojos.

También tiene la opción 'Flash de ventas' que puede diseñar para que se muestre cuando tenga una venta, que mostrará un banner flash encima de su producto cuando haya una oferta en el producto. Use esto para atraer clientes a sus productos cuando visiten su página de inicio. Todas las opciones de diseño son similares a lo que hemos aprendido hasta ahora, por lo que puede crecer a través de todas ellas y seleccionar el diseño que más le convenga.

En la opción Consulta, puede seleccionar los productos que desea que se muestren en esta sección. Por ejemplo, si desea que solo se muestre el Producto de mujer en esta sección, en el cuadro Fuente, seleccione 'Últimos productos', ya que es una sección de recién llegados en el cuadro desplegable y haga clic en 'Incluir'. Luego, en el cuadro 'incluir por', escriba el término y seleccione la opción Término que aparecerá en el cuadro del término. En el cuadro de términos, escriba 'Mujeres' y seleccione 'Categoría de producto: Mujeres' como se muestra en la imagen. Haga clic en Actualizar para dar efecto en su sitio web. De esta manera, puedes crear secciones de exhibición de productos en cualquier parte de tu sitio web.

Plantilla de comercio electrónico Elementor

Le he dado la plantilla del sitio web de comercio electrónico que preparamos hace un momento, el diseño preparado por nosotros aquí de forma gratuita en mi sitio web en este enlace https://darrelwilson.com/product/elementor-ecommerce-template-package. Download the template zip file from there and now let us learn how to import and export templates in Elementor. First, extract all the .json flies from the zip file. These are the templates for specific pages. Go back to your Elementor editor page and click on the folder icon next to the Add section icon on the page. This will open up the Template library and go to 'My templates' as shown in the image and click on Add templates. Here you can drag and drop those template files. Select the Homepage template and click on insert and your template will be loaded. You can edit the template according your taste but using the template, you won't have to create everything from scratch. Just remove the unwanted elements or sections and add new ones you like such as countdown, form etc. and style them the way you want.

Now let us create the other pages using our template. First, create a Menu for the rest of the pages. Woocommerce automatically adds the Shop, My Account, Cart and Checkout pages. Go the Appearance in WordPress and add these to the menu. Go to the About Us page, click on 'Edit Page, first disable the title and select Full Width in content layout. Now similar to Homepage template, insert the About Us template and edit the page as you want. You can add other pages too. Complete the website design using this process.

Theme Customizer

Theme customizer is where we design the structure and theme of the website and not the actual webpages. For opening the theme customizer, click on the 'Customize' button next you website button and it will open the Theme Customizer dashboard. We have used the Astra theme in this tutorial. Let us create a logo for your website, go to Header, then Site Identity and select Logo and upload your Logo. You can get a logo from www.fiverr.com. In the same way you can edit your site icon. You can design your Primary Header here too as shown in the image. You can select the layout, width, colour, etc. of the Header. Also you can design and style your menu from here.

Same way, you can design the footer. You can add upto 4 footer widgets here and customize as you want as shown in the image. Select 'Widgets' on your WordPress toolbar and you will get 4 Widgets to add to your footer. When you click on it and then click on 'Add a widget', you will get a list of widgets. You will get a widget toolbar where you can edit the contents of widget such as title, description, image and also your social media links. Once you click publish, it will appear on the footer of your webpage.

From the Woocommerce option on the toolbar, we can customize the Checkout page as in the image. You can assign 'Terms and conditions' page and 'Privacy Policy' page from the toolbar for the customers but first you'll have to first create these pages and write the details as the legal requirements. Next select the page from the drop down below their respective box. You can add new fields in the Checkout form and make them 'Required' or Optional.

Next in the Woocommerce toolbar, you can customize your Product catalog as shown in the image.You can customize, how products are shown in the catalog, their design an also you can hide some of the components that you don't want show like for example Ratings by clicking on the eye icon next to its name. This will control how your products are shown on your Shop page and also on the products section anywhere on the website.

Here we are using the free version of Astra Theme customizer, but you can buy the pro version where you will get tons of different option and templates for your website. You can import entire customized websites from this service.

Complementos

Plugins are small apps for your website which helps creating and upgrading your website. You have to add plugins to your WordPress to help you create your website in way more efficient manner.To add a new plugin to your WordPress, go to your WordPress homepage and then click on plug-in from the Option list on the left side. It will open an 'Add plugin' page as shown in the image where different type of plugins are available to choose from. You can search for the type of plug-in that you need in the search box and you will find so many plugins to use for that specific purpose. It is like an app store on your mobile and just like your app store, you can check the usage, reviews and success of these plugins before installing. And all these plug-ins are available for free. And if you need any plugin later, you can always come back and install it here. You can add plugins for social media sites, translator and so many things. Just search for the plugin use you want, select the one you want, click on 'Install' and 'Activate'. For every plugin, a new option will be created on the toolbar from where you can add and edit elements.

Elementor Theme Builder

The Elementor theme builder allows you to create a custom Shop Page and Product Page using the page builder instead of the themes, so that these pages match the design of other pages of your website. Using Elementor page builder, you can edit any part of any page of your website unlike the themes which are preset and normally can't be edited. So now we are going to edit the Shop Page and Product Page that we created using the Woocommerce theme using Elementor theme builder and design it to match our demo website's design we saw in the beginning.

Go to your WordPress dashboard, click on 'Templates' and then select 'Theme Builder' from the list which will open the Theme Builder as shown in the image. Elementor allows us to build the theme of different parts of the site. So if want to have a different header, click on '+' icon on header. And you can select any header theme from the library and click 'Insert'. Your Header will be created and now you can edit anything in using the Edit Toolbar as we did earlier. You can the change the style of the Logo or the Menu or anything, just click on the part you want to edit and the edit toolbar will appear.

• Custom Header

Now you can add other elements on this header one by one as we did earlier, or you can insert another one or more blocks which contains similar elements and delete the common ones. For example, here as you can see in the image, we inserted a Header Block which has a bar for contact no, info and social icons. We can delete the rest of the elements of the block as we don't need them. Again you may not find the exact design of each element in the block templates, so you can now edit and style as you want to instead of creating and editing each element from scratch. This way you can create different part of your website very quickly.

Remember we have just created a part of website but it's not applied on our website yet. So when you click 'Publish', it will ask you where you want to display this template on your website. Here we created a header, so we will display it on entire website by click 'Entire Site' on 'Include' box as shown in the image. You can put different conditions by adding Include or Exclude conditions as to where you show this template.

• Custom Footer

Now you can do the same thing for footer as we did for the header and create a footer for your website using templates. You can edit the footer content to your pages by pasting the URL link of the page to its button using the editor as shown in the image. Here we have selected a footer block template with for columns and added link to various parts of our Shop, About, Contact Us and social media pages. You may design it anyway you want.

• Custom Shop Page

Now let us design a custom Shop Page using the Theme Builder. Elementor has very less themes for shop page so we will design from scratch. So we will have to create each element like for the banner we will have 2 text boxes and animated heading over a background image. Edit the elements and style the section as we learned earlier. Use all the styling features such as font, colours, size, shadows, margins, paddings, etc. to make the banner section look eye catchy like here in the example as shown in the image below.

Now we need to design our product section with a filter column in the side. So add a new section, and use the 2 column structure. On the right, add 'Products' from the toolbar and design it as we did on the Homepage or you can save the Homepage Template and insert it here. On the left, insert 'Sidebar' from the Elementor elements bar and select 'Woocommerce sidebar'. Right now, we haven't created a sidebar so we will have to exit to WordPress dashboard. But first click 'Publish' and in the condition include 'Shop page' to apply it to the website.

Go to 'Appearance' on the dashboard where we have all our widgets are shown as shown in the image. On the right, we have our Woocommerce Sidebar where we can place the 'Filter Products by Price' by drag and drop. You can add other filters too. Below it we will add 'Product Category', then 'Products' and the 'Video' on our sidebar. You can edit the title, contents and other stuff like link the URL of the video here. You can add as many widgets that you want from here.

If you want to edit the style of this sidebar, you can't use the Elementor editor as these are prepared by WordPress theme customizer. So in order to customize it, you will need click on 'Customize' button WordPress. Click on 'Global', then 'colours' where you can change the colours as in the image. Here we are customizing the WordPress theme which is the Astra theme that we are using, and not just the sidebar.

• Custom Category Page

Now we will design the category pages for our product. We are going to copy the template of page we created earlier and save to use it for all our Product Category pages. First, click on 'Edit with Elementor' on the top and select 'Product Archive' as shown in Image. Then, on the bottom left click on the button next to Update and select 'Save as a Template' as shown in the next Image. Give a name to the template like 'Main Shop Page Template' and click Save. Next select the given name and click on 'Export' and then 'Save File' to save this file to use this template on other pages or even other websites.

Now, go back to the Elementor theme builder and click on Add New. Here you have the Elementor templates but we will use the template we created, so click on 'My Templates' and click on 'Insert' next to the name of new template you created. Now we have to edit it using the tools which we have learned already. So change the Title text to 'Men's Product'. Next as this is Men's Category, you have to edit it to show only Men's Product. So click on the Product box and on the 'Query' button on the toolbar, write 'term' in the 'Include By' button and put 'Men' in the term box as we did earlier. Click on Publish and put the condition to put it only in 'Men's' in 'Products category' as you can see in the image below. You can go the website and on the Shop page, click on the Men's category on the sidebar and view the effect on the page. You will have to do the exact same process for Women's category page and any other category you want to put on your website too.

• Página de producto personalizada

Ahora personalizaremos nuestra página de Producto usando la misma técnica. Si hace clic en cualquier producto ahora, se mostrará la página del producto en el tema predeterminado como vimos cuando creamos los productos. Nuevamente, vaya al generador Elementortheme y agregue un nuevo tema de Producto único haciendo clic en el ícono + al lado. Puede usar las plantillas proporcionadas aquí, pero crearemos una desde cero para este tutorial. Así que primero agregue una sección de 2 partes y haga clic en la pestaña de elementos. Aquí puede ver todos los elementos que están hechos específicamente para Productos como se muestra en la imagen que no vemos cuando creamos una página.

Primero agregue una ruta de navegación que es como la categorización del producto. Ahora puede editar el estilo de la ruta de navegación como el color, el tamaño, el relleno, etc. usando la barra de herramientas como puede ver en la imagen. A la derecha, agregue el elemento 'Título del producto' de la barra lateral y diseñe el estilo de eso también usando la barra de herramientas como antes. A continuación, agreguemos la imagen del producto de la misma manera. Haga clic en el elemento de la imagen del Producto y edite el estilo usando la barra de herramientas. A continuación, agregue la Descripción breve de manera similar. Puede agregar un separador entre el título y la descripción. A continuación tenemos que poner la categoría del producto. Para eso, seleccione el elemento 'Product Meta' y suéltelo debajo de la descripción y diseñelo también. A continuación, agregue el elemento 'Precio' debajo de él y también puede cambiar el estilo nuevamente. A continuación, coloque el botón 'Agregar al carrito' debajo del precio. Como es un producto variable, automáticamente dará las opciones de variación. A continuación, puede agregar iconos sociales y formularios de revisión, información adicional, etc. elementos que desee. Haga clic en 'Publicar' una vez que haya terminado de agregar y diseñar los elementos que desea en la página de su producto. En la condición de la página de visualización, incluya 'Todos los productos' para aplicar esta plantilla a todos los productos que creó. Puede crear diferentes temas para diferentes categorías de productos si lo desea, solo tendrá que cambiar la condición para incluirlo solo en esa categoría específica. Todas nuestras páginas de productos se actualizarán con esta plantilla, ya que la aplicamos a todos los productos.

• Página personalizada de pago y carrito

Ahora diseñaremos las páginas personalizadas de Checkout y Cart. Las páginas de pago y carrito no están con el generador de temas, por lo que las editaremos con Elementor. Vaya a la página del carrito y haga clic en Editar con Elementor. Al igual que cualquier otra página, puede editarla y diseñarla como desee con los elementos de Elementor. Puede editar el texto, los íconos, los botones de cupones, etc. y diseñar la fuente, el color, la topografía, etc. por su cuenta ahora. Pero editar la parte del tema real, como el título Carrito aquí, no es posible con Elementor. Para editar eso, tendrá que editarlo en WordPress mismo, así que haga clic en 'Editar página' y en la esquina inferior derecha, seleccione la casilla de verificación 'Deshabilitar título' en la sección de deshabilitar como se muestra en la imagen como lo hicimos anteriormente al diseñar el tema de wordpress.

Puede editar y diseñar la página de pago y usarla de la misma manera. De la misma manera, puede diseñar la página 'Mi cuenta' de sus clientes ya que el tema predeterminado de esa página no es muy atractivo. Puedes editarlo con Elementor. Y también he dado un enlace anterior en el que también he puesto el archivo zip de las plantillas de todas estas páginas para que diseñes luego rápidamente.

Configuración de WooCommerce

Ya ha aprendido a crear páginas usando Elementor y Theme Builder y la construcción de su sitio web está completa. Ahora tenemos que aprender sobre la configuración de Woocommerce para que este sitio web funcione. Vaya al panel de control de WordPress, haga clic en Woocommerce y seleccione 'Configuración', que abrirá la pestaña de configuración general de Woocommerce como se muestra en la imagen.

• Configuración general

Aquí puede poner su dirección y seleccionar los países a los que desea vender, habilitar impuestos, habilitar códigos de cupón. Marque todas estas casillas para habilitarlas. A continuación puede cambiar su moneda según su país.

• Pestaña de producto

La siguiente pestaña es la pestaña Producto en la fila superior de Configuración, donde encontrará muchas configuraciones, la mayoría de las cuales son muy específicas aquí y no las vamos a usar, excepto la sección de revisión, donde puede habilitar las revisiones y las calificaciones de estrellas en los productos. también puede mostrar la etiqueta de usuario verificado a compradores reales en las revisiones como se muestra en la imagen. También puede poner los detalles de envío de los productos, como peso, dimensión, etc.

• Pestaña de impuestos

A continuación, en la pestaña de impuestos, donde puede habilitar o deshabilitar el cálculo automático de impuestos. El cálculo de impuestos puede ser muy complicado dependiendo de su país y negocio, por lo que es posible que el cálculo automático no funcione para usted. Sin embargo, tiene las opciones para establecer impuestos para diferentes direcciones de envío y según el artículo del carrito. He proporcionado un enlace a www.taxjar.com donde puede obtener servicios gratuitos y pagos para ayudarlo con el cálculo de impuestos. También puede seleccionar mostrar precios con o sin impuestos en varios puntos, como en la tienda, debe mostrar el precio sin impuestos y en el carrito y pagar, debe incluir impuestos en general.

• Pestaña de envío

La siguiente pestaña es 'Envío'. Primero haga clic en 'Agregar una zona de envío', agregue el nombre de la Zona, regiones específicas de la zona y configure sus tarifas de envío bajo varios métodos de envío como se muestra en la imagen. Aquí, hemos utilizado un método de tarifa plana en el que ponemos una tarifa plana de $ 5 y el otro es el método de envío gratuito. Haga clic en el botón Editar a continuación para agregar una condición de cantidad mínima de pedido o requisito de cupón. Aquí tenemos un requisito de pedido mínimo de $50 seleccionado. Puede agregar múltiples zonas y múltiples métodos de envío y tarifas para cada uno de ellos. También tiene un valor predeterminado para las ubicaciones que no están cubiertas por ninguna de sus zonas a las que no hemos dado ninguna tarifa específica. Así que aquí hemos puesto una tarifa predeterminada de $10 para esas zonas por defecto.

• Pestaña Cuentas y Privacidad

Pestaña 'Cuentas y privacidad' donde puede seleccionar la opción para crear una cuenta de los clientes antes de comprar o permitirles comprar sin cuenta primero y luego crear una cuenta en el momento del pago y también varias otras opciones en la creación de cuenta como nombre de usuario, contraseñas, etc. que puede verificar por sí mismo, ya que se explican por sí mismos. También puede agregar una política de privacidad según lo requiera la ley aquí. También tiene opciones sobre el tiempo en que se eliminarán los datos personales de los usuarios en Retención de datos personales.

• Pestaña de correo electrónico

También tenemos la pestaña 'Correo electrónico' donde se configuran todos los correos electrónicos automáticos que recibirá y enviará a los clientes desde el sitio web, por ejemplo, en un nuevo pedido o en un pedido cancelado. Puede editar el formato del correo electrónico que recibirá o enviará al cliente en todas esas situaciones aquí. Puede agregar un complemento para este propósito para recibir correos electrónicos de mejor calidad. Vaya a Complementos e instale 'Diseñadores de correo electrónico de Kadence Woocommerce' y. Con este complemento, puede diseñar el contenido del correo electrónico, el encabezado, el pie de página, el texto, etc. utilizando sus estilos personalizados que se pueden editar aquí yendo al complemento en la barra lateral de Woocommerce como se muestra en la imagen.

• Pagos

Ahora iremos a la pestaña 'Pagos' donde podemos seleccionar los métodos de pago permitidos a nuestros clientes. Hay muchas opciones disponibles para seleccionar, pero habilitaremos 'Stripes' y 'PayPal' aquí haciendo clic en el botón de habilitar como se muestra en la imagen a continuación.

1. Paypal

Ahora primero configuremos la configuración de pago para PayPal, así que haga clic en 'Configurar' para abrir la página de configuración de PayPal donde puede colocar el título, la descripción del cuadro de pago y su cuenta de correo electrónico de PayPal y haga clic en 'Guardar cambios ' para integrar su sitio web con PayPal. Si no tiene un PayPal, puede crear uno ingresando a su sitio web y registrándose de forma gratuita. Solo tendrá que registrarse con una dirección de correo electrónico que colocará en el cuadro de correo electrónico de PayPal como se muestra en la imagen. Es uno de los métodos de pago más populares disponibles.

2. Raya

A continuación vamos a configurar los pagos con franjas. Así que haga clic en el botón 'Administrar' al lado. De la misma manera que en la configuración de PayPal, coloque primero el título, la descripción del cuadro de pago. A continuación, tiene la clave publicable de prueba y la clave secreta de prueba. Puede ir a www.stripe.com y crear una cuenta gratuita allí, solo necesita tener una cuenta bancaria para crear una cuenta. Puede integrar su cuenta de stripe a su sitio web después de crearlo, que es un servicio gratuito. Para eso, después de iniciar sesión en su cuenta de stripe, haga clic en 'Desarrolladores' y seleccione 'Claves API' como se muestra en la imagen. Copie la clave publicable que aparece aquí en su sitio web en el cuadro de clave publicable y la clave secreta en el cuadro de clave secreta. Haga clic en 'Guardar cambios' y ahora su sitio web está listo para aceptar pagos con tarjeta de crédito desde cualquier parte del mundo con una tarifa de transacción muy baja. Aquí lo estamos haciendo, por lo que todavía tenemos habilitado el botón Ver datos de prueba en nuestra cuenta de Stripe y en la página de configuración de Woocommerce hemos marcado la casilla 'Habilitar modo de prueba', pero cuando esté listo para comenzar con su sistema de pago, desactívelo. .

Ahora puede probar su sitio web haciendo un pedido y comprando algo, y también puede realizar un pago para verificar que todo esté en orden. En la página Mi cuenta, los clientes tendrán su propio tablero personal donde pueden verificar, editar o cancelar su pedidos, editar su dirección de envío y facturación, configurar sus métodos de pago y los detalles de su cuenta. La vista de todos sus pedidos anteriores también se mostrará en su lista de pedidos con su estado.

Optimización para móviles

La optimización móvil significa hacer que el sitio web se vea fácil de usar para dispositivos móviles. La optimización móvil es muy importante en el escenario actual porque a) muchas personas usan dispositivos móviles para navegar por Internet y b) según el nuevo algoritmo de Google, si su sitio web no está optimizado para dispositivos móviles, disminuirá su clasificación, lo que puede ser catastrófico para su Tráfico web y SEO.

La optimización móvil es bastante simple usando el editor de Elementor. Volvamos de nuevo al tablero de Elementor. En la parte inferior de la barra de herramientas, encontrará el botón 'Modo de respuesta', al hacer clic en él se abrirá una lista desplegable que muestra 3 opciones, a saber. Escritorio, Tablet y Móvil. Hasta ahora, estábamos diseñando nuestro sitio web basándonos en cómo se vería para los visores de escritorio. Ahora haga clic en 'Tableta' para obtener una vista previa de cómo se vería en el navegador de una tableta. Del mismo modo, también puede verificarlo para el modo 'Móvil'. Puede editar la página web si algo parece fuera de lugar o si no se siente atractivo visualmente.

Aquí como puedes ver en la imagen, el primer título es demasiado grande para el modo tablet y el '50% OFF' es demasiado pequeño por lo que tendrás que ajustarlo. Echa un vistazo a todos los elementos de las páginas para ver si es necesario rediseñar algo. Todos estos cambios se aplicarán al modo Tablet cuando haga clic en Actualizar. Lo mismo se aplicará al modo móvil. Ajusta el tamaño de los textos de encabezado, la alineación de los botones, banners y encabezados.

Puedes deshabilitar algunas de las secciones que necesites en la versión móvil o tablet, si crees que no es importante para ellos. Para eso, seleccione la sección que desea ocultar, vaya a la categoría avanzada en la barra de herramientas 'Editar sección', haga clic en 'Sensible' y en Visibilidad, puede elegir ocultar la sección en la versión de escritorio, tableta o móvil como se muestra en la imagen. Lo mismo puedes hacer con otras secciones o elementos. Puede diseñar todo diferente para el modo tableta o móvil, como imágenes de fondo, tamaño de fuente o cualquier cosa.

Formulario de contacto

Ahora avancemos y aprendamos cómo crear una página de 'Contacto' donde los visitantes pueden completar la información de contacto y irá directamente a su correo electrónico. El diseño básico de la página lo puede hacer usted mismo usando el editor de Elementor o el personalizador de temas. Lo único importante es el formulario de contacto como se muestra en la imagen. Así que busca el formulario en la barra de herramientas de Elementor y lo arrastra y suelta en la sección y puede editar el texto y el diseño del formulario usando la barra de herramientas 'Editar formulario' que ahora creo que podría hacer por su cuenta. Hay muchas configuraciones avanzadas en la barra de herramientas Editar formulario que no se describen aquí, sino el formulario básico que puede crear.

Cupones

Para agregar cupones a su sitio, haga clic en '+ Nuevo' en la barra superior junto al botón de personalizar y seleccione Cupones. Los cupones en la barra de herramientas lateral de WordPress se encuentran en la sección "Marketing", como se muestra en la imagen. Aquí, puede agregar un nuevo código de cupón, seleccionar el tipo de descuento como porcentaje de descuento, descuento de carrito fijo o descuento de producto fijo, poner el monto o porcentaje del descuento y la fecha de vencimiento del cupón. En 'Restricciones de uso', puede poner condiciones como gasto mínimo, uso individual o junto con otros cupones, incluir o excluir productos o categorías de productos del cupón. En el Límite de uso, puede seleccionar la cantidad de veces que se puede usar este cupón o limitarlo para un producto específico y limitar el uso por un solo cliente. Haga clic en Publicar para aplicar este cupón en el sitio web y pruébelo en la página del carrito aplicando el código de cupón al realizar una compra.

Realmente espero que este tutorial haya sido beneficioso para los lectores y ahora puede crear un sitio web desde cero por su cuenta. Si necesitas ayuda, puedes visitar mi sitio web y mi página de Facebook y dejar un comentario. Tengo toneladas de otros recursos sobre la creación de sitios web y el uso de Elementor que puede consultar. Gracias por leer este tutorial y sus comentarios y consultas son siempre bienvenidos.