Woocommerce custom variations view?

449
December 10, 2016, at 3:37 PM

I have a custom variations view at product page. It is a simple colorboxes. I hide default woocommerce variations selects and than change it after click on box:

jQuery('.colors-list li').on('click', function(event){
       if(!jQuery(this).hasClass('active')){
           //change active square
           jQuery('.colors-list .active').removeClass('active');
           jQuery(this).addClass('active');
           //change active color label
           var colorName = jQuery(this).attr('colorname');
           jQuery('.checked-color').html(colorName);
           //change value of hided woocommerce variable switcher
           var colorSlug = jQuery(this).attr('colorval');
           jQuery('#pa_color').val(colorSlug).change();
              jQuery('.variations_form').trigger('woocommerce_variation_select_change');
       }
    });

But once I change only one select(color), for this reason I have an error in js(add_to_cart variation.js):

Uncaught TypeError: Cannot read property 'length' of null

Error at this:

if ( $( this ).val().length === 0 ) .

If I have only one variations - error does not occur. I tried to change second select with color to default value, but nothing changed.

Answer 1

Find a plugin Woocommerce Radio Buttons and make similar

Rent Charter Buses Company
READ ALSO
Link a href to other page selected dropdown option value

Link a href to other page selected dropdown option value

Here is a question, which google dont seem to have answersI have 2 pages : page-1 & page-2

360
Escaped HTML in summernote

Escaped HTML in summernote

I am using wysiwyg called summernote which values I send to server, where I purify it with HTML PurifierAfter that I save it to the DB (mysql)

429
FullCalendar show only weekDays

FullCalendar show only weekDays

Hello guys i'm trying to show a week timetable, i must show only the name of the date, without dateSuch as time table in agenda view

376
Promises - chaining resolves/rejects

Promises - chaining resolves/rejects

I have a function which returns a deferredpromise - jQuery's variant of deferreds however - but the same concept

295