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

If you want to display a "detailed" variable product (as in it's single product page) on your home page, you need to:

1. Create a simple Wordpress page and make it your home page.

2. In that page, within the Wordpress content text editor, you will paste a woocommerce shortcode. In this shortcode you will set the correct post ID (or product Id) corresponding to the desired product to be displayed like in the example below:

   [product_page id="99"]
   

Now you will have the detailed product in your home page.

---

You may need to remove from this page some non desired details as the product tabs, the related products and some other things.

If you look to the single-content-product.php woocommerce template you will see that all sections are "hooked" (added) to the product page.

You can remove some using for example the following example that will remove:

• the product tabs section
• The upsells section
• The related products section

Here is that code example:

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

Code goes in function.php file of your active child theme (or active theme). Tested and works.