Question

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

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

我已经通过谷歌搜索和摆弄functions.php和“wc_add_to_cart_message”函数做了一些尝试，但没有成功。我不是非常流利的PHP（或javascript），以实现这一点。提前谢谢！

Answer 1

我收到了客户的类似请求。但是不是用“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来修改它以满足您的需求。

首先，要覆盖模板，您应该按照Template Structure文档中的说明进行操作，特别是：

将其复制到主题名为/ woocommerce的目录中，保留相同的文件结构，但删除/ templates /子目录。

将[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; ?>

这两个步骤应该可以帮到你找到你正在寻找的东西。

Woocommerce：添加关闭“添加到购物车”成功消息弹出窗口的功能

2 个答案: