Woocommerceで売り切れた商品は SOLD OUT と表示する方法

Tweet

Pocket

Woocommerceで登録した商品が、売り切れていても、売り切れとわからないのが難。

一覧で在庫切れを表示する

商品名の上に表示

// 在庫切れ title上に表示する場合
add_action( 'woocommerce_before_shop_loop_item_title', 'hogehoge_display_sold_out_loop_woocommerce' );
function hogehoge_display_sold_out_loop_woocommerce() {
    global $product;
    if ( !empty( $product ) && !$product->is_in_stock() ) {
        echo '<span class="soldout">' . __( 'SOLD OUT', 'woocommerce' ) . '</span>';
    }
}

商品部の下に表示

// 在庫切れ 下に表示する場合
add_action( 'woocommerce_loop_add_to_cart_link', 'hogehoge_display_sold_out_loop_woocommerce' );
function hogehoge_display_sold_out_loop_woocommerce(){
    global $product;
    if (!empty( $product ) &&  !$product->is_in_stock() ) {
        return '';//'<span class="soldout">' . __( 'SOLD OUT', 'woocommerce' ) . '</span>';
    }
}

商品ページで在庫切れを表示する

woocommerce_after_main_content action hookで、productの在庫を判定する。sold outならcssで隠しちゃう

// 在庫切れ 下に表示する場合
add_action( 'woocommerce_after_main_content', 'hogehoge_hide_soldout_form' );
function hogehoge_hide_soldout_form(){
    global $product;
    if (!empty( $product ) &&  !$product->is_in_stock() ) {
        echo '<div class="text-center"><span class="soldout">' . __( 'SOLD OUT', 'woocommerce' ) . '</span></div>';
?>
<style>
    .single-product div.product form.cart{ display:none;}
</style>
<?php
    }
}