How to display a detailed purchase interface for a specific product on the WordPress homepage

When we create e-commerce websites for clients, some friends want to see the purchase interface for a specific product directly upon opening the website homepage.

Typically, when we add products to the homepage via WooCommerce shortcodes or other builders, they display the product image and title. You need to click the image or title to enter the product detail page to see the purchase interface.

However, we can use the method below to directly display a specific product's detail page on the homepage, allowing users to select product variations and perform purchase operations right from the homepage.

1. Edit the homepage and insert a shortcode

[product_page id="99"]

In the code above, replace 99 with your own product ID.

2. Add the following code to the Theme's functions.php file to hide other miscellaneous product information

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