WooCommerceでセール価格をわかりやすくする方法

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

今回は価格の表示部分の見え方を変えたい時に使える方法です。

Woocommerceの価格表示の部分は通常このように表示されるのですが…

横線は入っているものの、どれくらいお得なのかちょっと伝わりづらいので
お得であることを視覚的に伝えるために限定価格のタグを料金の横に表示させるような表示に変えていきます。

目次非表示

完成形
テンプレートの作成
価格を表示するコード
セール価格がある時と通常価格のみの時の条件を分ける
その他の出力方法について

完成形

テンプレートの作成

まず最初にWooCommerceのテンプレートを編集する準備をします。

使用中のテーマの中に↓の階層でテンプレートファイルを作成してあげます。

〇〇（使用中のテーマ）/woocommerce/single-product/price.php

もっと詳しく知りたい方はこちらが参考になります。
WooCommerceの導入とカスタマイズ方法まとめ | BRISK

価格を表示するコード

PHP

//セールを設定している場合は割引価格が表示
<?php echo number_format($product->get_price()); ?>

//通常価格
<?php echo number_format($product->regular_price); ?> 

//セール価格
<?php echo number_format($product->sale_price); ?>

number_format()をつけることで、数字の表記を3桁のカンマ区切りにすることができます！

セール価格がある時と通常価格のみの時の条件を分ける

こちら↓を〇〇（使用中のテーマ）/woocommerce/single-product/price.phpに貼り付けてCSSを調整すると、、、

PHP

<div class="price-box">
  <?php if (!empty($product->sale_price)) : ?><!-- セール価格がある時 -->

    <?php if (!empty($product->regular_price)) : ?>
      <p class="price price--normal"><span class="price-tag">通常価格</span><span class="naname"><?php echo number_format($product->regular_price); ?>円</span><small>(税込)</small></p>
    <?php endif; ?>
    <p class="price price--sale"><span class="price-tag">限定価格</span><?php echo number_format($product->sale_price); ?>円<small>(税込)</small></p>

  <?php else : ?><!-- セール価格がない時 -->

    <?php if (!empty($product->regular_price)) : ?>
      <p class="price price--sale"><?php echo number_format($product->regular_price); ?>円<small>(税込)</small></p>
    <?php endif; ?>

  <?php endif; ?>
</div>

このような表示が完成します…!

if (!empty($product->sale_price)) :でセール価格がないときは
このようなシンプルな表示になるように設定しました。

ちなみに今回使ったCSSはこちら↓
デザインに合わせて編集しながら使ってみてください！

CSS

.price {
  display: flex;
  align-items: center;
  gap: 8px;
}

.price small {
  font-size: 50%;
  margin-top: 12px;
}

.naname {
  position: relative;
}

.naname::before {
  position: absolute;
  content: "";
  display: block;
  transform: rotate(10deg);
  background-color: #333;
  width: 100%;
  height: 1px;
  top: 50%;
  left: 0;
}

.price-tag {
  display: inline-block;
  font-size: 0.8rem;
  padding: 0 4px;
}

.price--normal {
  color: #333 !important;
}

.price--sale {
  color: #333 !important;
  font-size: 1.8rem !important;
}

.price--sale .price-tag {
  background-color: #F28C8C;
  color: #fff;
}