Add multiple dropdown selections to cart on submit?

  • Resolved IT Hertz

    (@it-hertz)


    2 years, 5 months ago

    I’m using the Product List Field plugin to populate dropdowns with WooCommerce products. I can add one dropdown selection to cart on submit, but I can’t figure out how to add products from multiple dropdowns to the cart on submit. I will have multiple dropdowns on one form either as multistep or via tabs.
    I’ve read through threads on adding multiple items to the cart in a url, such as this stackoverflow one, but all the solutions are in php and I can’t get them to work with my JS.

    This is the code I’m using to add a product to the cart from a single dropdown:

    add_action( 'wp_footer', 'custom_footer' );
function custom_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '1000' == event.detail.contactFormId ) {
	var data = document.getElementsByName('dropdown1');
	var product1 = data[0][data[0].selectedIndex].getAttribute('data-pro_post_id');
	location.replace('https://www.example.com/cart?add-to-cart=' + product1);
	}
}, false );
</script>
<?php
}

    I know there are premium plugins that integrate WooCommerce with CF7, and some may provide this functionality, but I’m obviously looking for a free solution.

Viewing 1 replies (of 1 total)
  • Thread Starter IT Hertz

    (@it-hertz)

    I have it working. Problem was syntax error. For working out my JS, I’ve been using this php snippet.

    I’m using a simple loop to combine dropdowns. My particular form has 6 dropdowns, so change the i < # to the number of dropdowns you want to add to the cart, plus 1. If the i loop limit is too high, the result will be an empty string, no url redirect, thus no products added. I coded this for use with the Product List Field plugin, which adds the “data-pro_post_id” attribute; you’ll need to change the code to work with whatever plugin you’re using to populate your dropdowns. Change other stuff as needed.
    This goes in your child theme’s functions.php:

    // Add multiple dropdowns to cart
add_action( 'wp_footer', 'custom_footer' );
function custom_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '1234' == event.detail.contactFormId ) {
	string = ''
	for (i = 1; i < 7; i++) {
	    data = document.getElementsByName('dropdown' + i);
	    product = data[0][data[0].selectedIndex].getAttribute('data-pro_post_id'); //extract product ID
	    string += product + ','; //concatenate IDs
	}
	location.replace('https://www.example.com/cart?add-to-cart=' + string.slice(0, -1)); //strip last comma
    }
}, false );
</script>
<?php
}

    A notice will show on the cart page for each product added, regardless of quantity — e.g., if user selects 3 of the same product via dropdowns on different steps/tabs, there will be 3 separate notices on the cart page. The View Cart button shows on every notice as well.
    To remove these unnecessary notices, you can add this to your child theme’s functions.php:
    add_filter( 'wc_add_to_cart_message_html', '__return_false' );

    Enjoy!

Viewing 1 replies (of 1 total)
  • The topic ‘Add multiple dropdown selections to cart on submit?’ is closed to new replies.