How to display a single variable product page on homepage in Woocommerce

Question

In Woocommerce I have a single variable product set with different attributes. I can see the product like the following image (without its attributes variations), in archive pages as shop:

When I see this product in it single product page, I am able to see the following details:

So I will like to see all details on the homepage so that the buyer can select their variation and add to cart without opening further into the product.

I have tried to edit the woocommerce single-product.php file but i didn't get it working.

Is there a way to get those the full details?

Any help is appreciated.

Answer 1

如果您想在主页上显示“详细”可变产品（如单个产品页面），您需要：

1. 创建一个简单的 Wordpress 页面并将其设为您的主页。

2. 在该页面中，在 Wordpress 内容文本编辑器中，您将粘贴woocommerce 短代码。在此短代码中，您将设置与要显示的所需产品相对应的正确帖子 ID（或产品 ID），如下例所示：

   [product_page id="99"]
   

现在，您将在主页上看到详细的产品。

您可能需要从此页面中删除一些不需要的详细信息，例如产品标签、相关产品和其他一些内容。

如果您查看 single-content-product.php woocommerce 模板，您将看到所有部分都“挂钩”（添加）到产品页面。

您可以使用例如以下将删除的示例删除一些内容：

• 产品标签部分
• 加售部分
• 相关产品部分

这是代码示例：

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
    }
}

代码位于活动子主题（或活动主题）的 function.php 文件中。测试和工作。