Variable Product Popup

Additionally I’ve set up the variations to be displayed as radio buttons. I tried to select the CSS for the exclusive ownership option, but haven’t been able to link to the check box when someone clicks on it. Please let me know and thank you!

Hi @dcweb23,

Unfortunately, there is a compatibility issue with the latest update of WordPress and the “click” popup trigger won’t be working as expected due to that. We’ll be soon releasing an update regarding this.

However, regarding your query, I’m afraid, by reading both your replies, I’m a bit lost. I suppose from the latest reply, you are looking to make the popup appear once the variable radio button is clicked ie “exclusive ownership” button? Right?

There isn’t any out of the box integration with WooCommerce. So if a button already has an action to direct to the checkout page or cart page etc and if a popup is triggered on that same button it would disable the redirection.

Are you looking to load a common popup once these radio buttons are clicked? or are you are looking to add different popup for each button?

Could you please explain a bit about the workflow you are looking so that we could advise better. Looking forward to your response.

Kind Regards,
Nithin

Hi Nithin,

Thank you for your response.

Yes it’s the exclusive ownership option. I already set up a popup to collect additional customer information and email before purchase. The customer’s information must be collected to allow add to cart and redirect action once the popup form fields were filled out and submitted.

I need to collect this information before someone can purchase that product option.

I’m just not sure if it’s possible to make it work in a variable product. I set it up before with grouped product but that was a different CSS selector.

Hi @dcweb23

I hope you are doing well.

I just made a test using a variable product and using the class:

.single_add_to_cart_button

However, when redirecting to the cart it would be empty once the WooCommerce add to cart wouldn’t be the trigged.

I’m just not sure if it’s possible to make it work in a variable product. I set it up before with grouped product but that was a different CSS selector.

Which selector did you use before and we can run some tests?

Best Regards
Patrick Freitas

Ok sure. I used:
#product-4626 > td.woocommerce-grouped-product-list-item__quantity > input
As the CSS selector

Hi @dcweb23

Thank you for the selector.

I made some tests on my website but couldn’t find a good option using selectors.

Maybe can be done using the Woo woocommerce_add_to_cart action, I pinged our developers to check what is the best option for this.

We will update once hearing back from the developers.

Best Regards
Patrick Freitas

Hi @dcweb23

I hope you are doing well.

For variable products can you try this workaround?

Add a hidden button on your product description:

<button style="display:none" id="id-custom-button">popup</button>

Define your PopUp to trigger using the ID: #id-custom-button

And install this code as a mu-plugin:

<?php
function add_to_cart_pop_up( $key, $id) { 
    $product = wc_get_product( $id );
    if($product->is_type('variable')){
      add_action( 'wp_footer', function(){
      	echo '<script>
      		(function($){
      			$(function(){
      			    $("#id-custom-button").trigger("click");
      			});
      		})(window.jQuery);
      	</script>';
      }, 21 );
    }
};
add_action( 'woocommerce_add_to_cart', 'add_to_cart_pop_up', 10, 2 );

If you are not familiar with mu-plugins, you can find a guide here:
https://premium.wpmudev.org/docs/getting-started/download-wpmu-dev-plugins-themes/#installing-mu-plugins

This will trigger the PopUp as soon the product is added to the cart using the action woocommerce_add_to_cart.

The if will make sure only trigger for variable products:

if($product->is_type('variable')){

Let us know if you need any further help on this.
Best Regards
Patrick Freitas