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

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

Answer 2

为什么不直接通过 WC 语言文件更改文本？如果您觉得很难做到，请使用 Loco Translate 插件。关于颜色 - 只需在主题附加 CSS 文件中添加一些 CSS，例如：.woocommerce div.product .cart .button.disabled {&nbsp; &nbsp; background: #ff0000;}