ウーコマース

WooCommerceテンプレートと商品ページをカスタマイズ

更新日
2023年6月30日

[aioseo_eeat_author_tooltip]

[aioseo_eeat_reviewer_tooltip]

今日、Woocommerceは画期的な柔軟性とカスタマイズオプションにより、eコマース業界に旋風を巻き起こしています。eコマース業界では高い評価を得ており、現在、 eコマース市場シェアの27%を。

しかし、既成のテンプレートや商品ページだけでは、すべてのビジネスのニーズを満たすことはできません。WooCommerceには、豊富なカスタマイズオプションが用意されています。.

ストアのパフォーマンスを向上するには、最適なカスタマイズ手法を実践する必要があります。カスタマイズの重要な要素は、商品ページとテンプレートにあります。適切に実装されたカスタマイズ戦略は、カート放棄率を削減します。

ほとんどの顧客はオンラインストアを訪問するため、成功を確実にするために、商品やテンプレートのナビゲーションとカスタマイズをより簡単にする必要があります。

この記事では、WooCommerce テンプレートをカスタマイズする方法、製品テンプレートを編集する方法、製品ページをカスタマイズする方法を説明します。

コンテンツ

ストアオーナーにとって WooCommerce テンプレートをカスタマイズすることが重要なのはなぜですか?

WooCommerceには豊富なカスタマイズオプションがあります。チェックアウトからショップページ、カテゴリーページ、サンキューページなど、あらゆるものをカスタマイズできます。これにより、あなたのストアは他のストアよりも目立ちますが、真に独自性を出すには、 WooCommerceテンプレートをが効果的かもしれません。

競合他社とは異なる外観と雰囲気を持つサイトを作るには、サイトのデフォルトページを編集することが不可欠です。また、デフォルトのテンプレートをカスタマイズすることで、ビジネスの優位性を高めることもできます。

使用するテンプレートはカスタマイズ可能で、オンラインストアに機能や詳細を追加できます。これらの機能を活用することで、買い物客に優れたカスタマーエクスペリエンスを提供できます。そのため、WooCommerceテンプレートの編集方法を深く理解し、eコマースストアを常に最新の状態に保つことが重要です。WooCommerceテンプレートの編集方法については、以下をお読みください。

読む： WooCommerceでデビットカードを更新するにはどうすればいいですか？

PHPでWooCommerceテンプレートをカスタマイズする

プラグインとコードスニペットを使えば、ウェブサイトのほぼあらゆる側面を編集できます。WooCommerceを使えば、テンプレートをプログラムで編集できます。

プログラムでテンプレートをカスタマイズするには、次の 2 つの方法があります。

テンプレートの上書き
フック付き

どちらの方法も有効ですので、ご自身にとって最も簡単な方法をお選びください。それぞれの方法の基本的な違いを理解した上で、いつ使い分けるかを判断してください。

フックとテンプレートの上書き

フックを使用すると、アクションとフィルターを使って簡単な変更を加えることができます。テンプレートファイルを上書きすることで、より複雑なカスタマイズが可能になります。.

また、特定のテンプレートファイルで使用されているフックでテンプレートファイルを上書きしないように注意してください。テンプレートを上書きすると、そのファイルで使用されているフックが置き換えられ、無効になります。

ニーズを把握した上で、ニーズに合った方法を選択してください。

探索： WooCommerceのおすすめ商品テーブルプラグイン

WooCommerceテンプレートを上書きして変更する

複雑なカスタマイズを行う場合は、フックを使用するよりもテンプレートを上書きする方が適切です。

functions.php の編集も同様です。テーマファイルではなく、WooCommerce のメインテンプレートファイルを編集する必要があります。

「プラグイン」>「プラグインエディター」をクリックし、ドロップダウンメニューから「WooCommerce」を選択し、テンプレートを選択してテンプレートファイルを表示します。

このセクションには、編集が必要なすべての主要ファイル（archive-product.php、content-product-cat.php、content-product.php）が含まれています。カート、チェックアウト、メールなど、複数の場所でテンプレートファイルを編集することも可能です。

WooCommerceテンプレートファイルには変更できる項目が多数あります。これにより、サブディレクトリとフォルダの両方をカスタマイズできます。

