我正在寻找解决我遇到的问题的方法......
我在Woocommerce中有产品,有变化。如果所有变化都缺货,我想更改添加到购物车按钮文本说“售完”并编辑按钮的CSS(更改它的颜色),然后在下拉列表中选择变体...
所以这是一个场景:
我转到了一个变量产品单页面。该产品有4种变化:
当前:“添加到购物车”按钮显示(灰色)并可在选择变体之前单击。出现警告,告知用户选择变体。当我从下拉列表中选择变体时,如果该变体中缺货,该按钮将显示为灰色。如果所有4种变体都缺货,则页面的初始加载仍会显示“添加到购物车”按钮显示为灰色,单击时则表示选择变体。
我想要的是:如果仍然有至少一个变体库存,标准的Woocommerce功能保持不变(添加到购物车可见,点击时会弹出警告,告诉他们选择变体)。如果库存中没有变化,则“添加到购物车”按钮会立即显示“已售罄”,并且显示为灰色。 (在我选择变体之前)。
我发现的问题是,当从下拉列表中选择变体时,所有现有代码都会更改添加到购物车按钮文本。我不知何故需要检查是否存在任何变化(在选择它们之前),然后如果所有变化都缺货,则将按钮文本更改为“售罄”,或者在首次加载时将其保留,并更改仅在选择缺货变化时才发送文字。
我希望这很清楚。谢谢!
===
根据要求,我尝试了以下代码:
add_filter( 'woocommerce_product_add_to_cart_text',
'customizing_add_to_cart_button_text', 10, 2 );
add_filter( 'woocommerce_product_single_add_to_cart_text',
'customizing_add_to_cart_button_text', 10, 2 );
function customizing_add_to_cart_button_text( $button_text, $product ) {
$sold_out = __( "Sold Out", "woocommerce" );
$availability = $product->get_availability();
$stock_status = $availability['class'];
// Only for variable products on single product pages
if ( $product->is_type('variable') && is_product() )
{
?>
<script>
jQuery(document).ready(function($) {
$('select').blur( function(){
if( '' != $('input.variation_id').val() && $('p.stock').hasClass('out-of-stock') )
$('button.single_add_to_cart_button').html('<?php echo $sold_out; ?>');
else
$('button.single_add_to_cart_button').html('<?php echo $button_text; ?>');
console.log($('input.variation_id').val());
});
});
</script>
<?php
}
// For all other cases (not a variable product on single product pages)
elseif ( ! $product->is_type('variable') && ! is_product() )
{
if($stock_status == 'out-of-stock')
$button_text = $sold_out.' ('.$stock_status.')';
else
$button_text.=' ('.$stock_status.')';
}
return $button_text;
}
这会更改按钮文字,但仅在选择了变体时 - 我需要检查所有变体是否缺货,然后立即更改文字。