独立站用户要求
Woocommerce外贸独立站，客户的情况比较特殊，产品会有很多暂时无货的，需要展示出来，但又要方便用户看产品。可变产品属性比较多，下拉会有大部分无货的选项，所以要清晰明了的展示。
WooCommerce本身已经提供一个设置，允许在产品或可变体产品缺货时完全删除它们，使其在商店页面或产品页面上不再可见。然而，如果您的商店计划重新上架这些产品，最好不要将其完全删除。将这些缺货产品的可见性更改为可见，可以改善客户体验，即使没有货，但可以让客户看到有不同的选项可用。
WooCommerce删除缺货产品
要删除缺货产品，前往“WooCommerce > 设置 > 产品 > 库存设置”部分。在那里，您会找到”售罄可见性”复选框。如果您想要完全隐藏这些产品，包括从目录和下拉列表中移除它们，请选中此框。
WooCommerce禁用缺货的可变产品选项
我们只需要一小段代码，就可以检查产品库存并将变体标记为不可用状态。然后，WooCommerce会自动将下拉列表中的选项显示为禁用状态。
以下是实现此效果的代码片段，添加到子主题Function.php文件中。
function ace_grey_out_variations_when_out_of_stock( $is_active, $variation ) {
if ( ! $variation->is_in_stock() ) {
$is_active = false;
}
return $is_active;
}
add_filter( 'woocommerce_variation_is_active', 'ace_grey_out_variations_when_out_of_stock', 10, 2 );
我们还可以在所有禁用选项后面添加文本”(缺货/Out of stock)”，这样就可以一目了然了，继续添加以下代码片段。这需要使用一些JavaScript来实现。当然，您可以根据需要在代码片段中更改文本。
function ace__add_text_out_of_stock_variations() {
wp_add_inline_script( 'wc-add-to-cart-variation', "
var outOfStockText = ' (out of stock)'
jQuery('.variations_form').on('woocommerce_update_variation_values', function() {
jQuery(this).find('option:disabled').text(function(i, v) {
return v.replace(outOfStockText, '') + ' ' + outOfStockText
})
})
" );
}
add_action( 'wp_enqueue_scripts', 'ace__add_text_out_of_stock_variations' );
效果展示