次のステップは、カスタマイズされた WooCommerce テンプレートを確認することです。

WooCommerce テンプレートにショートコードを追加します。

ショートコードはWooCommerceコードをカスタマイズする一般的な方法です。WordPressとWooCommerceでは、テンプレートを編集するためのショートコードが豊富に用意されています。.

以下は、WooCommerceのマイアカウントダッシュボードをすべての商品ページに表示するスクリプトです。これをsingle-product.phpファイルに追加して更新してください。

if ( ! defined( 'ABSPATH' ) ) {
exit; // 直接アクセスした場合は終了
}
get_header( 'shop' );
while ( have_posts() ) :
the_post();
wc_get_template_part( 'content,' 'single-product' );
endwhile; // ループ終了。
do_action( 'woocommerce_sidebar' );
$t= '

My Account

$t.= do_shortcode(“[woocommerce_my_account]”); $t.=” ”; echo $t; get_footer( 'shop' );

製品ページをプレビューするとダッシュボードが表示されます。

顧客が以前に購入したことがあることを確実にする

WooCommerceテンプレートは、ロイヤルティの高い顧客に割引を提供するように変更することもできます。ここでも、コードをコピーしてsingle-product.phpページに貼り付けます。

get_header( 'shop' );
while ( have_posts() ) :
the_post();
wc_get_template_part( 'content', 'single-product' );
endwhile; // ループ終了。
$current_user = wp_get_current_user();
if ( wc_customer_bought_product( $current_user->user_email, $current_user->ID, $product->get_id() ) ):
echo '

♥ こんにちは ' . $current_user->first_name . '、これは以前購入したことがあります。このクーポンを使ってもう一度購入しましょう: PURCHASE_AGAIN_21

';
endif;
get_footer( 'shop' );

顧客は、すでに購入した製品を閲覧した後、チェックアウトメッセージが表示されます。

探索： Magento と WooCommerce：2023 年により良い選択肢はどちらでしょうか?

フックを使用してWooCommerceテンプレートを編集する

テンプレートファイルの上書きが面倒な場合、フックはWooCommerceテンプレートのカスタマイズにも役立ちます。フックをアクションやフィルターとしてウェブサイトに追加することで、機能を素早く拡張し、簡単な変更を加えることができます。

さらに、WooCommerceフックを使ってストアのテンプレートを編集することもできます。この方法は、シンプルなカスタマイズにのみ推奨されます。複雑な変更を加える場合は、テンプレートを上書きすることをお勧めします。

「外観」>「テーマエディター」で functions.php ファイルを開き、アクションまたはフィルターフックを含むコードスニペットをコピーして貼り付けます。

WooCommerce テンプレートの編集に使用できるフックの例をいくつか示します。

単一の商品画像に情報を追加する

画像の上に製品に関する追加情報を表示する場合は、functions.php に次のコードを挿入します。

// カスタム関数を追加します
function quadlayers_before_single_product() {
echo '

今週はすべて25%オフです!

';
}
// アクションを追加します
add_action( 'woocommerce_before_single_product', 'quadlayers_before_single_product', 11 );

単一製品ページではこのメッセージが表示されます。

プラグインでWooCommerceテンプレートをカスタマイズする

コーディングに苦労していませんか？問題ありません。WooCommerceテンプレートはプラグインを使ってカスタマイズできます。業界が成長するにつれて、テンプレートをカスタマイズするためのプラグインは無数に登場しています。

最も効率的なプラグイン「 Edit WooCommerce Templates」。テーマのテンプレートをカスタマイズできる、使いやすい無料プラグインです。数回クリックするだけで、いつでもテンプレートを入れ替えたり、デフォルトに戻したりできます。

ここでは、テンプレートをカスタマイズし、ストアのパフォーマンスを向上できる追加の WooCommerce プラグインをいくつか紹介します。.

WooCommerce Custom Fields :このプラグインを使用すると、ユーザーは WooCommerce 製品ページ、チェックアウトページなど内に固有のフィールドを作成できます。
WooCommerce Customizer : WooCommerce テンプレート専用のこのプラグインは、ストアにさまざまな追加のカスタマイズオプションを提供します。
WooCommerce 単一製品ページカスタマイザー:このプラグインを使用すると、WooCommerce 内の単一製品ページの外観を変更できます。

