Cómo configurar un carrito de compras de WordPress con WooCommerce
Publicado: 2022-10-28Entonces, casi ha terminado de crear su nuevo sitio web de compras WooCommerce. Ha terminado de construir el diseño del producto del mercado principal, el menú de selección de categorías de productos y el pie de página del encabezado con indicaciones de navegación funcionales.
El aspecto más importante de cualquier sitio web de comercio electrónico es la capacidad de redirigir y ayudar a los clientes a agregar productos a sus carritos desde cualquier parte del sitio web, hasta el proceso de pago hasta la confirmación del pedido.
Esto puede parecer una función difícil de integrar en los sitios web de comercio electrónico de WordPress, pero en realidad no lo es. WordPress tiene una gran comunidad que respalda su desarrollo, y puede agregar esta función a su sitio web utilizando un complemento de carrito de compras de WooCommerce que funciona a la perfección con cualquier tema de WooCommerce de WordPress .
Tabla de contenido
¿Cómo funciona el carrito de WooCommerce?
Cuando los productos se agregan al carrito en WooCommerce, se agregan a una lista separada con la variante y la cantidad elegida por el cliente. Esto ayuda a los usuarios a realizar un seguimiento de sus productos seleccionados, y esta función también les permite ver automáticamente el precio total calculado del pedido al que procederán al finalizar la compra. Y también brinda a los usuarios la posibilidad de editar la página del carrito de compras de WooCommerce.
Los beneficios de un carrito de compras en WooCommerce
Hay algunos grandes beneficios al usar un carrito de compras en una plataforma de compras de WooCommerce. Antes de comenzar con una guía paso a paso sobre cómo crear una página de carrito de compras de WooCommerce, algunas de ellas son:
- Diseñado para ayudar a los clientes a seleccionar uno o más productos para comprar y continuar buscando otros productos.
- Ayuda a calcular el valor total de los productos a medida que continúa agregándolos al carrito.
- Muestra la cantidad y las variaciones de un producto que ha seleccionado y calcula el valor total en consecuencia.
- Puede redirigir a los clientes a la página de pago con un clic de un botón.
- Puede venir con funciones adicionales del carrito de compras de WooCommerce, como el historial de pedidos, guardar un carrito para más tarde, etc.
- Los usuarios pueden obtener un complemento de carrito de WooCommerce que viene con elementos de diseño impresionantes.
Cómo agregar un carrito de compras a WooCommerce
Ahora, veamos el proceso de agregar un carrito de compras a WooCommerce. Al final de este artículo, podrá comenzar a vender una amplia variedad de productos con una plataforma de comercio electrónico funcional que presenta el mejor complemento de carrito de compras para WordPress.
Paso 1: Instalación de requisitos previos
Para comenzar con la creación del carrito y el proceso de configuración del carrito de WooCommerce, deberá tener ciertos complementos instalados y activados en su cuenta de WordPress. Para esto, deberá tener las últimas versiones de WordPress , WooCommerce , el generador de páginas Elementor y el complemento ShopReady WooCommerce Shop Builder.
Para instalar los complementos, inicie sesión en su cuenta de WordPress, diríjase al Panel de WordPress > Complementos > Agregar nuevo y busque los complementos uno por uno, luego haga clic en Y ahora haga clic en Activar cuando finalice el proceso de instalación. Siga el mismo procedimiento para instalar todos los complementos y programas necesarios.
Paso 2: usar un tema de carrito de compras de WooCommerce
Ahora, para avanzar en nuestro proceso de creación de funciones de carrito, deberá tener instalado un tema de WooCommerce que funcione para alguna funcionalidad adicional. En este caso, podemos usar una plantilla de carrito de compras de WooCommerce en lugar de usar un tema de WordPress de WooCommerce .
Esto reducirá en gran medida el tiempo que lleva la personalización y la publicación del sitio web.
Para instalar una plantilla de comercio electrónico que funcione en su sitio web, comience creando una nueva página y asígnele un título desde el Panel de control de WordPress> Páginas> Agregar nuevo y haga clic en Serás redirigido a la pantalla del Editor de Elementor . Aquí encontrará el icono de la biblioteca de plantillas de ShopReady – Elementor . Haga clic en el icono para obtener acceso a la biblioteca de plantillas. Seleccione y elija cualquier plantilla que se ajuste a su identidad de marca y haga clic en Insertar para aplicar la plantilla.
Espere hasta que la plantilla finalice su proceso de importación.
Debería verse algo como esto.
Su sección de productos puede parecer vacía si no ha agregado productos a WooCommerce. Debe agregar los productos que está tratando de exhibir en su plataforma WooCommerce de inmediato. Para hacerlo, puede seguir nuestra guía anterior sobre cómo agregar productos a una tienda WooCommerce .
Cada producto de WooCommerce se puede personalizar con el título del producto, la descripción, el precio, el precio con descuento, las imágenes, los metadatos, las variaciones, etc. desde el panel del producto de WooCommerce.
Paso 3: Personalización de la página del producto
Para comenzar el proceso de personalización de la página de su producto, diríjase al panel de ShopReady – WooCommerce Builder y seleccione la opción Plantillas. A partir de ahí, puede construir una página de producto básica para usarla como punto de partida para sus personalizaciones. Active la categoría Plantilla de producto, luego busque la configuración de Producto único en esa categoría. Ahora, seleccione el icono de edición de la barra de herramientas.
Y después de eso, se cargará la pantalla que muestra el Editor de Elementor . Simplemente haciendo clic en el signo más que se puede ver en la esquina superior derecha de la interfaz de Elementor, comenzará el proceso de personalización de la página. Cuando se trata del aspecto de su página y los widgets que desea utilizar, tiene una amplia variedad de opciones disponibles cuando se trata de las secciones de Elementor que puede insertar en ella.
Paso 3: uso de widgets de Elementor para personalizar la página del producto de la tienda WooCommerce
Agregar un título de producto
Como ya ha establecido una estructura de sección principal utilizando Elementor para su página de producto de WooCommerce, ahora puede comenzar el proceso de agregar un título de producto. Deberá usar el enfoque de arrastrar y soltar para colocar el widget Título del producto donde desee en la página del producto para lograr este objetivo.
Muestre el título del producto correcto yendo a la barra de navegación de Elementor, seleccionando la pestaña Contenido y luego buscando las opciones de Actualización del editor en el submenú que aparece después de hacerlo. Para seleccionar el producto adecuado, haga clic en su nombre en el menú desplegable que se encuentra en Producto de demostración.
Deberá ingresar al Panel de productos de WooCommerce y agregar o modificar la información esencial del producto allí para que estos datos muestren el título correcto del producto. Esto se puede hacer haciendo clic en los botones "Agregar" o "Editar".
Agregar una imagen destacada a la página del producto
Después de eso, querrá asegurarse de que su producto tenga una galería de imágenes y una imagen destacada. Para lograr esto, puede utilizar cualquiera de los diversos widgets de imagen que se incluyen en el complemento todo en uno para comercio electrónico que viene empaquetado con Elementor.
Por el bien de esta demostración, utilizaremos el widget ShopReady Thumbnail with Zoom, que, como sugiere su nombre, tiene una función de zoom. Si usa este widget, podrá mostrar una versión de zoom de desplazamiento del producto de WooCommerce de la imagen de su producto a sus clientes cada vez que muevan el mouse sobre la imagen de su producto.
De la misma manera que antes, puede seleccionar la imagen del producto adecuada haciendo clic en la pestaña Contenido de la opción Producto de demostración.
Agregar bloque para el widget de precios
El bloque de precios del producto es otro componente esencial que debe estar presente en su página de productos de comercio electrónico. Para lograr esto, deberá cambiar los atributos del producto de WooCommerce con los ajustes apropiados y utilizar el widget ShopReady Price, que debe colocarse debajo del título del producto.
Para asegurarse de que se muestre el precio correcto, elija el título del producto del menú desplegable en la opción Producto de demostración de la pestaña Contenido.
Agregar descripción del producto
Con este widget de Descripción del producto de los complementos de productos de WooCommerce, no solo tiene la opción de agregar descripciones de productos, sino que también tiene el poder de personalizar altamente las descripciones. Mediante el uso de la pestaña de estilo, tendrá la capacidad de modificar cómo se mostrará la descripción del producto al público en general.
Adición de la función Agregar al carrito
La posibilidad de que los clientes agreguen artículos adicionales a sus carritos antes de pasar a la página de pago se ve facilitada por la opción "Agregar al carrito", que es otra característica que es extremadamente importante tener.
El uso del widget Add to Cart de ShopReady le permitirá equipar la página de su tienda de comercio electrónico con una potente versión de la función Add to Cart . Con la ayuda de este widget, podrá brindar a sus clientes la posibilidad de ajustar la cantidad de un producto que tienen en su carrito directamente desde el bloque Agregar al carrito.
También puede modificar la apariencia del botón Agregar al carrito de Elementor a través de la pestaña Estilo de Elementor de estilo del producto WooCommerce. Aquí puede cambiar la fuente, el color, el fondo, el margen, el relleno y otros atributos.
Agregar metadatos a la página del producto
Implementar un filtro de productos de WooCommerce que haga uso de los metadatos y atributos de productos que ha agregado a WooCommerce mientras agrega productos es algo que debe hacer si desea brindarles a sus consumidores una experiencia de compra más satisfactoria.
Busque el widget ShopReady Meta y colóquelo justo debajo del botón "agregar al carrito" en la página dedicada a su producto. Esto le permitirá mostrar la información en cuestión.
Cuando selecciona el título de producto apropiado del menú desplegable ubicado en la opción Producto de demostración de la pestaña Contenido, las etiquetas y los metadatos de su producto deben mostrarse con precisión.
Agregar botones para compartir en redes sociales a la página del producto
Al utilizar un sencillo bloque de botones para compartir en las redes sociales, puede permitir que sus consumidores compartan las publicaciones de sus productos en las redes sociales directamente desde la página del producto de WooCommerce para el artículo que han comprado. Que puede producir utilizando solo la funcionalidad de arrastrar y soltar que ofrece el widget Elementor Social Share.
Directamente desde la pestaña Contenido, el bloque se puede personalizar con cualquier ícono de redes sociales, texto y enlaces para compartir que elija el usuario. Además, la pestaña Estilo de Elementor permite a los usuarios alterar la presentación visual de los bloques de acciones sociales si así lo desean.
Y con eso, ha terminado con los fundamentos de la personalización de las páginas de productos de WooCommerce.
Paso 4: agregar productos relacionados con WooCommerce
El uso del widget de Productos relacionados que se incluye en los complementos de productos de WooCommerce le permitirá mostrar productos relacionados en la página de su producto, lo cual es una excelente estrategia para impulsar las ventas en línea. Con el widget de productos relacionados de ShopReady, puede construir fácilmente un magnífico bloque deslizante de productos que se divide en secciones.
Para usar el widget, simplemente arrástrelo y suéltelo debajo del bloque de un solo producto y luego seleccione los productos específicos que desea mostrar en su página de un solo producto desde la pestaña Contenido .
Paso 5: agregar campos de pago personalizados de WooCommerce
Como se mencionó anteriormente, este es un aspecto importante de una plataforma de comercio electrónico que funcione. Con un creador de tiendas de WooCommerce como ShopReady, puede utilizar fácilmente un código abreviado de carrito de WooCommerce e implementar un carrito de comercio electrónico funcional de esa manera, o puede usar un widget de ShopReady para aplicar esta función.
Para tener un carrito que funcione, primero deberá agregar el widget " Agregar al carrito" en la página del producto. Cosa que ya hicimos. Entonces, regresemos y creemos la página del carrito, donde se mostrarán todos los productos una vez que se hayan agregado al carrito.
ShopReady: WooCommerce Shop Builder permite a los usuarios elegir entre dos plantillas de carrito diferentes, que están disponibles para usar desde el Panel de control de ShopReady . Desde el panel de control de ShopReady, haga clic en el menú Plantillas y ahora habilite y edite una plantilla de carrito preestablecido de WooCommerce proporcionada por ShopReady.
Al crear una nueva plantilla de carrito de WooCommerce o editar una existente, será redirigido a la pantalla del Editor de Elementor.
Desde aquí, simplemente puede agregar el widget ShopReady Cart , y su página de carrito tomará su forma automáticamente, y crear un carrito de compras de WordPress sin complemento es un proceso tan simple con ShopReady. No requiere complementos ni herramientas adicionales.
Si ya ha agregado algún producto a su carrito, debería verse así.
Y ahí lo tienes, una página de carrito funcional de WooCommerce con un botón de carrito funcional. También tiene la opción de personalizar aún más la página del carrito con Elementor. Con Elementor, puede cambiar todos los aspectos de la página del carrito, desde los colores de fondo hasta la configuración de la tipografía de Elementor.
También puede utilizar un código abreviado del carrito de compras de WooCommerce. En ese caso, deberá usar el widget Elementor ShortCode.
Cuando haya terminado de personalizar la página de su tienda, asegúrese de hacer clic en Publicar/Actualizar para hacer los cambios en vivo para sus visitantes y clientes.
Conclusión
Todo el proceso de creación de un botón personalizado para agregar al carrito de WooCommerce puede parecer una tarea desalentadora, pero a medida que avanza en esta guía, verá que el proceso de creación de esta función técnica no es nada difícil con el conjunto adecuado de herramientas. ShopReady WooCommerce Shop Builder es un paquete completo que ofrece todas las herramientas que necesita para crear una sólida plataforma de comercio electrónico desde cero.
Y si tiene algún problema con ShopReady o el proceso de creación del carrito, siempre puede consultar la documentación del carrito de WooCommerce .
Preguntas frecuentes sobre los carros de la compra de WooCommerce
¿WordPress tiene un carrito de compras?
WordPress CMS es una plataforma de alojamiento de sitios web barebones. No incluye ningún carrito de compras ni funciones relacionadas con el comercio electrónico. Pero dado que es una plataforma de código abierto, puede utilizar cualquiera de sus herramientas, complementos o módulos de comercio electrónico creados por la comunidad para agregar un carrito al sitio web de WordPress.
¿WooCommerce tiene un carrito de compras?
Sí, el complemento base de WooCommerce viene con un botón de carrito funcional y una página de carrito. Pero es de naturaleza muy minimalista. Para darle vida a la página del carrito, puede usar cualquier cantidad de extensiones de WooCommerce , o puede aprovechar al máximo las opciones de personalización del generador de páginas de Elementor y ShopReady WooCommerce para las páginas del carrito de comercio electrónico. Desde los íconos del carrito de WooCommerce hasta los diseños de página detallados, todo se puede personalizar con ShopReady.
¿Cómo creo una página de pago personalizada en WooCommerce?
Descargue e instale ShopReady – WooCommerce Shop Builder. Ahora cree una nueva plantilla de página de pago de WooCommerce desde el panel de ShopReady. Será redirigido al Editor de Elementor, desde aquí puede utilizar el widget ShopReady Checkout para crear una página de pago personalizada y funcional en WooCommerce.