WooCommerceの製品ページをカスタマイズする方法

公開: 2021-04-15

WooCommerce製品ページをカスタマイズする製品ページをカスタマイズする方法をお探しですか？商品ページのデザインとユーザーエクスペリエンスは、売り上げにプラスの影響を与える可能性があります。これらのページはあなたの製品を最高の光で表示し、買い物客が「カートに追加」ボタンを押すように動機づけます。

優れた製品ページは、有益であり、すっきりとしたデザインである必要があります。このページはあなたのユニークなブランドも表現する必要があります。

ショップページをカスタマイズするには、さまざまな方法があります。組み込みのオプション、カスタムコードスニペット、およびプラグインを使用できます。

WooCommerce製品ページをカスタマイズする

WooCommerceでほとんどのカスタマイズが行われる2つのメインページは、ショップページと製品ページです。売り上げを伸ばし、購入プロセスの開始を最適化するには、それらをカスタマイズする必要があります。

コンバージョン率を向上させるために最高のカスタマーエクスペリエンスを提供することに重点を置いた、すっきりとしたデザインにすることをお勧めします。

この投稿では、プログラムで製品ページを編集するためのいくつかのソリューションを共有します。

まず、デフォルトの製品ページレイアウトを見てみましょう。

WooCommerce製品ページのレイアウト

製品ページの表示方法は次のとおりです。ページレイアウト

製品ページの出力を担当する2つの主要なWooCommerceファイルがあります。

single-product.php：現在のレイアウトに必要なテンプレートを作成します
content-single-product.php：このファイルはテンプレートのコンテンツを印刷します

子テーマを使用してテンプレートファイルを上書きできます。可能な場合は、テンプレートファイルを上書きする代わりに、WooCommerceフックを使用することもできます。これは、WordPressが推奨するベストプラクティスの1つです。

製品ページをカスタマイズする方法の実際的な例をいくつか見てみましょう。

フックを使用してWooCommerce製品ページを編集する

このセクションでは、フックを使用して製品ページをカスタマイズします。

1.要素を削除します

製品ページのさまざまな要素を削除するためのフックがいくつかあります。フックは特定の要素で機能します。

これは、正しいフック、関数、および優先度の値を使用する必要があることを意味します。

さまざまな要素を削除し、製品ページをカスタマイズするためのスクリプトを次に示します。それをコピーしてfunctions.phpファイルに貼り付けます。

// remove title

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );

// remove  rating  stars

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_rating', 10 );

// remove product meta

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );

// remove  description

remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_excerpt', 20 );

// remove images

remove_action( 'woocommerce_before_single_product_summary', 'woocommerce_show_product_images', 20 );

// remove related products

remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 );

// remove additional information tabs

remove_action('woocommerce_after_single_product_summary ','woocommerce_output_product_data_tabs',10);

2.新しい要素を追加する

独自の関数を作成することで、製品ページに新しいコンテンツを追加できます。これをコピーしてfunctions.phpファイルに貼り付ける必要があります。

 

add_action('woocommerce_after_single_product_summary','njengah_callback_function'); 

