CODEWITHSUNDEEP
javascriptphpjquerywordpresswoocommerce
Frédéric SOLER
Frédéric SOLER

Reputation: 31

How to force "selected" attribute for variation options in Woocommerce?

I'm developing a Woocommerce 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 // woocommerce_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.com.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!

Upvotes: 1

Views: 12063

Answers (2)

Frédéric SOLER
Frédéric SOLER

Reputation: 31

For everyone who need to force the adding of the "selected" attribute on Woocommerce 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).

Upvotes: 2

zipzit
zipzit

Reputation: 3997

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 recommend 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 recommended, 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 woocommerce/templates folder. As explained in our documentation, all you have to do is to create a woocommerce folder within your theme’s directory, and in this folder duplicate the files you’d like to override. Please note that we strongly recommend using a child theme in order not to lose any modifications during your theme update.

Upvotes: 0

Related Questions