知っておくべきこと： WooCommerce 予約を設定する方法?

WooCommerce 製品ページのカスタマイズ: なぜ重要なのか?

WooCommerceの商品ページのカスタマイズは非常に重要ですので、見逃すことはできません。WooCommerceの商品ページをカスタマイズすることのメリットは無限大です。これにより、顧客の懸念を解消し、独自のプレゼンテーションを確立し、顧客満足度を向上させることができます。

製品ページでカスタマイズを活用することで得られる重要なメリットは次のとおりです。

コンバージョンに最適化されたページ

カスタマイズされた商品ページは、コンバージョン率の向上につながります。検索やフィルタリング機能など、様々なオプションを実装できるため、顧客はより簡単に商品を見つけ、購入することができ、購入の妨げとなるポイントが少なくなります。

もっと魅力的に

カスタマイズの目的は、多くの場合、顧客を惹きつけ、魅力を高める商品ページのデザインとレイアウトです。魅力的な画像、魅力的な商品説明、そして美しい要素によって、顧客の関心を喚起することができます。

UXを強化できる

デザインの選択は明確で直感的、読み込み速度は速く、ナビゲーションは簡単で、顧客に素晴らしい体験を提供することを心がけてください。そうすることで、コンバージョン率が向上し、リピーターを獲得できるでしょう。

知っておくべきこと：最高のWooCommerce製品アドオン

商品ページをカスタマイズする方法

ストアのビジュアルの魅力を常に最新の状態に保つには、商品ページをカスタマイズする必要があります。商品ページを効果的にカスタマイズするための3つの重要な方法をご紹介します。

プラグインでWooCommerceの商品ページを強化する

WooCommerceを使えば、簡単にオンラインストアを作成できます。商品ページをカスタマイズできるプラグインなど、ストアの機能を強化するための様々なプラグインが用意されています。

WooCommerce プラグインを使用して製品ページをカスタマイズするのは簡単です。

プラグイン

WooCommerce 製品アドオン: このプラグインを使用すると、製品ページにチェックボックス、ドロップダウン、テキストボックスを追加できます。
WooCommerce 360º Image : このプラグインを使用すると、画像を好みに合わせて回転できます。
WooCommerce の製品ビデオ: このプラグインを使用すると、製品ビデオを追加できます。
WooCommerce のサイズチャート:このプラグインを使用すると、製品にサイズチャートを簡単に追加できます。
製品の推奨事項:このプラグインを使用すると、製品ページに推奨事項セクションを追加できます。

関連： 40以上のベストWooCommerceプラグイン[無料+有料]

WooCommerceの商品ページをCSSでカスタマイズする

CSS を使って WooCommerce 商品をカスタマイズすることで、オンラインストアを目立たせ、顧客にユニークな体験を提供できます。商品ページを変更するには、CSS コードを記述してください。

ログインしたら、「外観」→「カスタマイズ」に進みます。

黒のCTAのCSSコード

このコードを追加 CSS に追加すると、デフォルトの CTA の色が黒に変わります。

button.alt、input[type=”button”].alt、input[type=”reset”].alt、input[type=”submit”].alt、.button.alt、.widget-area .widget a.button.alt {
背景色: #1d1a1a;
境界線色: #333333;
色: #ffffff;
}

青色のCTAのCSSコード

さらに、黒を青に変換するには、次の CSS コードを使用します。

button.alt、input[type=”button”].alt、input[type=”reset”].alt、input[type=”submit”].alt、.button.alt、.widget-area .widget a.button.alt {
背景色: #4f5dd5;
境界線色: #333333;
色: #ffffff;
}

WooCommerceの商品ページにカスタムコードを追加する

技術的な知識が豊富であれば、カスタムコードを使用して製品ページのカスタマイズを簡単に実装できます。

学ぶ： WooCommerce ストアにとって FAQ が重要な理由

ステップ1: グローバルテンプレートを確立する

まず、すべての製品ページで使用されるグローバルテンプレートを確立する必要があります。

先頭にテンプレートの名前を記載した PHP コメントから始めます。

template-custom-product.php ファイルを作成し、有効化したテーマに配置します。

<?php /*Template Name: Customize Product*/ ?>

このテンプレートはWooCommerceのデフォルトの商品ページを使用しています。コードはこちらです。

