agregar modal a woocommerce botón agregar al carrito

3 minutos de lectura

Estoy construyendo un sitio de wordpress con woocommerce.

Quiero agregar un producto de seguro opcional que aparece cuando un cliente hace clic en “agregar al carrito” para un producto en particular. La idea es que tengan que aceptar o rechazar este producto antes de continuar con la caja.

Intenté usar el modo de arranque, pero no puedo hacer que se active con el botón Agregar al carrito. Modal funciona bien como un botón modal específico integrado en la página, así que sé que no es un problema con jquery o bootstrap, pero no puedo entender cómo vincularlo al botón Agregar al carrito.

Parece algo que ya debería estar integrado en WooCommerce, pero si lo está, me lo he perdido.

Cualquier ayuda muy apreciada…

Terminé configurando el modal para que se active cuando se abrió la página del carrito, ya que la página del carrito es WordPress, fue sencillo. No es la solución perfecta ya que el modal ahora se abre cuando un cliente va a comprar cualquier producto, pero es mejor que nada. aquí está el código con el contenido predeterminado

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title" id="myModalLabel">Modal title</h4>
       </div>
    <div class="modal-body">
    ...
    </div>
    <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
    </div>
  </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>     

y el js

<script>
 jQuery(document).ready(function($) {
 $(document).ready(function(){
 $('#myModal').modal('show')
 });
  });
 </script>

Inserté todo esto directamente en la página de wordpress ‘tu carrito’.

Funciona bien, pero me encantaría escuchar una mejor solución.

al agregar una consulta para verificar si la URL actual contiene la cadena ‘agregar al carrito’, puede mostrar el modal en la página de su tienda. También debe desmarcar ‘Redirigir a la página del carrito después de la adición exitosa’ en: WooCommerce> Configuración> Productos> Pantalla.

<script>
jQuery(document).ready(function () {
    if (window.location.href.indexOf("add-to-cart") != -1){
        $('#cartModal').modal('show');
    }
});
</script>   

woocommerce agregar al carrito emergente

use este complemento para generar la ventana emergente.

espero que esto ayude !

  • gracias por eso, pero no puedo averiguar cómo usarlo!

    – vtechmonkey

    06/11/2014 a las 21:21

  • Lo subí y cambié los permisos del archivo, pero no veo dónde agregarlo a un producto.

    – vtechmonkey

    6 de noviembre de 2014 a las 21:22

  • tienes que googlearlo. acabo de mostrar el camino… tienes que terminar… así solo vendrán tantas cosas. prueba tu mismo :)…

    – Thiyagesh

    7 de noviembre de 2014 a las 5:54

¿Ha sido útil esta solución?