WooCommerceの商品バリアントをカスタマイズする方法
多様な製品オプションを提供する経験豊富なEコマースウェブサイトは、さまざまな顧客の好みに対応することで収益を最大化するために重要です。商品変數(shù)は、異なる色、サイズ、素材など、1つの商品に複數(shù)の選択肢を與えることができます。
WooCommerce 製品変數(shù)の追加をデフォルトでサポートしかし、競(jìng)爭(zhēng)の激しいeコマースの世界で顧客の目を引くためには、基本的な機(jī)能を超えて、よりパーソナライズされた魅力的なWooCommerceの商品バリエーションをカスタマイズする必要があります。
この記事では、より魅力的でユーザーフレンドリーなEコマースサイトを作成するために、プログラミングやプラグインを通してWooCommerceの商品変數(shù)をカスタマイズする方法を探ります。
![畫(huà)像[1]-総合ガイド:ECサイト體験を向上させるWooCommerce商品変數(shù)のカスタマイズ方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102111616705-image.png)
製品変數(shù)とは
製品バリエーションとは、サイズ、色、素材、その他の特性など、異なる屬性やオプションを持つ特定の製品のバージョンです。製品バリエーションにより、顧客は好みやニーズに基づいて購(gòu)入したい特定の製品構(gòu)成を選択することができます。
WooCommerceの商品変數(shù)をカスタマイズする理由
WooCommerceの商品変數(shù)をカスタマイズすることで、顧客のショッピング體験を大幅に向上させ、コンバージョンを増加させる可能性があります。
WooCommerceの商品変數(shù)をカスタマイズする主な利點(diǎn)は以下の通りです:
- より視覚的に魅力的でユーザーフレンドリーなインターフェイスを作成します。
- お客様一人ひとりの嗜好やニーズにお応えします。
- 類(lèi)似商品を複數(shù)のオプションで1つのリストにまとめることで、在庫(kù)を効率的に管理できます。
- ウェブサイトにおける商品の整理方法を改善します。
- 関連商品や同じ商品のプレミアムバージョンを推奨することで、アップセルやクロスセルを支援します。
- 検索エンジン最適化 (SEO).
- 商品管理プロセスを合理化し、商品オプションの追加、編集、削除を容易にします。
- 市場(chǎng)のトレンド、お客様の嗜好、新商品のリリースに対応し、ショップの競(jìng)爭(zhēng)力と関連性を維持します。
コードでWooCommerceの屬性付き可変商品を作成する方法
このセクションでは、カスタム関數(shù)を通して可変商品のIDを定義し、実際に商品変數(shù)を追加または作成するコードスニペットを共有します??蓧渖唐筏蜃鞒嗓工毪趣?、屬性/値配列、SKU、価格、在庫(kù)などの屬性を設(shè)定するために親商品が必要であることに注意してください。
コード?スニペットを見(jiàn)ると、データがフォーマットされた多次元配列に格納されていることがわかります。私が作成した関數(shù)は、屬性の値が既に存在するかどうかをチェックします。存在しない場(chǎng)合は、product屬性のエントリを作成し、親変數(shù)productに設(shè)定します。
関數(shù) create_product_variation( $product_id, $variation_data ){。
$product = wc_get_product($product_id);
$variation_post = array(
'post_title' => $product->get_title()、
'post_name' => 'product-'.$product_id.'-variation'、
'post_status' => '公開(kāi)'、
'post_parent' => $product_id.
'post_type' => 'product_variation'、
'guid' => $product->get_permalink()
).
$variation_id = wp_insert_post( $variation_post );
$variation = new WC_Product_Variation( $variation_id );
foreach ($variation_data['attributes'] as $attribute => $term_name )
{
$taxonomy = 'pa_'.$attribute;
if( ! taxonomy_exists( $taxonomy ) ){ ).
register_taxonomy(
$taxonomy, !
'product_variation'、
配列(
'hierarchical' => false、
'label' => ucfirst( $attribute )、
'query_var' => true、
'rewrite' => array( 'slug' => sanitise_title($attribute) )、
)
);
}
if( ! term_exists( $term_name, $axonomy ) )
wp_insert_term( $term_name, $axonomy ) ;
$term_slug = get_term_by('name', $term_name, $axonomy )->slug;
$post_term_names = wp_get_post_terms( $product_id, $taxonomy, array('fields' => 'names' ) );
if( ! in_array( $term_name, $post_term_names ) ); if( !
wp_set_post_terms( $product_id, $term_name, $taxonomy, true );
update_post_meta( $variation_id, 'attribute_'.$taxonomy, $term_slug ) ;
}
if( ! empty( $variation_data['sku'] ) )
$variation->set_sku( $variation_data['sku'] );
if( empty( $variation_data['sale_price'] ) ){。
$variation->set_price( $variation_data['regular_price'] );
} else {
$variation->set_price( $variation_data['sale_price'] ); } else {.
$variation->set_sale_price( $variation_data['sale_price'] );
}
$variation->set_regular_price( $variation_data['regular_price'] );
if( ! empty($variation_data['stock_qty'])){。
$variation->set_stock_quantity( $variation_data['stock_qty'] );
$variation->set_manage_stock(true);
$variation->set_stock_status('');
} else {
$variation->set_manage_stock(false);
}
$variation->set_weight('');
$variation->save();
}
create_product_variation()関數(shù)
この関數(shù)は、WooCommerce商品用の新しい商品変數(shù)を作成するために使用します。この関數(shù)を使用すると、WooCommerceショップの商品変數(shù)をプログラムで作成することができます。多數(shù)の商品を管理する場(chǎng)合や、作成プロセスを自動(dòng)化する必要がある場(chǎng)合に便利です。
WooCommerceの可変商品とその出力
WooCommerce Variable Productsは、色、サイズ、素材などの複數(shù)の変數(shù)の単一のリストを作成します。各変數(shù)にはユニークな屬性、在庫(kù)レベル、価格オプションがあり、顧客にパーソナライズされたショッピング體験を提供します。
WooCommerce Variable Productsをプログラムで操作するには、以下の主要なコードスニペットと関數(shù)を使用できます。 functions.php
ドキュメンテーション
- wc_get_product($product_id)この関數(shù)は、商品IDに基づいて商品オブジェクトを取得し、屬性、価格、在庫(kù)レベルなどの商品データにアクセスするために使用します。
- wp_insert_post($variation_post)WordPress では、新しい投稿を作成したり、既存の投稿を更新するための機(jī)能です。WooCommerceでは、新しい商品変數(shù)を作成するために使用できます。
- WC_Product_Variation($variation_id)特定の商品変數(shù)を表す WC_Product_Variation クラスのインスタンスを作成します。このオブジェクトを使用して、商品変數(shù)の屬性、価格、在庫(kù)レベルを取得または設(shè)定できます。
- 登録タクソノミー: ウェブサイトのコンテンツを整理?分類(lèi)するための新しいタクソノミーを作成します。WooCommerceでは、商品屬性はカスタムタクソノミーとして保存されます。
- wp_insert_termタクソノミーに新しいターム(用語(yǔ))を作成します。WooCommerceでは、商品の屬性値はタームとして保存されます。この関數(shù)はIF條件で使用され、ターム名が存在するかどうかをチェックし、存在しない場(chǎng)合は作成します。
- $post_term_namesこれは、特定の用語(yǔ)が商品の屬性値として設(shè)定されているかどうかをチェックするために使用されます。
- wp_set_post_terms投稿に関連付けられたタームを設(shè)定または更新します。WooCommerceでは、商品または商品変數(shù)に屬性値(ターム)を関連付けるために使用できます。
- update_post_meta投稿に関連付けられたメタデータを更新します。WooCommerceで商品変數(shù)の屬性データを保持するために使用します。
- $variation->set_sku: WC_Product_Variation クラスのメソッドで、商品変數(shù)の SKU (在庫(kù)管理単位) を設(shè)定します。SKU は、在庫(kù)管理に役立つ、各商品変數(shù)に固有の識(shí)別子です。
- $variation_data['sale_price']。特定の商品変數(shù)の販売価格を設(shè)定または更新するために使用できる、商品変數(shù)の販売価格を含む配列キー。
- $variation_data['stock_qty']。特定の製品変數(shù)の在庫(kù)レベルを設(shè)定または更新するために使用できます。
プラグインを使ってWooCommerceで屬性付きの可変商品を作成する方法
WooCommerceでは、追加のオプションや機(jī)能を提供するプラグインを使用して、製品の変數(shù)をカスタマイズすることができます。
WooCommerceの商品変數(shù)をカスタマイズするのに役立つ人気のプラグインをいくつかご紹介します:
- WooCommerceのバリエーションスウォッチ
- WooCommerce 追加バリエーション畫(huà)像
- YITH WooCommerce カラーとラベルのバリエーション
本稿では WooCommerceのバリエーションスウォッチ プラグインのデモ。
以下は、Variation Swatches for WooCommerceプラグインを使用して、屬性を持つWooCommerce可変商品を作成するためのステップバイステップガイドです:
ステップ1:プラグインのインストールと有効化
1.WordPressのダッシュボードに移動(dòng)します。
2. "に移動(dòng)します。プラグイン" > "プラグインのインストール".
3.検索 "WooCommerceのバリエーションスウォッチ".
![畫(huà)像[2] - 総合ガイド:ECサイト體験を向上させるWooCommerce商品変數(shù)のカスタマイズ方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102104621758-image.png)
4.クリック今すぐインストール"をクリックし、プラグインを有効にしてください。
ステップ 2: プラグインの設(shè)定
- " に移動(dòng)します。セットアップ".
![畫(huà)像[3] - 包括的なガイド:ECサイトのエクスペリエンスを向上させるためにWooCommerceの商品変數(shù)をカスタマイズする方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102105022495-image.png)
- スタイル、サイズ、形狀のオプションを調(diào)整するなど、必要に応じてプラグイン設(shè)定を行います。
ステップ 3: バリアブル商品の作成または編集
" に移動(dòng)します。お飾り" > "追加「をクリックして新しい製品を作成するか、既存の製品の下にある"コンパイラ".
で "製品データ"セクションで、ドロップダウンメニューから選択してください。バリアブル製品".
![畫(huà)像[4] - 総合ガイド:ECサイト體験を向上させるWooCommerce商品変數(shù)のカスタマイズ方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102105118409-image.png)
ステップ 4: 屬性の追加
- で "因果性"タブで、変數(shù)に使用したい屬性(例:色、サイズ)を追加します。
- をクリックします。プラス"、屬性の詳細(xì)を記入し、"にチェックを入れます。変數(shù)に対して「オプションボックス
![畫(huà)像[5] - 包括的なガイド:ECサイトのエクスペリエンスを向上させるためにWooCommerceの商品変數(shù)をカスタマイズする方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102105302150-image.png)
- クリック "プロパティの保存".
ステップ 5: 変數(shù)の生成
- " に移動(dòng)します。バリアント「をクリックします。すべてのプロパティから変數(shù)を作成"すべての可能な変數(shù)を自動(dòng)的に生成します。
![畫(huà)像[6] - 包括的なガイド:ECサイトのエクスペリエンスを向上させるためにWooCommerceの商品変數(shù)をカスタマイズする方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102105402481-image.png)
- 価格、在庫(kù)、畫(huà)像など、各変數(shù)の詳細(xì)を設(shè)定します。
![畫(huà)像[7] - 総合ガイド:ECサイト體験を向上させるWooCommerce商品変數(shù)のカスタマイズ方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102105409874-image.png)
ステップ 6: 変更の保存
- 製品変數(shù)を設(shè)定した後、"更新「またはポスト「変更を保存します。
![畫(huà)像[8] - 包括的なガイド:ECサイトのエクスペリエンスを向上させるためにWooCommerceの商品変數(shù)をカスタマイズする方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102105605106-image.png)
- これで、先ほど作成した変數(shù)を見(jiàn)ることができます。
製品変數(shù)用の推奨カスタムプラグイン
WordPressとWooCommerceを中心に、管理者がECサイトの商品変數(shù)をカスタマイズするのに役立つおすすめのプラグインをご紹介します:
- WooCommerceのバリエーションスウォッチ
- YITH WooCommerce カラーとラベルのバリエーション
- WooCommerce用WPBプロダクトスライダー
- WooCommerceの可変商品屬性の改善
- WooCommerce商品バリエーションマトリックス
WooCommerceの商品変數(shù)をカスタマイズするためのベストプラクティス
WooCommerceの商品変數(shù)をカスタマイズすることで、ユーザーエクスペリエンスを大幅に向上させることができます。商品変數(shù)のカスタマイズ機(jī)能をフルに活用するには、以下のルールに従うのがベストです:
入念な計(jì)畫(huà)と組織化製品の屬性と変數(shù)を明確にし、理解しやすくします。
各製品に変數(shù)を與えます。高畫(huà)質(zhì)でクリアな畫(huà)像製品のさまざまな側(cè)面を見(jiàn)せ、そのユニークな特徴を強(qiáng)調(diào)するようにデザインされています。
商品畫(huà)像がウェブ最適化ロードスピードが向上します。
一貫した命名規(guī)則これにより、類(lèi)似した屬性やオプション名をすべての製品で統(tǒng)一することができます。
正確な設(shè)定各商品の価格と在庫(kù)レベルを変動(dòng)させ、価格競(jìng)爭(zhēng)力と在庫(kù)情報(bào)を最新の狀態(tài)に保ちます。
定期的なテストとレビュー製品の変數(shù)やカスタマイズオプションが正しく機(jī)能し、使いやすいことを確認(rèn)します。
必要に応じてWooCommerceのプラグインや拡張機(jī)能を使用します。製品変數(shù)の強(qiáng)化.
製品変數(shù)に関する一般的な問(wèn)題の解決
WooCommerceの商品変數(shù)は、サイトの機(jī)能やユーザーエクスペリエンスに影響を與える問(wèn)題が発生することがあります。以下はWooCommerce商品変數(shù)に関する一般的な問(wèn)題とその解決策です:
問(wèn)題 1:変數(shù)が表示されない、または正しく表示されない
変數(shù)が設(shè)定されているにもかかわらず、正しく表示されないことがあります。この問(wèn)題にはさまざまな原因が考えられますので、以下の方法を試してみてください:
解決策
- 製品の屬性と変數(shù)が正しく設(shè)定されていることを確認(rèn)します。屬性は、"因果性"タブをクリックし、各製品の"バリアント"タブで変數(shù)を作成します。
![畫(huà)像[9] - 包括的なガイド:ECサイトのエクスペリエンスを向上させるためにWooCommerceの商品変數(shù)をカスタマイズする方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102110517566-image.png)
- テーマまたはプラグインの競(jìng)合.プラグインを1つずつ停止し、一時(shí)的にWordPressのデフォルトテーマに切り替えてテストしてください。問(wèn)題が解決した場(chǎng)合は、競(jìng)合するプラグインまたはテーマを特定し、適切な代替プラグインを見(jiàn)つけます。
問(wèn)題2:Ajaxカートへの追加機(jī)能が可変商品で動(dòng)作しない
可変商品のカートに入れる機(jī)能が正しく動(dòng)作しないことがあります。
解決策
- ウェブサイトのテーマがWooCommerceと互換性があること、可変商品のAJAX Add to Cart機(jī)能をサポートしていること、またはAJAX Add to Cartプラグインをインストールしていることを確認(rèn)してください。
![畫(huà)像[10] - 包括的なガイド:ECサイトのエクスペリエンスを向上させるためにWooCommerceの商品変數(shù)をカスタマイズする方法](http://gqxi.cn/wp-content/uploads/2025/01/20250102110710345-image.png)
- プラグインの競(jìng)合が問(wèn)題の原因になっていないか確認(rèn)してください。
問(wèn)題 3:変數(shù)の変更が保存できない
新しい変數(shù)設(shè)定を保存できないことがあります。
解決策
- サーバーがPHPのバージョンやメモリ制限など、WooCommerceの最低要件を満たしていることを確認(rèn)します。
- サーバーの追加
php.ini
ファイル內(nèi)の最大入力値
値を小さくすると、大量の変數(shù)を保存するときに問(wèn)題が発生する可能性があるからです。
課題4:変數(shù)の數(shù)が多いとパフォーマンスに問(wèn)題が生じる
製品が多數(shù)の変數(shù)を設(shè)定する場(chǎng)合、パフォーマンスの問(wèn)題が発生することがあります。
解決策
- 以下のようなキャッシュプラグインを使用してください。 WPロケット またはW3 Total Cacheを使用してウェブサイトのパフォーマンスを向上させます。
- 定期的にデータベースを最適化し、クリーンで効率的な狀態(tài)を維持します。
- WooCommerce Product Variations MatrixやVariation Swatches for WooCommerceなど、大量の変數(shù)を扱うことに特化したプラグインの使用を検討してください。
概要
カスタムWooCommerce商品変數(shù)は、開(kāi)発者がクライアントのEコマースウェブサイトの機(jī)能を強(qiáng)化するための強(qiáng)力なツールです。可変商品の柔軟性を活用することで、開(kāi)発者は顧客のために、より魅力的でパーソナライズされたショッピングサイトを作成し、ショッピング體験を向上させることができます。
お問(wèn)い合わせ | |
---|---|
チュートリアルが読めない?無(wú)料でお答えします!個(gè)人サイト、中小企業(yè)サイトのための無(wú)料ヘルプ! |
![]() カスタマーサービス WeChat
|
① 電話(huà):020-2206-9892 | |
② QQ咨詢(xún):1025174874 | |
三 Eメール:info@361sale.com | |
④ 勤務(wù)時(shí)間: 月~金、9:30~18:30、祝日休み |
この記事へのリンクhttp://gqxi.cn/ja/32372この記事は著作権で保護(hù)されており、必ず帰屬表示を付けて複製してください。
コメントなし