I'm developing a Woomerce theme for one of my clients. For this project, I needed to clone the cart form (on product pages) in order to display it in another place on the page. I managed to do this with this piece of code :

$(document).on( 'found_variation', 'form.cart', function( event, variation ) { // found_variation // woomerce_variation_select_change
    $('.fixed-price-right').empty();
    $(this).clone().appendTo( '.fixed-price-right' ).each(function() {
        $('.product-fixi').scrollToFixed();             
    });     
});

First, on each variation changes, I empty the div in which the form clone will be displayed. Then, I clone it and made the container div fixed.

The problem is that I get everything except the selected variation value. Actually, the default selected value got this attribute : selected="selected". But this attribute is not applied to other options. You can see a living example here: /

If I submit from the cloned form, the product is added but without option.

The weird thing is that if I add manually (from web console) this attr in the right option of the cloned form and then add the product to the cart, the product is added with all the good options.

I don't really know how to force the adding of selected="selected" on each change. Can someone please help me to manage it?

Thanks everyone!

I'm developing a Woomerce theme for one of my clients. For this project, I needed to clone the cart form (on product pages) in order to display it in another place on the page. I managed to do this with this piece of code :

$(document).on( 'found_variation', 'form.cart', function( event, variation ) { // found_variation // woomerce_variation_select_change
    $('.fixed-price-right').empty();
    $(this).clone().appendTo( '.fixed-price-right' ).each(function() {
        $('.product-fixi').scrollToFixed();             
    });     
});

First, on each variation changes, I empty the div in which the form clone will be displayed. Then, I clone it and made the container div fixed.

The problem is that I get everything except the selected variation value. Actually, the default selected value got this attribute : selected="selected". But this attribute is not applied to other options. You can see a living example here: http://www.pro4mance..au/product/produrance-energy-gels-2/

If I submit from the cloned form, the product is added but without option.

The weird thing is that if I add manually (from web console) this attr in the right option of the cloned form and then add the product to the cart, the product is added with all the good options.

I don't really know how to force the adding of selected="selected" on each change. Can someone please help me to manage it?

Thanks everyone!

• javascript
• php
• jquery
• wordpress
• woomerce

• 1) remend this be posted on wordpress.stackexchange. 2) why the jQuery clone, why not just use the loop again to create the data a second time? – zipzit Commented Jun 29, 2015 at 17:17
• Thanks for you first remandation @zipzit. I will add the question there. Concerning the second point, what do you mean by "use the loop again"? Do you suggest to add it directly via php? – Frédéric SOLER Commented Jun 29, 2015 at 17:29

2 Answers 2

For everyone who need to force the adding of the "selected" attribute on Woomerce option variables, here's how I did it (using jQuery):

$('form.cart').on( 'change', '.variations select', function( event ) {
    $val=$(this).val();
    $(this).children('option').each(function(){
        $childVal = $(this).val(); 
        if ( $childVal == $val ) {
            $(this).attr('selected', 'selected');
        } else {
            $(this).removeAttr('selected');
        }   
    });
});

Feel free to improve it (that's maybe not the best way to do it).

I think you are going to have to look at the file cart.php within the WooCommerce templates folder. Use that to create your own custom cart file. Just run the loop a second time to get EXACTLY what you want, delivered directly from the server. ref: WordPress -- "the Loop" The actual line of code you are interested in is foreach ( WC()->cart->get_cart() as $cart_item_key => $cart_item ) { For the WooCommerce cart, that's the top of the "loop". Add that line again, with your own customization to match your desired second copy of the contents of the shopping cart...

I'd remend leaving jQuery out of it...

You obviously don't want to append directly within the WooCommerce package (in case of future updates)... (updates here!)

Wow, that seems very easy...

WooCommerce (and almost all add-ons) provides a templating system. This means that every element displayed on a WooCommerce page can be overridden.

This system’s advantage is that you can modify the display of an element without editing WooCommerce core files (which is absolutely NOT remended, if you do so, all your modifications will be lost at the next WooCommerce update, so just don’t do it). All templates are located in a woomerce/templates folder. As explained in our documentation, all you have to do is to create a woomerce folder within your theme’s directory, and in this folder duplicate the files you’d like to override. Please note that we strongly remend using a child theme in order not to lose any modifications during your theme update.