将模式添加到woocommerce添加到购物车按钮

本文介绍了将模式添加到woocommerce添加到购物车按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用woocommerce建立一个wordpress网站.

I am building a wordpress site with woocommerce.

我想添加一个可选的保险产品，当客户单击特定产品的添加到购物车"时，该产品会弹出.他们的想法是，他们必须先接受或拒绝该产品，然后才能继续进行结帐.

I want to add an optional insurance product that pops up when a customer clicks on 'add to cart' for a particular product. The idea is that they have to accept or decline this product before they continue to the checkout.

我尝试使用引导程序模式，但无法使用添加到购物车"按钮来触发它.Modal可以作为页面中内置的特定模式按钮正常工作，因此我知道这不是jquery或bootstrap的问题，但我不知道如何将其链接到添加到购物车"按钮.

I have tried using bootstrap modal but I can't get it to trigger using the add to cart button.Modal is working fine as a specific modal button built into the page, so I know it's not a problem with jquery or bootstrap, but I can't figure out how link it to the add to cart button.

似乎已经应该内置到woocommerce中，但是如果我错过了它.

Seems like something that should be built-in to woocommerce already but if it is I've missed it.

任何帮助都很感激...

Any help much appreciated...

推荐答案

我最终将模式设置为在打开购物车页面时触发，因为购物车页面是Wordpress，因此很简单.这不是一个完美的解决方案，因为当客户去购买任何产品时，模态现在打开，但是总比没有好.这是带有默认内容的代码

I ended up setting the modal to trigger when the cart page opened, as the cart page is Wordpress it was straight-forward. Not the perfect solution as the modal now opens when a customer goes to buy any product, but it's better than nothing.here's the code with the default content

<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>

和js

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

我将所有这些内容直接插入了您的购物车" wordpress页面中.

I inserted all this directly in the 'your cart' wordpress page.

工作正常，但我很想听听更好的解决方案

Works fine, but I'd love to hear a better solution

这篇关于将模式添加到woocommerce添加到购物车按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

With