ITTI STAFF
BLOG

イッティWEBスタッフの制作ブログ

WooCommerce:長さ・幅・高さ・重さ・SKUを表示させる方法

WooCommerceの送料の項目に入力した長さ、幅、高さ、重さ、SKUコードを表示させます。

任意の場所表示させるため、グローバル変数を使います。

長さ、幅、高さ、重さの入力が無い場合は、非表示になるようにしています。

長さを表示させる

送料の「長さ」欄に入力した数値が表示されます。

PHP
<?php
  global $product;
  $attributes = $product->get_attributes();
  if ( $product->get_width() ) {
    echo '長さ' .$product->get_width(). 'cm';
  }
?>

必ず幅を入力しているのであれば下記でOKです。

PHP
<?php
global $product;
echo '長さ' .$product->get_width(). 'cm';
?>

幅を表示させる

送料の「幅」に入力した数値が表示されます。

PHP
<?php
  global $product;
  $attributes = $product->get_attributes();
  if ( $product->get_width() ) {
    echo '幅' .$product->get_width(). 'cm';
  }
?>

高さを表示させる

送料の「高さ」に入力した数値が表示されます。

PHP
<?php
  global $product;
  $attributes = $product->get_attributes();
  if ( $product->get_height() ) {
    echo '高さ' .$product->get_height(). 'cm';
  }
?>

重さを表示させる

送料の「重さ」に入力した数値が表示されます。

PHP
<?php
  global $product;
  $attributes = $product->get_attributes();
  if ( $product->get_weight() ) {
    echo '重さ' .$product->get_weight(). 'kg';
  }
?>

SKUを表示させる

SKUは必ず入力するため、ifは不要でしょう。

PHP
<?php
  global $product;
  echo $product->get_sku();
?>

ショップページに長さ・幅・高さを表示させる場合

サンプルとして下記の図のように、ショップページの商品ごとに高さ、幅、長さを表示させてみます。

functions.phpに下記のコードを記載します。

functions.php
add_action('woocommerce_after_shop_loop_item', 'show_product_dimensions_loop', 20);
function show_product_dimensions_loop() {
global $product;
if (!($product instanceof WC_Product)) { return; }
$height = $product->get_height();
$width = $product->get_width();
$length = $product->get_length();
if (!empty($height) || !empty($width) || !empty($length)) {
$dimension_unit = esc_html(get_option('woocommerce_dimension_unit', 'cm'));

echo '<div class="product-dimensions">';

if (!empty($height)) { printf( '<div class="dimension-row"><span class="dimension-label">%s</span> %s%s</div>', esc_html__('高さ:', 'woocommerce'), esc_html($height), esc_html($dimension_unit) ); }

if (!empty($width)) { printf( '<div class="dimension-row"><span class="dimension-label">%s</span> %s%s</div>', esc_html__('幅:', 'woocommerce'), esc_html($width), esc_html($dimension_unit) ); }

if (!empty($length)) { printf( '<div class="dimension-row"><span class="dimension-label">%s</span> %s%s</div>', esc_html__('長さ:', 'woocommerce'), esc_html($length), esc_html($dimension_unit) ); }

echo '</div>';
} }

以上となります。

WooCommerce制作、運営でお困りの方はお気軽にご相談くださいね。

新しい記事

新宿のWEB制作会社イッティ

新宿のWEB制作会社イッティ