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

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

}

Answer 2

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

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

.woocommerce div.product .cart .button.disabled {

    background: #ff0000;

}