A pesar de lo completo que es el tema Divi y lo bien que se integra para su funcionamiento con WooCommerce, sigue habiendo algunas pequeñas funciones que te pueden parecer esenciales y que la plantilla no incluye por defecto.

Por ejemplo, no existe ninguna opción directa para incluir el botón de añadir al carrito a la página de Tienda de la plantilla Divi, pues Divi considera que el comprador debe pasar antes por la ficha de producto.

Pero, ¿Y si a tu negocio online le interesa que el cliente tenga una opción directa para añadir los productos al carrito?

No te preocupes, esto tiene una fácil solución y la vamos a ver a continuación 😉

AÑADIR LOS PRODUCTOS DE WOOCOMMERCE DIRECTAMENTE AL CARRITO

A veces, según la orientación de tu negocio online, te puede interesar que el cliente haga una compra lo más directa posible de los productos y quizás, obligarlo a pasar por la ficha de producto, puede provocar que se abandone la compra.

Pongamos la situación de que el cliente conoce ya tus productos y se decide a comprar más de uno. Si tiene que ir entrando en cada uno de ellos para poder añadirlos al carrito, gastará mucho tiempo en terminar la compra.

Por lo tanto, si necesitas añadir el botón de «Añadir al carro» en Divi, tanto en la Página de Tienda como en el Módulo de Tienda que incluye la plantilla, sigue estos pasos:

O a través del FTP o del administrador de archivos del hosting, dirígiéndote a la ruta:

wp-content / themes / Divi / functions.php

O directamente desde WordPress en:

Apariciencia / Editor / functions.php

IMPORTANTE! Esto lo debes hacer sobre la plantilla hijo que hayas creado y no directamente sobre el tema padre.

Y agrega aquí el siguiente código PHP:

// register add to cart action
function dac_add_cart_button () {
    add_action( 'woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_add_to_cart', 10 );
}
add_action( 'after_setup_theme', 'dac_add_cart_button' );

Ahora guarda cambios y comprueba que efectivamente se ha agregado un botón de Añadir al carritodebajo de cada producto, tanto en la Página de Tienda como en el Módulo de Tienda de Divi, si lo tienes añadido en alguna página.

Ahora, si el cliente quiere acceder a su carrito de compra online, puede clicar en el nuevo enlace que aparecerá de «ver carrito» o clicar en el icono de carrito que aparece en la parte superior de la página (opción por defecto).

PERSONALIZAR EL BOTÓN DE AÑADIR AL CARRITO EN DIVI

Ahora ya tienes añadida esa opción directa de añadir el producto al carro en tu tienda online con WooCommerce, pero el botón habrá cogido por defecto el diseño original del tema Divi.

¿Cómo dar estilo al botón de Añadir al carrito en Divi?

Es cuestión de seguir un par de pasos.

Ve a Divi -> Personalizador de temas -> Botones y personaliza el estilo del botón normal y en hover (al pasar el ratón). Desde aquí podrás personalizar el borde y el icono del botón.

El texto, al ser un enlace, toma el color que hayas seleccionado como énfasis del tema. Así, que si deseas modificarlo, ve a Divi -> Personalizador de temas -> Ajustes generales -> Ajustes de formato -> color de énfasis del tema y modifícalo ahí.

De esta forma, ya tendrás personalizados todos los botones de añadir al carro que se hayan añadido a tu web on Divi.

¿Y SI QUIERES REDIRIGIR AL CLIENTE DIRECTAMENTE AL CARRITO?

Has añadido el botón para que el usuario ya tenga en su carrito de compra online los productos que necesita, pero seguirá navegando por la Página de Tienda donde puede seguir viendo más productos.

Para poder terminar la compra le bastará con clicar en el enlace o icono del carrito y dirigirse directamente a dicha página con el fin de terminar su compra.

Pero hay una opción directa para hacer que el cliente añada el producto al carro y automáticamente sea redirigido a la Página de Carrito. De esta forma se acelerará aún más el proceso de compra.

Para conseguir esto, ve a:

WooCommerce -> Ajustes -> Productos -> mostrar

Y activa la casilla «Redirigir a la página del carrito tras añadir productos con éxito».

Y con estos sencillos pasos, la función de incluir el botón de añadir al carrito en Divi queda areglada. Algo que te puede hacer aumentar las ventas de tu tienda online con WooCommerce.

¡Fácil y rápido!