$params = 配列 ('posts_per_page' => 5、'post_type' => 'product');
$wc_query = 新しい WP_Query ($params);
?>
have_posts() : ?>
have_posts()):
$wc_query->the_post(); ?>

基本的なテンプレートです。十分な機能を備えていますが、WooCommerceを使えばもっと多くのことができます。

WooCommerce には、幅広い情報を含む製品表示ページをカスタマイズするための機能がいくつか用意されています。

the_permalink() – 商品の URL を表示します。the_content
() – 商品の完全な説明を表示します。the_excerpt
() – 商品の簡単な説明を表示します。the_ID
() – 商品の ID を表示します。the_title
() – 商品名を表示します。the_post_thumbnail
() – 商品画像を表示します。

ステップ2: 有効化したテーマのfunctions.phpに機能を追加する

WooCommerce製品のカテゴリを表示する

カテゴリーは商品を分類する場所です。テーマを有効化し、functions.php ファイルにこのスニペットをインポートして、商品のカテゴリーを指定してください。

if ( ! defined( 'ABSPATH' ) ) {
exit;
}
global $product;
?>

get_sku() || $product->is_type( 'variable' ) ) ) : ?>
get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>

get_id(), ', ', ' ' . _n( 'カテゴリ:', 'カテゴリ:', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', ' ' ); ?>
get_id(), ', ', ' ' . _n( 'タグ:', 'タグ:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', ' ' ); ?>

製品カテゴリーのサムネイルを表示する

すべての商品カテゴリーにサムネイルが表示されます。カスタム商品表示を設定する準備ができたら、テーマのtemplate.phpまたはfunctions.phpに以下のコードを追加してください。

function cwresponse_get_thumbnail(){
if(is_page(205)){
$args = array(
'tax_query' => array(
array(
'taxonomy' => 'product_cat',
'field' => 'slug'
)
)
);
$random_products = get_posts( $args );
foreach ( $random_products as $post ): setup_postdata( $post );
?>

”>

endforeach;
wp_reset_postdata();
}
}
add_action('wp_footer', 'cwresponse_get_thumbnail');

説明見出しを削除します。

Woocommerce を使用する場合は、すべての製品タブの説明フィールドのチェックを外し、functions.php ファイルを編集して次のコードを追加します。

add_filter( 'woocommerce_product_description_heading', '__return_null' );

製品タイトルを削除

WooCommerce の単一製品タブのタイトルを削除する方法は次のとおりです。このコードを functions.php に入力します。

アクションを削除します( 'woocommerce_single_product_summary'、
'woocommerce_template_single_title' );

ステップ3：WooCommerceテンプレートの変更

以下のコードをcontent-single-product.phpファイル、またはwoocommerce/templates配下のsingle productディレクトリに挿入してください。functions.phpを使用することをお勧めします。

<div class="images"><?php if ( has_post_thumbnail() ) { $image_caption = get_post( get_post_thumbnail_id() )-> post_excerpt; $image_link = wp_get_attachment_url( get_post_thumbnail_id() ); $image = get_the_post_thumbnail( $post->ID, apply_filters( 'single_product_large_thumbnail_size', 'shop_single' ), array( 'title' => get_the_title( get_post_thumbnail_id() ) ) ); $attachment_count = count( $product->get_gallery_attachment_ids() ); if ( $attachment_count > 0 ) { $gallery = '[product-gallery]'; } else { $gallery = ''; } echo apply_filters( 'woocommerce_single_product_image_html', sprintf( ' <a href="%s" itemprop="image" class="woocommerce-main-image zoom" title="%s" data-rel="prettyPhoto' . $gallery . '">%s</a> ', $image_link, $image_caption, $image), $post->ID ); } else { echo apply_filters( 'woocommerce_single_product_image_html', sprintf( '<img src="%s" alt="%s" /> ', wc_placeholder_img_src(), __( 'プレースホルダー', 'woocommerce' ) ), $post->ID ); } ?><?php do_action( 'woocommerce_product_thumbnails' ); ?></div>

あるいは、単純に CSS コードを記述することもできます。

.images { float: 右! 重要; }

ついに完了です。

さらに詳しく: WooCommerce に配送を追加するにはどうすればいいですか?