Question

我添加了一个功能，在“添加到购物车”按钮旁边添加了一个“查看购物车”按钮。我希望按钮被禁用（不显示或灰显），直到有人将产品添加到购物车。

这是我的功能：

    function action_woocommerce_after_add_to_cart_button() {

    echo '<div class="woocommerce-message krank-mesg" role="alert"><a 
    href="./cart/" class="button wc-forward">VIEW CART</a> <p 
    class"woo-fx-added"><span>The New Formula X Driver</span> has 
    been added to your cart.</p></div>';

    add_action( 'woocommerce_after_add_to_cart_button', 
    'action_woocommerce_after_add_to_cart_button', 10, 0 );

这是页面： http://krankfinance.wpengine.com/#product

我希望上面页面上的“查看购物车”按钮的功能类似于此页面上的查看购物车按钮（产品添加到购物车后）： http://krankfinance.wpengine.com/shop/easy-pay-formula-x-driver/

已经工作了5个小时，谷歌搜索任何我可以但我似乎无法找到答案。没想到会这么难：）

提前致谢

Answer 1

上面用PHP接受的解决方案，我的回答也是可行的（纯JS / CSS）

你有一个名为cart-items的span对象 - 你可以使用它来检测你的购物车中是否有产品。

首先通过CSS隐藏查看 - 购物车按钮。

然后尝试用这样的JS：

if(parseInt($('.cart-items').html()) > 0) {
 $('.krank-mesgs').show();
}

更新

因为您的网站使用js-function放置内容，您需要检测更改然后触发这样的操作：

Javascript（jQuery）：

$("body").on('DOMSubtreeModified', ".cart-items", function() {
  if(parseInt($('.cart-items').html()) > 0) {
   $('.krank-mesgs').show();
  }
});

CSS：

.krank-mesgs {
  display: none;
}

Answer 2

这对我有用。

    function action_woocommerce_after_add_to_cart_button() {
// Check if the cart isn't empty.
if ( ! WC()->cart->is_empty() ) {
    echo '<div class="woocommerce-message krank-mesg" role="alert"><a href="./cart/" class="button wc-forward">VIEW CART</a> <p class"woo-fx-added"><span>The New Formula X Driver</span> has been added to your cart.</p></div>';
} else {
  }
    };
    add_action( 'woocommerce_after_add_to_cart_button', 
    'action_woocommerce_after_add_to_cart_button', 10, 0 );

感谢您的帮助

如何在产品添加到购物车之前禁用“查看购物车”btn？

2 个答案:

更新