Page tree
Skip to end of metadata
Go to start of metadata

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:


Setting this up is quite simple. In the admin panel for the payment methods, each method that supports installments is marked with a dropdown selector with specific durations to choose from. For example, it could look like this:

When no annuity factors is enabled, the dropdown elements is marked red, so it is easy to see which payment and factor that is active. Selecting the bottom most factor dropbox will enable a new factor and the other will switch over to red instead.

Custom text

You could simply create a custom text by going to WordPress internal handler for Pages and create a custom string to show on the annuity factor page.

The principle looks like this:

And will show up on the product like this:

Custom text with filters

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);
                    }
                }
            );
        });
    });
  • No labels