添加模式到woocommerce添加到購物車按鈕

Question

我正在用woocommerce構建一個WordPress網站。

我想添加一個可選保險產品，當客戶點擊某個特定產品的「添加到購物車」時彈出。這個想法是，他們必須接受或拒絕這種產品，才能繼續結帳。

我已經嘗試使用引導模式，但我不能讓它觸發使用添加到購物車按鈕。 Modal作爲一個內置於頁面中的特定模式按鈕正常工作，因此我知道這不是jquery或bootstrap的問題，但我無法弄清楚如何將它鏈接到添加到購物車按鈕。

似乎應該內置到woocommerce，但如果它是我錯過了它。

任何幫助非常讚賞...

Answer 1

woocommerce add to cart popup

使用該插件生成彈出。

希望這有助於！

Answer 2

我最終設置了模式，以便在購物車頁面打開時觸發，因爲購物車頁面是Wordpress，非常簡單。當客戶去購買任何產品時，現在打開的模式並不是完美的解決方案，但總比沒有好。 這裏與默認內容

<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頁面插入這一切的代碼。

工作正常，但我很想通過添加查詢支票聽到一個更好的解決方案

Answer 3

如果當前的URL包含字符串「添加到購物車」，可以顯示在你的店鋪頁面的模態。您還應該取消選中「WooCommerce」>「設置」>「產品」>「顯示」下的「成功添加後重定向購物車頁面」。

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