When creating e-commerce websites for clients, some friends wish to see a specific product's purchase page directly upon opening the website homepage.
Typically, when we add products to the homepage via WooCommerce shortcodes or other builders, only the product image and title are displayed. Users need to click on the image or title to enter the product detail page before they can see the purchase interface.
However, we can use the following method to directly display a specific product's detail page on the homepage, allowing users to select product variations and complete purchases directly 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 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
}
}