Display WooCommerce Variable Product Options on Homepage

Hey Cody,

Which shortcode did you try using?

You might want to try this one:
[add_to_cart id=”99″]

For more information on WooCommerce shortcodes visit this link:
https://docs.woothemes.com/document/woocommerce-shortcodes/

The shortcode I tried using was [product id=”99″]

That [add_to_cart id=”99″] shortcode displays the product price and an “add to cart” button. It doesn’t display the variable options though.

It may not be a shortcode that I need to use to accomplish this. Maybe there’s another way or a plugin that can help to do it?

One way you could do it is to custom code it in your template file. (This isn’t a tested example – rather just some example code that you could work from as a starting point)

<?php

//Set the args for the new query
$custom_query_args = array(
	'p' => YOUR_PRODUCT_POST_ID,
	'post_type' => "product",
	'posts_per_page' => 1,
);	

//Create new query
$custom_query = new WP_Query( $custom_query_args );

//Loop through the product query
if ( $custom_query->have_posts() ) { 

	/**
	 * woocommerce_before_main_content hook
	 *
	 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
	 * @hooked woocommerce_breadcrumb - 20
	 */
	do_action('woocommerce_before_main_content');

	while( $custom_query->have_posts() ) : $custom_query->the_post(); 

		/**
		 * This assumed your theme has a template file called content-single-product.php containing the woocommerce layout for the normal product page
		 */
		woocommerce_get_template_part( 'content', 'single-product' );	

	endwhile;

	/**
	 * woocommerce_after_main_content hook
	 *
	 * @hooked woocommerce_output_content_wrapper_end - 10 (outputs closing divs for the content)
	 */
	do_action('woocommerce_after_main_content');

}

Thanks! I appreciate your help!

But this is a bit beyond what I know how do. I’m familiar with working with HTML & CSS and then using shortcodes and plugins. Are there any more simpler approaches? Or can you point me in the direction on how to get started working with that code above?

@cody109: This is exactly what I need. Googled whole morning with out a great solution yet.. Have you solved it already? Would you be so kind to share..

Some advance in the right direction is to install Woocommerce Add to cart Ajax for variable products plugin.
Then, with [add_to_cart id=”99″] shortcode is possible to add to cart.
But… the image of the product is not updated. I opened another threat with this in Variable product image update when variation choosed

Help appreciated!

After large hours on that, I found that there is not easy fix. The right direction is explained here (found googleing for “woocommerce variable product on landing page”):

https://wordimpress.com/build-woocommerce-powered-landing-pages/

The trick is to use [product_page id=”99″] shortcode in homepage and then customize the single product page template. I did it entirely via CSS with the help of Firebug.