WooCommerce ショッピングモールで割引されている商品は、「セール」バッジが表示されます。 在庫がない商品について、在庫切れのラベルを表示すると、顧客が品切れになった商品をクリックして確認する手間を省くことができます。 この記事では、 WooCommerce 品切れのバッジを表示するいくつかの方法について説明します。
カスタムコードを使用して WooCommerce 品切れラベル表示する（Sold Outバッジ）
簡単なカスタムコードを追加して、在庫のない商品の「品質」バッジを表示できます。 使用しているテーマの関数ファイル（functions.php）に次のコードを追加します。 FTPに接続して / WP-コンテンツ/themes/テーマ名/functions.php ファイルを開いて、一番下にコードを追加してください。
// Add an out of stock overlay to product images when all variations are unavailable
//상품 재고가 떨어지면 상품 이미지에 Out of Stock 오버레이 추가
add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="sold-out-overlay">Sold Out</span>';
}
});
출처: https://launchwoo.com.au/add-a-sold-out-badge-to-out-of-stock-woocommerce-products/そしてスタイルシートファイル（style.css）に次のようなCSSを追加します。
.sold-out-overlay {
background: #654ea3; /* 배경색 - 적절히 수정 */
color: #fff; /* 텍스트 색상 - 적절히 수정 */
font-size: 14px;
font-weight: 600;
padding: 5px 10px;
position: absolute;
right: 50px;
top: 10px;
}チャイルドテーマをインストールしてチャイルドテーマの関数ファイルやスタイルシートファイルに上記のコードをそれぞれ追加してください。 チャイルドテーマ（子テーマ）を使用せずに、親テーマファイルに追加する場合、今後のテーマを更新時に変更したり、追加した内容が消えます。
アプリケーション： Avada テーマで在庫がない商品に品切れバッジを表示する
上記のコードを応用してテーマに合わせてコードを追加することができます。 例えば、 Avadaを使用している場合は、次のようなコードをテーマ関数ファイルに追加します。
//Add an out of stock overlay to product images in WordPress Avada Theme
add_action( 'woocommerce_before_shop_loop_item_title', function() {
global $product;
if ( !$product->is_in_stock() ) {
echo '<span class="onsale">품절!</span>';
}
});そして、スタイルシートファイルに次のようなカスタムCSSを追加します。
li.outofstock .onsale {
top: 20px !important;
background-color: #c88916;
}背景色は、適切に修正してください。
上記のようなコードを追加すると、 品切れ バッジが セール バッジと同様の形で商品画像にオーバーレイとして表示されます。
在庫切れのバッジがセールバッジと大きさや形、位置が似ており、一貫性があります。 背景色とテキストの色はCSSで好きなように変更できます。 （セールバッジをユーザーアイコンファイルに変更したい場合は、WooCommerceで「セール（Sale）」アイコンを別の画像に置き換える方法「を参考にしてください。）
他のテーマでも同様の応用が可能です。 WooCommerce 専用テーマである Flatsomeの場合確認してみる自主的にNew（新）バッジ、品切れバッジなどを表示する機能が提供されます。
WooCommerce ショッピングモールに品切れバッジを表示するSold Out Badge for WooCommerceプラグイン
別の方法として、プラグインを使用して、在庫切れの商品に「在庫切れ」バッジを表示できます。 FTPに接続してコードを入れる方法が面倒に感じられる場合は、この方法を利用できます。
WooCommerce 商品の在庫が枯渇すると、 Sold Out Badge for WooCommerceプラグインは、管理者が指定したテキストにされたサムネイルにバッジを表示します。
様々なバッジを表示することができるYITH WooCommerce Badge Managementプラグイン
上の図のように、様々な培地（割引、在庫なし、Sale、推薦、新商品、セール中など）を様々なスタイルで表示したい場合 YITH WooCommerce Badge Managementプラグインを使用することができます。
このプラグインは、無料版と有料版があり、無料版は機能が制限されています。 このためか、無料版のユーザー評価はあまり良くない方です。 しかし、有料版の場合は、ユーザーの評価がまともな方です。 まず無料版をインストールしてテストしてみてください。
コメントを残す