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:
[pastacode lang=»php» manual=»%2F%2F%20register%20add%20to%20cart%20action%0Afunction%20dac_add_cart_button%20()%20%7B%0A%20%20%20%20add_action(%20’woocommerce_after_shop_loop_item_title’%2C%20’woocommerce_template_loop_add_to_cart’%2C%2010%20)%3B%0A%7D%0Aadd_action(%20’after_setup_theme’%2C%20’dac_add_cart_button’%20)%3B» message=»» highlight=»» provider=»manual»/]
Ahora guarda cambios y comprueba que efectivamente se ha agregado un botón de Añadir al carrito debajo 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).
Este código pertenece a Jonathan Bossenger.
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!
Saludos y muchas gracias por tu tutorial muy bueno, tengo una duda. como poder cambiar el color del botón cuando ya se encuentra seleccionado para diferenciar de los que ya se seleccionaron para comparar a los que no.
Hola, primeramente muchas gracias ya he agregado el botón de añadir al carrito en todos los productos sin problema, ahora quiero hacer que este botón me multiplique por un impuesto (te explico un poco estoy haciendo la web de una empresa informática y todos los productos que generan copia tienen un impuesto el CANON LPI que no es un porcentaje sino un monto exacto a cada artículo), con que herramienta puedo lograr que al hacer click en añadir al carrito me multiplique por un numero determinado y recien se añada a la cesta. Espero me este explicando bien y me puedas ayudar. Gracias!!!!!!
Hola!, espero todo vaya bien, quiero consultar como puedo centrar el boton de añadir al carrito?
Hola, muy buen tutorial.. a tu pregunta , debes ubicar la clase que contiene dicha elemento que quiere modificar ( centrar en este caso), prueba pegando este codigo css de centrado.
.product {
text-align:center;
}
en mi caso se arreglo…
si hay mejores soluciones, los leo..saludos…
Hola probé y si se centro, pero también se centraron todos los textos en general, alguna solución?
hola una pregunta como hago para que me salgan las cantidades, ya me sale añadir al carrito pero no las cantidades utilizo tema divi
Hola quisiera agregar el código pero a solo una pagina, es decir dentro de mi sitio web tengo dos paginas con tiendas, una es de productos compuestos y otra es de productos simples, quisiera aplicar este código solo en la pagina de productos simples.
Muchas gracias
Hola
he insertado el código y ha funcionado a la perfección.
Gracias
Hola como estas? sabes que agrego el codigo y me da este error en functions.php ! aparece lo siguiente:
Cannot redeclare dac_add_cart_button() (previously declared in wp-content/themes/Divi/functions.php:7206)
Hola, saben si existe algun codigo que sea compatible con divi 4.3?
Hola, una vez ingresado el código en functions.php, lamentablemente al actualizar DIVI se pierde, como puedo fijarlo?
Hola Patricio, ¿lo has incluido en el tema hijo y aún así se te pierde al actualizar?
Apariciencia / Editor / functions.php
Hola amigos muchas gracias por todos sus tutoriales son de gran utilidad.
Tengo un pequeño drama con este en si, estoy dejando los botones de color y las letras del botón en blanco, para eso dejo el color de énfasis del tema en el color «Blanco», pero eso me afecta muchas mas cosas, por ejemplo las valoraciones no se ven, o cuando se inicia sesión y la contraseña esta incorrecta todo ese texto no se ve.
existe alguna solución de solo cambiar el texto de los botones sin tocar el énfasis del tema
atento a comentarios 🙂
Hola me funciona pero… cuando lo pongo como una webapp con un codigo embebido no funciona el boton de ver carrito. Si lo contabiliza, pero para ver el carrito hay que subir al icono del menu predeterminado.
Gracias por la ayuda y también por si fuera posible esta dudilla. Saludos
Hola, me ha funcionado muy bien la funcion, Gracias! solo que el carrito que tiene la numeracion de los productos comprados, no se actualiza. Como se podria resolver eso? de antemano gracias
¿Al final pudiste resolver el tema de la actualización del contador en el carrito?
Hola, muy bueno el tutorial, estaba buscando algo así funcional, pero ahora tengo un tema. No se en qué parte poner la porción de código.
Gracias. Saludos
Hola Nano,
Como se comenta en el post, el código lo puedes añadir de dos formas diferentes:
1 – A través del FTP o del administrador de archivos del hosting, dirígiéndote a la ruta: wp-content / themes / Divi (tema hijo) / functions.php
2 – Directamente desde WordPress en: Apariciencia / Editor / functions.php
Es decir, lo debes colocar justo al final del archivo functions.php de tu plantilla.
Un saludo!
Hola, he implementado el codigo php de añadir al carrito, todo funciona bien, pero el botón no está centrado con las imagenes de los productos, es decir: sale a la izquierda, ¿hay alguna forma de centrar ese botón?
Gracias, hacéis un excelente trabajo.
Me parece super útil la información porque tenia este problema y no sabia como solucionarlo. Aun así tengo una duda , en la plantilla de divi no me aparece el icono de carrito de la compra cuando veo la web a través del móvil . Sabes como puedo hacer para que aparezca? seguro que es sencillo pero no encuentro la forma de ponerlo en la cabecera. Muchas gracias.
Hola Cinthi!
¿Te refieres a mostrar el carrito en el menú superior? En ese caso, prueba a incluir este código en las opciones del tema 😉
@media (max-width: 980px) {
#et-secondary-menu,#et-secondary-nav {
display: inline-block !important;
}
}
en que parte es donde tengo que pagr el codigo PHP … tengo dudas sobre esa parte… en mi pagina ya tenia esa opcion de añadir al carrito en las paginas de archivo pero por alguna extraña razon ahora ya no aparece y necesito arreglar esa parte pero no se donde es donde se coloca el codigo
Hola Cesar, tienes que abrir el FTP o administrador de archivos del hosting y añadir el código en el archivo functions.php. También podrás añadirlo directamente desde WordPres en Apariencia -> Editor -> functions.php
Recuerda que lo aconsejable es realizar esto sobre el tema hijo que hayas creado de Divi y no directamente sobre la plantilla.
Un saludo!
Hola, El codigo funciona muy bien, pero al agregar al carrito no se refleja al instante el producto agregado, sabes porque sucede esto
Hola David! ¿Te refieres a que no descuenta el número de stock? Quizás tenga algo que ver con la configuración que tengas en WooCommerce>Ajustes>Productos>Inventario
Un saludo 😉
Hola. He tenido el mismo problema de David. He agregado el codigo y el boton aparece correctamente pero lo que no se actualiza instantáneamente luego de agregar un producto es el contador de articulos del carrito en el menu superior. Si en cambio se actualiza en un widget lateral (por ejemplo). Será que falte algun codigo adicional ? Atento. Muchas gracias. Saludos
Hola como estás?
Tus tutoriales son muy buenos, te agradezco por la información me a ayudado mucho, te peudo pedir un grande favor? puedes hacer un tutorial sobre como agregar las estrellas de calificación del producto. como agregar la opción de quick view a los productos y como poder personalizar el menú del filtro en un sidebar, todo esto con divi, te agradecería mucho de verdad si puedieras hacerlo ya que esto me hace falta en varios sitios web, que tengas buen día.
Saludpos
Hola Kevin!
Gracias por seguir el blog y por tus sugerencias, intentaré escribir sobre ello 😉
Buenas tardes, el código funciona de maravilla pero …. si al ir al carrito, intento cancelar esa compra no se deja …
Hola Pancho!
Este código no debe de afectar a la página de carrito, por lo que te debería dejar eliminar el producto como habitualmente. Si te genera algún error, probablemente sea por alguna incompatibilidad con plugins instalados.
Saludos y gracias por leer el blog 😉
Hola .. el codigo en functions funciona, efectivamente se ve el botón, pero cuando intento entrar a la página para editarla el código hecha a perder el editor .. no se puede ingresar al editor .. pero solo de las páginas y post.
Hola Matías!
¿Te refieres a que no te muestra el constructor de Divi? Si es así, no debería darte problemas. Yo he usado este código en varias webs y me sigue permitiendo editar las páginas. Quizás sea problema de otras incompatibilidades.
Saludos y gracias por leer el blog 😉