Woocommerce：添加关闭成功消息弹出窗口的功能"add to cart"

Question

这是我的第一篇文章，所以请保持温柔。我正在完成一个基于WooCommerce的网站，我的客户要求有能力（例如，使用一个小" X"按钮）为"成功添加到购物车"消息的小弹出横幅，该消息出现在产品上页面。（目前，只有通过该弹出弹出来"查看购物车"的选项。）这似乎不是WooCommerce中的内置设置。

要查看我在说什么，您可以访问https://www.drinkreorient.com/product/rose-root/，然后将此产品添加到购物车中（无需购买;-)）。然后，您应该看到弹出窗口。

我通过搜索并摆弄functions.php和" wc_add_to_cart_message"功能进行了一些尝试，但没有成功。我的php（或JavaScript）并不能说明实现这一目标。预先感谢！

Answer 1

我有来自客户端的类似请求。但是，与其" x"关闭弹出式的" x"是在x数秒之后褪色。

请参阅此链接：http：//ausauraair.com.au/product/ausaura-air/

通过添加一些jQuery，我能够使盒子褪色。

jQuery(document).ready(function( $ ) {
$('.woocommerce-message').fadeTo(7000,1).fadeOut(2000);
});

您可能使用类似的技术，但添加一个" X"按钮，然后单击功能使盒子在单击时关闭。

Answer 2

您不需要真正弄乱wc_add_to_cart_message。相反，您应该覆盖woocommerce/templates/notices/success.php模板，并通过添加关闭按钮以及一些JavaScript进行修改以适合您的需求。

首先，要覆盖模板，您应该遵循模板结构的文档中找到的说明，特别是：

将其复制到主题中的目录中，命名/woocommerce，保留相同的文件结构，但要删除/模板/subdirectory。

一旦将此[your-theme]/woocommerce/notices/success.php文件复制到位，类似的内容应该与您要寻找的内容相当接近：

<?php
/* Modified version of [your-theme]/woocommerce/notices/success.php */
if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}
if ( ! $messages ){
    return;
}
?>
<style>
    .woocommerce-message .close-button {
        /* customize the close button */
        float:right;
        display:inline-block;
        color:white;
        cursor:pointer;
    }
</style>
<script>
  (function($){
    $(document).ready(function(){
      $('.woocommerce-message .close-button').on('click', function(){
        $('.woocommerce-message').fadeOut(function(){$(this).remove();});
      });
    });
  }(jQuery));
</script>
<?php foreach ( $messages as $message ) : ?>
    <div class="woocommerce-message">
        <?php echo wp_kses_post( $message ); ?>    
        <span class="close-button">X</span>
    </div>
<?php endforeach; ?>

这两个步骤应该为您提供所需的内容。

Answer 3

基督教Caltabiano代码的其他附加，这对于延迟消息几秒钟可能更有用...

<script>jQuery(document).ready(function( $ ) {  $('.woocommerce-message').fadeTo(300,1).delay(3000).fadeOut(300);   }); </script>

$('#go').click(function(){
$('#para').fadeOut().delay(3000).fadeIn();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><input id="go" type="button" value="Go" /></p>
<p id="para">This text will fade out and pause</p>