WordPressのトップページで特定の製品の詳細購入画面を表示するにはどうすればよいですか？

私たちがクライアント向けにECサイトを制作する際、サイトのトップページを開いたらすぐに特定の単品の購入画面が見たいというご要望をいただくことがあります。

通常、WooCommerceのショートコードや他のビルダーを使用してトップページに商品を追加すると、商品画像とタイトルが表示され、それらをクリックして商品詳細ページに移動し、初めて購入画面を見ることができます。

以下の方法を使用することで、トップページに直接商品の詳細ページを表示し、トップページで商品のバリエーションを選択して購入操作を行うことが可能になります。

1、トップページを編集し、ショートコードを挿入する

[product_page id="99"]

上記コードの「99」は、ご自身の商品IDに置き換えてください。

2、テーマのfunctions.phpファイルに以下のコードを追加し、商品のその他の雑多な情報を非表示にする

add_action( 'template_redirect', 'remove_after_single_product_section_on_home', 1 );
function remove_after_single_product_section_on_home(){

    // On home page only
    if( is_front_page() ) {
        remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_product_data_tabs', 10 ); // Product tabs
        remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_upsell_display', 15 ); // Upsells
        remove_action( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20 ); // Related products
    }
}