WooCommerceで「セール(Sale)」アイコンを別の画像に置き換える方法

0

WordPress WooCommerce(WooCommerce)のショッピングモールで、個々の商品の割引価格を追加すると、セール(Sale)のアイコンが表示されます。

WooCommerce 割引のアイコン

上の図は、 AvadaのClassic Shopデモをインストールしたとき店ページのレイアウトを示しています。 通常価格より割引された商品の画像に「セール!」というフレーズが追加されています。 テキストになっているがすっきりするので大丈夫見えますね。

この「セール」のバッジを削除するか、独自に製作した「セール」の画像に変更する必要があります。 そのような場合、以下の内容を参考にして「セール」アイコンを削除したり、別のアイコンに置き換えてください。

「セール」のバッジを削除する

「割引」を表示アイコンが表示されないようにするには、次のコードをテーマの関数ファイルに追加します。

add_filter('woocommerce_sale_flash', 'woo_custom_hide_sales_flash');
function woo_custom_hide_sales_flash()
{
return false;
}

セールバッジを除去し、商品画像に直接割引表示をしたい場合に利用することができます。

チャイルドテーマを使用していない場合、テーマが更新されると、コードが初期化されるので、必ずチャイルドテーマを使用してください。

「セール」のバッジをユーザーのアイコンに変更する

「セール」のバッジを作成したアイコンに変えたい場合は、次のようなコードを関数ファイルに追加するようにします。

add_filter( 'woocommerce_sale_flash', 'my_custom_sales_badge' );
function my_custom_sales_badge() {
$img = '<span class="onsale"><img src="이미지_URL"></span>';
return $img;
}

そして、次のコードをstyle.cssファイルに貼り付けます。

span.onsale {
background: none;
box-shadow: none;
}

保存された後にページを更新し侵害します。 もし指定されたアイコンが正しく表示されない場合は、キャッシュプラグインのキャッシュを削除してください。

WooCommerce セールバッジ変更

テストしてみるとうまく動作しますね。 私だけの素敵な「セール」アイコンを使用したい場合に、この方法を使用することができます。

ボーナスヒント:「セール! "バッジのテキストを変更する

割引商品画像に追加されるフレーズは、「セール!」(Sale!)です。 このフレーズを変えたい場合は、次のようなコードを関数ファイルに追加します。

add_filter('woocommerce_sale_flash', 'vs_change_sale_content', 10, 3);
function vs_change_sale_content($content, $post, $product){
$content = '<span class="onsale">'.__( 'On Sale', 'woocommerce' ).'</span>';
return $content;
}

メモ:

コメントを残す

コメントを入力してください!
名前を入力してください