Page Comparison

The below installment viewer supports variable products by WooCommerce internal javascript hook found_variation. If you're interested in this, look in the bottom section.

In the plugin, you can activate a textblock (some would call it a widget, but it's not widget in WordPress terms) displayed on a single product page. In short terms, you can show up how much a customer could pay per month instead of the full price like this:

...

If you feel it is way too easy to use a custom page for the annuity factors, you could use the filer rbwc_part_payment_string too. It may possibly be easier to use this IF you have intentions to for example make custom translations on fly.

Variable prices

If your products has options that may change the price on fly, the plugin is using the found_variation hook, which is a WooCommerce hook that detectes changes in the display_price section. This hander is executed when the full page is loaded (onload) and looks like the code below. This is an EXPECTED behaviour for both plugins and WooCommerce, so if this section does not work properly it may be caused by the fact that your custom theme is lacking this support.

As the variable product changes the base price for the product, the plugin will make a backend call to resursbank_get_new_annuity_calculation, which is an AJAX call that only fetches the new price that the WooCommerce hook triggered. So in this case, parts of the "annuity factor string" will change instead of a complete replacement of the html block. Doing this, the part pay price will work seamlessly as the price is embedded in an exclusive element (r_annuity_price) on the page. Building your own custom installment data do support this too, if you use the [payFrom] shortcode.

jQuery('.variations_form').each(function () {
        jQuery(this).on('found_variation', function (event, variation) {
            var price = variation.display_price;
            getResursAjaxify(
                'post',
                'resursbank_get_new_annuity_calculation',
                {
                    'price': price
                },
                function (pricedata) {
                    if (typeof pricedata.price !== 'undefined') {
                        $rQuery('#r_annuity_price').html(pricedata.price);
                    }
                }
            );
        });
    });