Current version 2.
For legacy Version 1 documentation follow this link.
The APPROVE Woocommerce integration plugin provides a methodology for Wordpress developers to add the APPROVE lender network finance rates, lease cart, and lease application functionality into Woocommerce product pages and cart.
Each Woocommerce cart implementation is unique to each site, so instead of providing a single solution that may not work for your site, we addressed the crux of the problem and created resources for Wordpress developers. Users of the APPROVE Woocommerce integration plugin will be able to customize its look and location as needed by the site.
{warning} THIS PLUGIN REQUIRES THE INSTALLATION OF THE APPROVE WORDPRESS PLUGIN PLEASE DOWNLOAD, INSTALL AND ACTIVATE IT FIRST. (https://github.com/KWIPPED/approve-wordpress-plugin)
For experienced programmers:
Donload, install and active the APPROVE Wordpress plugin. (https://github.com/KWIPPED/approve-wordpress-plugin)
Download the APPROVE Woocommerce Integration plugin from the dist folder in GitHub (https://github.com/KWIPPED/approve-woocommerce-integration-plugin)
Install the plugin into Wordpress
Place a button in Woocommerce product, cart and mini cart pages
Simple Product Button Example:
<button
approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-product="simple"
>Apply For Financing</button>Variable Product Button Example:
<button
approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-product="variable"
>Composite Product Button Example:
<button
approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-product="composite"
>Cart Button Example:
<button
type="button"
approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-cart>Apply for Financing</button>Teaser Rate Tag Example:
<span approve-function="teaser_rate" ></span>/mo Apply For FinancingFor a full list of APPROVE tags and functionality please visit the APPROVE documentation.
In Wordpress navigate to the plugins page. Click on "Add New", then "Upload Plugin"
Customization of the Woocommerce cart depends on the Wordpress and Woocommerce standards. For information on how to customize the Woocommerce cart, visit https://css-tricks.com/how-to-customize-the-woocommerce-cart-page-on-a-wordpress-site/.
Once the customization template is available, visit the Wordpress template editor. Point to the "Appearance menu" and select "Theme Editor". Select the theme you are currently using (e.g. TwentyTwenty) and navigate to the customizable Woocommerce cart page. This page will be located under woocommerce, cart in your theme, and it will be named cart.php.
In the Woocommerce cart code, place the APPROVE button wherever it may be visible to your clients. In this example, I will place it next to the UPDATE CART button delivered in the standard woocart.
Here is the button code...
<button type="button" approve-woocommerce-cart approve-function="hosted_app">
Apply for Financing<BR>
As low as <span approve-function="teaser_rate" approve-woocommerce-cart></span>/mo
</button>Style the button as you wish.
Here is the button code (as an example) in cotext withing the standard delivered Woocommerce woocart...
<?php if ( wc_coupons_enabled() ) { ?>
<div class="coupon">
<label for="coupon_code"><?php esc_html_e( 'Coupon:', 'woocommerce' ); ?></label> <input type="text" name="coupon_code" class="input-text" id="coupon_code" value="" placeholder="<?php esc_attr_e( 'Coupon code', 'woocommerce' ); ?>" /> <button type="submit" class="button" name="apply_coupon" value="<?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?>"><?php esc_attr_e( 'Apply coupon', 'woocommerce' ); ?></button>
<?php do_action( 'woocommerce_cart_coupon' ); ?>
</div>
<?php } ?>
<button type="submit" class="button" name="update_cart" value="<?php esc_attr_e( 'Update cart', 'woocommerce' ); ?>"><?php esc_html_e( 'Update cart', 'woocommerce' ); ?></button>
<button type="button" approve-woocommerce-cart approve-function="hosted_app">
Apply for Financing<BR>
As low as <span approve-function="teaser_rate" approve-woocommerce-cart></span>/mo
</button>
<?php do_action( 'woocommerce_cart_actions' ); ?>Woocommerce includes standard pages and steps for the creation of products. Use those steps and place out button wherever you may find best for your design. The followin example is one way to do it, but not the only way. Note: We provide two styles of buttons. One for a simple product and one for variable products. For more information on simple and variable products see Woocommerce documentation.
In the Wordpress administration page click on Producs, then Edit the product for which you would like a finance button. In the section named "Product short description" select Text on the right side of the screen and paste the following code:
For a simple product:
<button
approve-function="hosted_app"
approve-action="add_to_app"
approve-woocommerce-product="simple"
>
Apply For Financing</button>For a variable product:
<button
approve-function="hosted_app"
approve-action="add_to_app"
approve-woocommerce-product="variable"
>
Apply For Financing</button>Woocommerce provides rendering hooks which can be used to insert code just about anywhere. The following code snippets can be used to customise the product pages, as well as the woocommerce cart. This code is usually injected into the functions.php file of the selected theme. (Appearance->Theme Editor->functions.php)
add_action('woocommerce_after_add_to_cart_button','approve_additional_button');
function approve_additional_button(){
//Get the product ID from the page.
$product_id = get_the_ID();
//Get the product using the id.
$product = wc_get_product($product_id);
//Simple product...
if($product->get_type()=="simple"){
echo '<button
type="button"
class="single_add_to_cart_button button alt"
style="background:#4b6e80;display:none;"
approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-product="simple"
>
Finance as low as <span approve-function="teaser_rate" ></span>/mo
</button>
';
}
//Variable product...
if($product->get_type()=="variable"){
echo '<button
type="button"
class="single_add_to_cart_button button alt"
style="background:#4b6e80;display:none;"
approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-product="variable"
>
Finance as low as <span approve-function="teaser_rate" ></span>/mo
</button>
';
}
}
Please note this will serve all product types. This particular example contains custom woocommerce product information searches later discussed under the Technical Reference section of this document. In summary, variables such as kwipped_approve.variable_product_alternate_model_search provides our Woocommerce integration plugin with information about where to look for the needed data.
add_action('woocommerce_after_add_to_cart_button','approve_additional_button');
function approve_additional_button(){
//if( current_user_can( 'administrator' ) ){
global $product;
?>
<script>
window.kwipped_approve.variable_product_alternate_model_search = ['.heading-text','h1'];
window.kwipped_approve.variable_product_alternate_price_search = ['.entry-summary','.price'];
window.kwipped_approve.composite_product_alternate_model_search = ['.heading-text','h1'];
window.kwipped_approve.composite_product_alternate_price_search = ['.composite_price','ins','.amount'];
( function ( $, window, document, undefined ) {
$( '.composite_data' ).on( 'wc-composite-initializing', function( event, composite ) {
composite.actions.add_action('active_step_changed',function(){
window.kwipped_approve.update_approve_woocommerce_tags();
});
});
}) ( jQuery, window, document );
</script>
<button approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-product="<?php echo esc_attr( $product->get_type() ); ?>"
class="button approve-button"
type="button"
style="display:none;"
>Finance as low as
$<span approve-function="teaser_rate"></span>/mo
</button>
<?php
//}
}add_action( 'woocommerce_after_cart_totals', 'approve_after_checkout_form' );
function approve_after_checkout_form(){
global $product;
?>
<button approve-function="embedded_app"
approve-action="add_to_app"
approve-woocommerce-cart
class="button approve-button"
type="button"
style="display:none;background:#276FAE;border-color:#0B569A;margin-top:10px;"
>Finance as low as$<span approve-function="teaser_rate" approve-woocommerce-cart></span>/mo
</button>
<?php
}The Woocommerce buttons will for information in standard places on the page. It was designed with the standard Woocommerce templating in place, and it will not work well if the template has been highly customized. The following are the standard places the APPROVE Woocommerce integration tag will look for information.
property='og:title'"
property='product:price:amount'Example:
<meta property="og:title" content="Product 1" />
<meta property="product:price:amount" content="6375"/>window.kwipped_approve.simple_product_alternate_model_search
window.kwipped_approve.simple_product_alternate_price_searchExample:
window.kwipped_approve.simple_product_alternate_model_search = ['.heading-text','h1'];
window.kwipped_approve.simple_product_alternate_price_search = ['.entry-summary','.price'];The plugin will look for each of the items provided in the array, in order, and take the content of the found object.
window.kwipped_approve.variable_product_alternate_model_search
window.kwipped_approve.variable_product_alternate_price_searchExample:
window.kwipped_approve.variable_product_alternate_model_search = ['.heading-text','h1'];
window.kwipped_approve.variable_product_alternate_price_search = ['.example','.price'];The integration plugin has no default methodology to find composite product infomrmation. You must utilize the alternate tags provided programatically by you. The names of the variables needed are the following:
window.kwipped_approve.variable_product_alternate_model_search
window.kwipped_approve.variable_product_alternate_price_searchExample:
window.kwipped_approve.composite_product_alternate_model_search = ['.heading-text','h1'];
window.kwipped_approve.composite_product_alternate_price_search = ['.example','.price'];Our code needs to know that the composite product was updated when the user makes choices. The following code should be dropped in the composite product page, and it will alert our plugin that something has changed when the user interacts with the page.
$( '.composite_data' ).on( 'wc-composite-initializing', function( event, composite ) {
composite.actions.add_action('active_step_changed',function(){
window.kwipped_approve.update_approve_woocommerce_tags();
});
});Documentation for Woocommerce composite product API is available at Woocommerce site.
There are plugins that modify the functionality of Woocommerce, and provide features such as options on simply products, which are not a part of the original Woocommerce design. This means that the base price of the product works as designed, but when users choose options, those options are not reflected on the price sent to our plugin, nor the descriptions of the options, which should be included. Exmple Plugin: http://www.extravariation.com/
Use the following approach to resolving this issue:
Detailed Description:
<approve-woocommerce-add-to-total style="display:none">0</approve-woocommerce-add-to-total>
<approve-woocommerce-add-to-model style="display:none"></approve-woocommerce-add-to-model>These tags determine the total dollar amount that should be added to the product base price found on the page, and any descriptive information that should be added to the model information found on the page.
<script>
function approve_read_page_selection($event){
var extra_amount = 0;
var extra_amount_dataprice = 0;
var extra_amount_datamodel = "";
var separator = "";
var found_one = false;
jQuery(".extra-variation-box input[type=checkbox], .extra-variation-box input[type=radio]").each(function (){
if(this.checked && jQuery(this).attr("data-visible") != "false"){
found_one = true;
extra_amount = (parseFloat(extra_amount) + parseFloat(jQuery(this).attr("data-price"))).toFixed(2);
extra_amount_dataprice = (parseFloat(extra_amount_dataprice) + parseFloat(jQuery(this).attr("data-price"))).toFixed(2);
extra_amount_datamodel +=separator+"| "+jQuery(this).attr("data-name");
separator = " ";
}
});
if(!found_one){
jQuery("approve-woocommerce-add-to-total").text("0");
jQuery("approve-woocommerce-add-to-model").text("");
}
else{
jQuery("approve-woocommerce-add-to-total").text(extra_amount_dataprice);
jQuery("approve-woocommerce-add-to-model").text(extra_amount_datamodel);
}
}
var $approve_cart = jQuery( ".cart" );
$approve_cart.find( ".extra-variation-box input[type=checkbox]" ).on("change",function($event){
approve_read_page_selection($event);
})
$approve_cart.find( ".extra-variation-box input[type=radio]" ).on("change",function($event){
approve_read_page_selection($event);
})
</script>APPROVE Woocommerce plugin updates will be released periodically. You may update it by visiting the "Plugins" page in wordpress and following the provided instructions.