[Resolved] Display buy now buttons with options for variable products in search results

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Tagged: 

This topic contains 8 replies, has 3 voices.

Last updated by ryanS-7 4 years, 1 month ago.

Assigned support staff: emerson.

Author
Posts
#292744

Is there a way to display a "Buy Now" button with the relevant options for (each) variable product in the search results rather than a link to the product page?

#292757

Dear Ryan,
Sorry this is not possible. It's because WooCommerce Views relies on default WooCommerce plugin functionality for displaying variation products on listing pages like search results. By default, WooCommerce don't show relevant options but only displays a link to the product page (see screenshot) for users to see in details/select. WooCommerce Views follows this principle for display, since our shortcodes like the add to cart are calling native WooCommerce core functions.

There is already a feature suggestion under discussion for WooCommerce regarding this:
hidden link
Please let me know if you have some other questions. 🙂 Thanks.

Cheers,
Emerson

#292841

I found another potential solution to this issue, I removed my view and modified this code and it functioned the way I want from a basic WooCommerce "Shop" (catalog) page, but I'm not sure how to integrate it into Views:

Can you run PHP code in a view or is there another way to get this modified?

https://toolset.com/forums/topic/display-buy-now-buttons-with-options-for-variable-products-in-search-results/

(In the comments about 1/2 way down)

Open templates/content-product.php and replace

<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>

</a>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

with this:

<?php
/**
* ADD PRODUCT VARIABLE WITH ADD TO CART ON CATALOG PAGE
ADDED BY GW
**/
?>

<div class="catbox">

<?php
//ADD SHORT DESCRIPTION TO PRODUCT
add_action('woocommerce_after_shop_loop_item_title','woocommerce_template_single_excerpt', 5); ?>
<?php
/**
* woocommerce_after_shop_loop_item_title hook
*
* @hooked woocommerce_template_loop_rating - 5
* @hooked woocommerce_template_loop_price - 10
*/
do_action( 'woocommerce_after_shop_loop_item_title' );
?>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>

<?php
//ADD VARIATIONS BEFORE ADD TO CART

if($product->product_type == "variable"){
woocommerce_variable_add_to_cart();
} else {
woocommerce_template_loop_add_to_cart();
}

?>

</div>

This puts a description and the product variables with the add to cart button. If you don't want the description, then omit the part that is commented "Add short description to product".

#293578

Dear Ryan,
Thanks for the tip. I added this permanently as a new feature to WooCommerce Views. So any users don't need to deal with custom PHP. I sent you a copy of the development version so you can see how this works.
It is integrated as a new parameter to [wpv-woo-buy-or-select] shortcode. To output buy now buttons with options for variable products in search results:

Step1.) Backup your test site and database.
Step2.) Update your copy of WooCommerce Views with the one I provided you in the email.
Step3.) Go to your WP Archive View or Content Template or anything else that outputs your search results. Open it for editing.
Step4.) Click 'Fields and Views' to insert Views Shortcodes. Click 'WooCommerce' section to access WooCommerce Views shortcodes.
Step5.) Click 'Add to cart button - product listing pages' shortcode. A GUI pop for shortcode parameters will then appear ''Configure this shortcode: Add to cart button - product listing pages'

Step6.) Scroll down and you can find a new parameter added 'Display product variation options in product listing page? (Only applicable for WooCommerce "variation" products)'

Make sure this is checked. (see attached screenshot).

Step7.) Click "Insert shortcode" to insert this to your View,etc. The shortcode will then appear like this after being inserted:

[wpv-woo-buy-or-select add_to_cart_text="" link_to_product_text="" show_quantity_in_button="no" show_variation_options="yes"]

The new parameter added to display this variation options is 'show_variation_options'. It is set to 'yes' if you want variation options to be shown otherwise, it defaults to 'no'.

Example implementation code inside the 'Loop output' of this archive:

[wpv-layout-start]
	[wpv-items-found]
	<!-- wpv-loop-start -->
	<ul>
		<wpv-loop>
			<li>[wpv-post-body view_template="Loop item in Search product archive"]</li>
		</wpv-loop>
	</ul>
	<!-- wpv-loop-end -->
	[/wpv-items-found]
	[wpv-no-items-found]
		[wpml-string context="wpv-views"]<strong>No posts found</strong>[/wpml-string]
	[/wpv-no-items-found]
[wpv-layout-end]

Where the shortcode is found inside the 'Loop item in Search product archive' Content Template. This is the code:

<div class="[wpv-post-class]">
<h3>[wpv-post-link]</h3>
<p>[wpv-woo-product-image size="shop_catalog" output="" gallery_on_listings="no"]</p>
<p>[wpv-woo-buy-or-select add_to_cart_text="" link_to_product_text="" show_quantity_in_button="no" show_variation_options="yes"]</p>
  <p>[wpv-woo-product-price]</p>
</div>

Where show_variation_options is set to yes. See sample output in the attached screenshot. Please let me know how it goes. Thanks 🙂

Cheers,
Emerson

#293791

Hi Emerson,
Thanks for the update!

I didn't get your additional email with the dev version of the plugin though, can you send it again?

Also, I take it this will be built into the future public versions so that updates won't be a problem?

#293802

i too would like to implement this option. may i also get the development code?

#293822

Dear Ryan/Jared,
Sure, I created a temporary download link to the latest development version of WooCommerce Views here:
hidden link
Please confirm that you have download this and I will remove this link/file. For notes on this new feature, please refer to my reply here:
https://toolset.com/forums/topic/display-buy-now-buttons-with-options-for-variable-products-in-search-results/#post-293578
Yes this is now a permanent feature that will be built into stable/public versions so updating should not be an issue.
We will be releasing a stable version in the coming weeks. It will be available in the wp-types downloads page. For your update. Thanks 🙂

Cheers,
Emerson

#293839

i was able to download and implement. thank you so much!

#293933

I've downloaded it and got it working, thanks Emerson!