独立站用户要求

Woocommerce外贸独立站,客户的情况比较特殊,产品会有很多暂时无货的,需要展示出来,但又要方便用户看产品。可变产品属性比较多,下拉会有大部分无货的选项,所以要清晰明了的展示。

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' ); 

效果展示

WooCommerce 如何禁用缺货的属性选项WooCommerce 如何禁用缺货的属性选项

相关文章