如果 WooCommerce 中的所有变体都缺货，则显示已售罄的灰色按钮 [英] Display a Sold out greyed button if all variations are out of stock in WooCommerce
问题描述
我在 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 );函数customizing_add_to_cart_button_text( $button_text, $product ) {$sold_out = __( "Sold Out", "woocommerce");$availability = $product->get_availability();$stock_status = $availability['class'];//仅适用于单个产品页面上的可变产品if ( $product->is_type('variable') && is_product() ){?><脚本>jQuery(document).ready(function($) {$('选择').blur(函数(){if( '' != $('input.variation_id').val() && $('p.stock').hasClass('out-of-stock') )$('button.single_add_to_cart_button').html('<?php echo $sold_out; ?>');别的$('button.single_add_to_cart_button').html('<?php echo $button_text; ?>');console.log($('input.variation_id').val());});});<?php}//对于所有其他情况(不是单个产品页面上的可变产品)elseif ( !$product->is_type('variable') && !is_product() ){如果($stock_status == '缺货')$button_text = $sold_out.'('.$stock_status.')';别的$button_text.=' ('.$stock_status.')';}返回 $button_text;}这改变了丁顿文本，但只有在选择变体时 - 我需要检查所有变化是否缺货，然后立即更改文本.
当所有变体都缺货时，以下代码将为可变产品显示一个非活动的灰色售罄"按钮:
//单变量产品页面 - 售罄功能add_action('woocommerce_single_product_summary', 'replace_single_add_to_cart_button', 1);函数 replace_single_add_to_cart_button() {全球$产品；//对于可变产品类型if( $product->is_type( '变量' ) ) {$is_soldout = true;foreach( $product->get_available_variations() 作为 $variation ){if( $variation['is_in_stock'] )$is_soldout = false;}如果( $is_soldout ){remove_action('woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20);add_action('woocommerce_single_variation', 'sold_out_button', 20);}}}//已售罄按钮替换函数已售出_按钮(){全球 $post, $product;?><div class="woocommerce-variation-add-to-cart changes_button"><?phpdo_action('woocommerce_before_add_to_cart_quantity');woocommerce_quantity_input(数组('min_value' =>apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),'max_value' =>apply_filters('woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product),'输入值' =>isset( $_POST['quantity'] ) ?wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),) );do_action('woocommerce_after_add_to_cart_quantity');?><a class="single_sold_out_button 按钮 alt 禁用 wc-variation-is-unavailable"><?php _e( "Sold Out", "woocommerce" );?></a><?php}
代码位于活动子主题(或活动主题)的 function.php 文件中.经测试有效.
I have products in WooCommerce, with variations. If ALL variations are out of stock, I want to change the Add to Cart button text to say "Sold out" and edit the CSS of the button also (change it's color) BEFORE a variation is selected in the dropdown...
So here's a scenario:
I goto a variable product single page. The product has 4 variations:
CURRENTLY: The "add to cart" button displays (greyed out) and can be clicked before a variation is selected. An alert appears telling the user to select a variation. When I select a variation from dropdown, the button is greyed out if out of stock in that variation. If all 4 variations are out of stock, the initial load of the page still shows add to cart button greyed out and on click says to select a variation.
WHAT I WANT: If there is AT LEAST one variation still in stock, the standard WooCommerce functionality stays (Add To Cart visible, with alert popping up when clicked to tell them to select a variation). If NO variations are in stock, the Add to Cart button says "sold out" straight away, and is greyed out. (Before I select a variation).
The problem I'm finding is that all the existing code out there to change the add to cart button text is done when a variation is selected from the dropdown. I somehow need to check if ANY of the variations are in stock, (before they are selected) and then either change the button text to "sold out" if ALL variations are out of stock, or leave it at first load, and change the text only when the out of stock variation is selected.
I've tried the following code:
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;
}
This changes the buton text, but only when variations are selected - I need to check if all variations are out of stock and then change the text straight away.
The following code will display an inactive greyed "sold out" button for variable products, when all variations are out of stock:
// Single variable produccts pages - Sold out functionality
add_action( 'woocommerce_single_product_summary', 'replace_single_add_to_cart_button', 1 );
function replace_single_add_to_cart_button() {
global $product;
// For variable product types
if( $product->is_type( 'variable' ) ) {
$is_soldout = true;
foreach( $product->get_available_variations() as $variation ){
if( $variation['is_in_stock'] )
$is_soldout = false;
}
if( $is_soldout ){
remove_action( 'woocommerce_single_variation', 'woocommerce_single_variation_add_to_cart_button', 20 );
add_action( 'woocommerce_single_variation', 'sold_out_button', 20 );
}
}
}
// The sold_out button replacement
function sold_out_button() {
global $post, $product;
?>
<div class="woocommerce-variation-add-to-cart variations_button">
<?php
do_action( 'woocommerce_before_add_to_cart_quantity' );
woocommerce_quantity_input( array(
'min_value' => apply_filters( 'woocommerce_quantity_input_min', $product->get_min_purchase_quantity(), $product ),
'max_value' => apply_filters( 'woocommerce_quantity_input_max', $product->get_max_purchase_quantity(), $product ),
'input_value' => isset( $_POST['quantity'] ) ? wc_stock_amount( $_POST['quantity'] ) : $product->get_min_purchase_quantity(),
) );
do_action( 'woocommerce_after_add_to_cart_quantity' );
?>
<a class="single_sold_out_button button alt disabled wc-variation-is-unavailable"><?php _e( "Sold Out", "woocommerce" ); ?></a>
</div>
<?php
}
Code goes in function.php file of your active child theme (or active theme). Tested and works.
这篇关于如果 WooCommerce 中的所有变体都缺货，则显示已售罄的灰色按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
