Riaan, my fellow colleague at Automattic asked me if I had a snippet to display the variations dropdown select on the shop page for variable products so that customers can shop variable product directly from an archive page without having to visit the product page… and I didn’t have such a snippet. So I built it! (that was a long sentence right?)
The idea here is pretty simple, when you visit the shop page, or an archive page, the code checks the product type and if it’s equal to variable, the “Select Options” button is replaced by the regular add to cart button for variable products. In other words, it displays the dropdown selects for the product attributes and the add to cart button on the shop page for all variable products.
If you want to use this snippet, simply copy and place it in the functions.php file in your theme folder!
About the author Remi: Hey! My name is Rémi Corson, i'm a WordPress Expert Developer, i create high level themes and plugins, and i provide free stuff every week on this website!
Previous & Next Posts
Related Posts
10 Comments
Leave a reply
You must be logged in to post a comment.
Hi,
I added the code. I am using Storefront theme from woocommerce. I get a selector and quantity field etc but none of my selectors actually contain the variations. Any ideas?
in reference to my previous comment http://woocommerce-25337-54108-142519.cloudwaysapps.com/product-category/100-wool-felt/oranges
Hello Remi,
I copied full code but it’s breaking the full website and website is also not opening.
Could you please help me out for the same.
Thanks.
what error message do you have?
Hello Remi,
It is giving the following error:
Fatal error: Can’t use method return value in write context in functions.php on line 17
Thanks,
Sam
Hello Remi,
I tried your code.. but its showing me blank page.
I have a question,
Is it possible to show the varitions dropdown based on product id .If yes how can I achieve that.
Thanks
Hello Remi,
I have created a custom shortcode to show products based on id with an image, description,price and add to cart url which send the product directly to cart. Now I have created a varibale product, and added its id in my shortcode. Would you gudie me how can i show the variation options dropdown for that product and add to cart url which can send this product direcly to cart with all the variations seclected.
However I tried your code. And it breaks my website, simply a blank page is coming below header.
This is the my custom shortcode:-
function ayu_magazine_subscription_woo_products_shortcode ( $atts ) {
global $post; $thePostID = $post->ID;
$atts[ ‘ids’ ] = explode( “,”, $atts[ ‘ids’ ] );
extract ( shortcode_atts (array (
‘ids’ => $atts[ ‘ids’ ]
), $atts ) );
///////$atts[ ‘parent’ ] = explode( “,” $atts[ ‘parent’ ] );
///////extract( $atts );
$output.=”;
$output.=’
‘;
foreach($atts[‘ids’] as $productId)
{
// print_r($productId);
$product = wc_get_product( $productId );
if($productId==”5207″)
{
$title_head=”Digital”;
}elseif($productId==”5208″)
{
$title_head=”Print”;
} elseif($productId==”5206″)
{
$title_head=”Combo”;
}
else{
$title_head=$product->get_title();
}
$output.=”;
$output.=”.$title_head.”;
$output.=”;
/*$output.=’
‘. $product->get_image($size = “full”).’
‘;*/
$output.=’‘. $product->get_image($size = “full”).’‘;
$post_content = get_post($productId);
$content = $post_content->post_content;
$output.=”.apply_filters(‘the_content’,$content).”;
$output.=”;
$output.=”.$product->get_price_html().”;
$output.=”;
$output.=”;
$output.=”;
$output.= ‘Subscribe‘;
$output.=”;
$output.=”;
}
$output.=”;
return $output;
}
add_shortcode(‘magazine_subscription_products’, ‘ayu_magazine_subscription_woo_products_shortcode’);
Guide me how can i show variations options also through this code.
Thanks
Hi Remi, The options are not working for me.
If this is not working for you go to this link:
https://gist.github.com/corsonr/37e5430896df10252b0e03c60f00d6a3
Read user ‘lexzz’ comment.
Working for me now.
Hello Remi! Thanks for your hard work.I used your code and the result is that i get a drop-down phrase “choose” only and on the left a small text “brand” but i have weight as variable,the button add to cart or select options is missing also.Any idea would be helpful.Below is a pic of my site.Thank you!
https://postimg.org/image/a48x8saaf/