function njengah_callback_function(){    
    printf('     
    <h1> Hey there !</h1>  
   <div><h5>Welcome to my custom product page</h5>      
   </div>'); 
}

これが結果です：要素を追加

3.製品タブを編集します

woocommerce_product_tabsフィルターフックを使用して、[追加情報]セクションの新しいタブを削除、追加、並べ替え、または追加できます。

これは、[説明]タブとそのコンテンツを削除し、[レビュー]タブの名前を変更し、[追加情報]の優先度を最初に変更するスクリプトの例です。これをコピーしてfunctions.phpファイルに貼り付ける必要があります。

add_filter( 'woocommerce_product_tabs', 'njengah_remove_product_tabs', 98 );

function njengah_remove_product_tabs( $tabs ) {

    unset( $tabs['description'] );           // Remove the Description tab

    $tabs['reviews']['title'] = __( 'Ratings' );     // Rename the Reviews tab

    $tabs['additional_information']['priority'] = 5;       // Additional information at first

    return $tabs;

}

これが結果です：製品タブの編集

次のコードを使用して、新しいタブを作成できます。これをコピーしてfunctions.phpファイルに貼り付ける必要があります。

 

add_filter( 'woocommerce_product_tabs', 'njengah_new_product_tab' );

function njengah_new_product_tab( $tabs ) {         

            // Adds the new tab   

            $tabs['test_tab'] = array(

                        'title'    => __( 'New Tab Here!', 'woocommerce' ),

                        'priority'  => 50,

                        'callback'  => 'njengah_new_product_tab_content'

            );

            return $tabs;

}

function njengah_new_product_tab_content() {

            echo '<h2>New Tab Here!</h2><p>Here\'s your new product tab content</p>.';

}

これが結果です：新しいタブ

WooCommerceテンプレートファイルを上書きする製品ページをカスタマイズする

テンプレートファイルを上書きして、WooCommerce製品ページをプログラムで編集することもできます。

ただし、この方法は以前の方法よりもリスクが高いことに注意することが重要です。したがって、続行する前に、サイトの完全バックアップを作成することをお勧めします。

このプロセスは、子テーマの他のファイルをオーバーライドするのと似ています。

変更を加えるには、子テーマまたはプラグインを作成することをお勧めします。

1.メタ情報を編集します

このセクションでは、メタ情報を編集します。これは、対応するデータの印刷を担当するテンプレートファイルを使用する必要があることを意味します。 meta.phpファイルです。

このファイルはWooCommerceプラグインにあり、次のパスに従います：woocommerce / templates / single-product /meta.php。

次のステップは、子テーマファイルディレクトリを編集して、WooCommerceフォルダを作成することです。

その中にsingle-productという別のフォルダーを作成し、meta.phpファイルを貼り付けます：Child_theme / woocommerce / single-product / meta.php

これにより、meta.phpファイルを編集して、フロントエンドで変更を確認できます。

次のmeta.phpサンプルファイルは次のようになります。

SKUのラベルをIDに変更します
タグを[公開済み]に変更します
カテゴリラベルを削除します

global $product;
?>

<div class="product_meta">

            <?php do_action( 'woocommerce_product_meta_start' ); ?>

            <?php if ( wc_product_sku_enabled() && ( $product->get_sku() || $product->is_type( 'variable' ) ) ) : ?>

                        <span class="sku_wrapper"><?php esc_html_e( 'ID:', 'woocommerce' ); ?>

                                    <span class="sku"><?php echo ( $sku = $product->get_sku() ) ? $sku : esc_html__( 'N/A', 'woocommerce' ); ?>

                                    </span>

                        </span>

            <?php endif; ?>

            <?php echo wc_get_product_category_list( $product->get_id(), ', ', '<span class="posted_in">' . _n( '', '', count( $product->get_category_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php echo wc_get_product_tag_list( $product->get_id(), ', ', '<span class="tagged_as">' . _n( 'Published under:', 'Published under:', count( $product->get_tag_ids() ), 'woocommerce' ) . ' ', '</span>' ); ?>

            <?php do_action( 'woocommerce_product_meta_end' ); ?>

</div>

これが結果です：メタディスクリプションを変更する

2.CSSスクリプトを使用して製品ページをカスタマイズします

CSSコードを使用して、プログラムでWooCommerce製品ページを簡単に編集できます。

それはあなたが製品ページをスタイリングし、それにあなたのビジネスのルックアンドフィールを与えるのを助けます。

最初に行う必要があるのは、子テーマに.css拡張子の付いた新しいファイルを作成して、そこにCSSスクリプトを追加できるようにすることです。これにsingle-product.cssという名前を付けることができます。

このファイルを、functions.phpおよびstyle.cssファイルと同じレベルの子テーマのメインフォルダーに配置します。

子テーマのfunctions.phpファイルに次のスクリプトを貼り付け、必要に応じてCSSファイルの名前を置き換えます。

add_action( 'wp_enqueue_scripts', 'njengah_custom_product_style' );

function njengah_custom_product_style() {

if ( is_product() ){

wp_register_style( 'product_css', get_stylesheet_directory_uri() . '/single-product.css', false, '1.0.0', 'all' );

wp_enqueue_style('product_css');

}

}

if（is_product（））条件は、現在のページが製品ページであるかどうかをチェックします。これにより、CSSファイルが製品ページでない場合に不必要にロードされるのを防ぐことができます。

これで、カスタムCSSルールを使用して商品ページのスタイルを編集できるようになります。

結論

この投稿では、製品ページをカスタマイズする方法のいくつかを共有しました。ただし、変更を加える前に、訪問者がページをどのように操作したかに関するデータを提供するHotjarなどのツールを使用することをお勧めします。

また、AmazonやWalmartなどのオンライン小売業者が行っていることを確認することもできます。共通の機能を含めることで、ルックアンドフィールを模倣できます。

このページのカスタマイズについてサポートが必要な場合は、資格のあるWordPress開発者に連絡してください。

同様の記事

100以上のヒント、コツ、スニペットUltimate WooCommerce Hide Guide
WooCommerceフックリスト»グローバル、カート、チェックアウト、製品
プログラムで製品を作成する方法WooCommerce
行ごとのストアフロント商品数を変更する方法
キログラムあたりのWooCommerce製品価格を設定する方法
WooCommerceでチェックアウト後に注文の詳細を取得する方法
グーテンベルク対エレメンターどちらが優れたワードプレスページビルダー
WooCommerceでカスタムカテゴリページを作成する方法
WooCommerceチェックアウトページのスタイルを設定する方法
WooCommerceでログアウト時にカートをクリアする方法
続きを読むためにカートに追加ボタンを変更する方法WooCommerce
WooCommerceで商品画像プレースホルダーを削除する方法
WooCommerceに通貨を追加する方法[カスタム通貨]
WooCommerceの説明タブをデフォルトで開いたままにする方法
商品説明の見出しWooCommerceを非表示にする方法
WooCommerceで価格の前にテキストを追加する方法»価格の前にテキストを追加する
WooCommerceストアフロントテーマの商品ページを全幅に設定する方法
ページごとに商品を変更する方法WooCommerceストアフロントテーマ
WooCommerceの製品タイトルを取得する方法
WooCommerceストアフロントのサムネイルサイズを設定する方法