javascript - 在颜色和尺寸之前更改“添加到购物车”按钮的文本

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中添加以下代码片段以实现上述任务-

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
}