WooCommerce Blocks：如何修改缺货产品展示的Read More按钮

你可以直接在Gutenberg产品块的过滤函数中增加库存判断逻辑，对按钮内容做替换即可，修改后的完整代码如下：

add_filter( 'woocommerce_blocks_product_grid_item_html', 'custom_product_grid_out_of_stock_button', 9999, 3 );
 
function custom_product_grid_out_of_stock_button( $html, $data, $product ) {
    // 判断产品是否缺货，缺货则替换按钮内容
    if( !$product->is_in_stock() ){
        $data->button = '<a class="button disabled wc-block-grid__product-add-to-cart" style="color:#000;background-color:#fff;border: 1px solid #ddd;pointer-events:none;">'.__('Out of stock', 'woocommerce').'</a>';
    }

   return "<li class=\"wc-block-grid__product\">
            <a href=\"{$data->permalink}\" class=\"wc-block-grid__product-link\">
               {$data->image}
               {$data->title}
            </a>
            {$data->price}
            {$data->rating}
            {$data->button}
         </li>";
}

注意事项 #

• 这段代码和你之前用来修改列表页按钮的代码不冲突，两段可同时放在主题/子主题的functions.php文件中，分别作用于Gutenberg产品块和默认商品列表页
• 代码中添加了pointer-events:none样式，避免缺货状态的按钮被用户误点击，你可以根据自身需求调整按钮的样式属性，匹配全站设计风格
• 修改后如果没有立即生效，清空网站缓存、CDN缓存以及浏览器缓存后再测试即可

内容的提问来源于stack exchange，提问作者Cristian Florea