Skip to main content

WooCommerce - pre-checkout widgets

Dan Pooley
  • Updated

Shortcode widgets make it easy to add split pricing elements to your product pages and cart page.

The pre checkout widgets show your customers, early in their shopping experience, that they can split payments with our buy now pay later service and has been shown to increase basket sizes, driving additional revenue to your store.Here is how to use Shortcodes:

Available Shortcodes and Parameters

  1. april_product_bnpl_price

    This shortcode is used to show the instalment price, based on the product price (for product page), Whole cart price (cart page) or any custom price passed as parameter.

    Allowed Parameters

    • amount This is the main price, based on which, the instalment price would be shown (default value to be passed: productPrice), if you need to pass custom price, you can pass the amount without currency symbol, like 250
    • color This will be the color of instalment amount where it would get shown (default value to be passed: #fa5402)

    Screen_Shot_2020-06-30_at_2.38.02_pm.png

  2. april_bnpl_toggle

    This shortcode is used to show the payment instalment toggle, based on the total amount of products in the cart, or any custom price passed as a parameter. If the customer enables the toggle on the product page, it will then be reflected on the checkout page and under payment's section the payment plan option would be selected by default.

    Allowed Parameters

    • amount This is the main price, based on which, the instalment price would be shown (default value to be passed: cartAmount), if you need to pass custom price, you can pass the amount without a currency symbol, for example 250
    • color This will be the color of the payment instalment toggle where it would get shown (default value to be passed: #3A3CA6)

    image

    image

  3. april_product_bnpl_toggle

    This shortcode is used to show the payment instalment toggle, based on the product price (for product page), or any custom price passed as parameter. If the customer enables the payment toggle here then on the checkout page under payment's section the payment plan option would be selected by default. Also, if april_bnpl_toggle is used on the cart or any other page, the toggle for that shortcode toggle will be synced with this one.

    Allowed Parameters

    • amount This is the main price, based on which, the instalment price would be shown (default value to be passed: productPrice), if you need to pass custom price, you can pass the amount without a currency symbol, like 250
    • price_color This will be the color of instalment amount where it would get shown (default value to be passed: #fa5402)
    • toggle_color This will be the color of instalment toggle where it would get shown (default value to be passed: #3A3CA6)

    Screen_Shot_2020-06-30_at_2.39.11_pm.png

Guide to Use Shortcodes in Pages

1. Editable WP pages

For the editable pages, blog posts etc, the shortcode can be called easily like this

[april_product_bnpl_price amount="productPrice" color="#fa5402"]

[april_bnpl_toggle amount="cartAmount" color="#3A3CA6"]

[april_product_bnpl_toggle amount="productPrice" price_color="#fa5402" toggle_color="#3A3CA6"]

It can be directly used like this into the content area

image

2. Using WP Hooks

The shortcode can be added into a page using WordPress hooks, using add_action() function.

For example, to insert the Instalment Toggle(april_bnpl_toggle) into the cart page using the shortcode, you can use woocommerce_proceed_to_checkout hook like this:

add_action( 'woocommerce_proceed_to_checkout', 'april_instalment_offer_on_cart', 10 );
function april_instalment_offer_on_cart() {
	print do_shortcode('[april_bnpl_toggle amount="cartAmount" color="#3A3CA6"]');
}

Or, to insert the Instalment Toggle on Product page (april_product_bnpl_toggle) using shortcode, you can use woocommerce_single_product_summary hook like this:

add_action( 'woocommerce_single_product_summary', 'april_instalment_product_toggle', 10 );
function april_instalment_product_toggle() {
	print do_shortcode('[april_product_bnpl_toggle amount="productPrice" price_color="#fa5402" toggle_color="#3A3CA6"]');
}

To know more about this function, you can visit https://developer.wordpress.org/reference/functions/add_action/

Reference: https://docs.woocommerce.com/wc-apidocs

3. PHP Template File

In any PHP file, shortcode can be used by directly calling it like this

<?php print do_shortcode('[april_bnpl_toggle amount="cartAmount" color="#3A3CA6"]'); ?>
Powered by Zendesk