woocommerce产品变化选择警报框定制

Question

可以自定义产品变体选择警告框吗？

我想显示bootstrap模式而不是默认警报框。

我试过以下。但没有舔。

karate-config.js

Answer 1

这是一个jQuery解决方案，它将停止警报并允许您自己做事。您可以根据需要添加自己的验证，虽然我认为使用wc_add_notice以某种方式使用wc_add_notice是一个更好的解决方案，但我无法解决这个问题。

$('.single_add_to_cart_button').click(function(e){
    e.preventDefault(); // Stop the button
    // Do your custom validation here
    return false; // Prevent the Alert from firing
});

Answer 2

您可以使用基于CSS类选择器的方法。

基本上，您正在使用click事件，并使用基于CSS选择器的几个嵌套条件语句来执行代码。执行代码时，您返回false以防止触发警报。

由于我们在“ .single_add_to_cart_button”上设置了“ .disabled”类，因此可以在主题JS中的任何地方使用。

经过测试，可以正常工作。

来源：https://github.com/woocommerce/woocommerce/blob/master/assets/js/frontend/add-to-cart-variation.js#L94

$('.single_add_to_cart_button').on('click', function (event) {

        if ($(this).is('.disabled')) {
            event.preventDefault();

            if ($(this).is('.wc-variation-is-unavailable')) {

                //Do your thing for unavailable variation

            } else if ($(this).is('.wc-variation-selection-needed')) {

                //Do your thing for not selected variation

            }

        }
        return false;
    });

Answer 3

Petar 答案对我来说效果更好，但 return false 应该在 if ($(this).is('.disabled')) {..如果启用，让 botton 工作，就像这样：

$('.single_add_to_cart_button').on('click', function (event) {

    if ($(this).is('.disabled')) {
        event.preventDefault();

        if ($(this).is('.wc-variation-is-unavailable')) {

            //Do your thing for unavailable variation

        } else if ($(this).is('.wc-variation-selection-needed')) {

            //Do your thing for not selected variation

        }
 return false;
    }
   
});