Add variation price to WooCommerce swatches (using append)

24 views Asked by At

I use a WooCommerce variation swatches plugin to convert the default select dropdown to clickable text buttons.

Now I would like to add the price of that variation to the swatch. The plugin does not come with extensive documentation, so my thought was to use the jQuery append method to add the price to the swatch.

I managed to add all the variation prices to the swatches, but I cannot seem to find a way to show the proper variation price in the corresponding swatch. This is my code so far:

$('.variations_form').each( function() {
  jQuery(this).on('found_variation', function( event, variation ) {
    var price = jQuery('.woocommerce-variation-price .amount').html();
    
    $('.single-product [swatches-attr="attribute_pa_afmeting"] .cfvsw-swatches-option').each( function() {
        this.append('<span>' + price + '</span>');
    });
  });
});

It should look like this (see Afmeting section):

enter image description here

Thanks in advance!

0

There are 0 answers