在颜色和大小之前更改“添加到购物车”按钮的文本

Question

过去几天我一直在想，如何在客户选择选项之前更改“添加到购物车”按钮的文本。

https://www.surendra.sk/shop/accessories/arizona-sandals-2/这里是产品页面。

所以基本上，在选择颜色和尺寸之前应该有另一个文本，比如“请选择选项”，在用户选择它之后，它会变成添加到购物车。

已经调用了另一个类，它会在做出任何选择之前更改 CTA 的背景颜色。我试图先通过 Javascript 修改它；

jQuery(document).ready(function(){
jQuery('div.summary.entry-summary > form > div > div.woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled > button').html('Vyberte farbu a veľkosť');

});

没有结果。

然后，我试图将它直接实现到functions.php中

add_action( 'woocommerce_before_add_to_cart_button', 'test' );

function test(){
    echo 'Vyberte farbu a veľkosť';
}

在 CTA 上方显示文本。

所以我尝试使用过滤器并使用

woocommerce_product_add_to_cart_text

这又让我没有结果。

然后，我尝试在 .php 文件中找到“woocommerce-variation-add-to-cart.variations_button.woocommerce-variation-add-to-cart-disabled”以直接在此处更改文本。

可悲的是，我发现唯一的东西是一个替换类的 .js，基本上是这样的：

VariationForm.prototype.onHide = function( event ) {
    event.preventDefault();
    event.data.variationForm.$form.find( '.single_add_to_cart_button' ).removeClass( 'wc-variation-is-unavailable' ).addClass( 'disabled wc-variation-selection-needed' );
    event.data.variationForm.$form.find( '.woocommerce-variation-add-to-cart' ).removeClass( 'woocommerce-variation-add-to-cart-enabled' ).addClass( 'woocommerce-variation-add-to-cart-disabled' );

我知道如果我想用 functions.php 实现它，我必须以某种方式调用 $product 和 $args，但我是 PHP 新手，我只是听不懂。

你能帮我解决这个问题吗？

非常感谢。

Answer 1

在你的活动主题的functions.php中添加以下代码sn-p来实现上述任务-

add_action( 'wp_footer', 'wc_modify_variation_atc_text' );
function wc_modify_variation_atc_text() {
    ?>
    <script type="text/javascript">
        (function( $ ) { 
            var $form = $( '.product form.variations_form' );
            $form.find( '.single_add_to_cart_button' ).html('Vyberte farbu a veľkosť');
            $form.on( 'show_variation', function( event, variation, purchasable ) { 
                $form.find( '.single_add_to_cart_button' ).html('Add to cart');
            } );
        } )( jQuery );
    </script>
    <?php
}

Answer 2

您为什么不直接通过 WC 语言文件更改文本？如果您觉得很难做到，请使用 Loco Translate 插件。

关于颜色 - 只需在主题附加 CSS 文件中添加一些 CSS，例如：

.woocommerce div.product .cart .button.disabled {
    background: #ff0000;
}