Integrating with Divi Pricing Tables - WP Simple Pay Documentation
  1. Home
  2. Integrations
  3. Integrating with Divi Pricing Tables

Integrating with Divi Pricing Tables

Note: This documentation assumes you have already set up your subscription products and/or payment forms. The pricing tables work with our overlay or Stripe Checkout forms.

This document will show you how you can get WP Simple Pay and Divi’s pricing tables, as shown below, to play nicely together with our overlay forms.

The first step is to change the button link URL, You can do this by double-clicking the appropriate button – labeled “Choose Plan” in the image above – which will open up the settings panel for that button.

Enter #form-the-form-id in the Button Link URL field. In the example below, you would replace 24 with the ID of your form. Repeat this process for each pricing table button.

Note: You can find your form’s id in the WP Simple Pay Pro > Payment Forms admin. The form id is the number portion of the Simple Pay shortcode, as shown below.

Next, you will need to add a Divi “Code” module to the pricing table page. You want to paste the WP Simple Pay shortcode for each form used in the pricing table into the “Code” module. Let’s use 24, 25, and 26 in this particular example.

You are done editing the pricing table page and may save and close it.

The final step is to add the following code to the <body> section of the Divi  > Theme Options Integration tab. Remember to use the appropriate form id’s rather than 24, 25, and 26 shown in this example.

Code to add when using our overlay forms

<style>
  #simpay-overlay-form-wrap-24 { display: none; }
  #simpay-overlay-form-wrap-25 { display: none; }
  #simpay-overlay-form-wrap-26 { display: none; }
</style>

<script>
( function( $ ) {
  'use strict';
  var ids = [ '24', '25', '26' ];
  ids.forEach( function( id ) {
    $( 'a[href="#form-' + id + '"]' ).click( function( e ) {
    e.preventDefault();
    simpayAppPro.toggleOverlayForm( id );
    } );
  } );
} )( jQuery );

Code to add when using Stripe Checkout forms

Note: When using Stripe Checkout forms with Divi pricing tables, buttons, links, etc., you will not be able to use any custom fields such as coupons, etc.

<style> 
  #simpay-stripe_checkout-form-wrap-24 { display: none; }
  #simpay-stripe_checkout-form-wrap-25 { display: none; } 
  #simpay-stripe_checkout-form-wrap-26 { display: none; } 
</style> 
<script> 
( function( $ ) { 
  'use strict'; 
  var ids = [ '24', '25', '26' ]; 
  ids.forEach( function( id ) { 
    $( 'a[href="#form-' + id + '"]' ).click( function( e ) { 
    e.preventDefault();
    $( '#simpay-form-' + id + '').find( '.simpay-payment-btn' ).click(); 
    }); 
  }); 
})( jQuery ); 
</script>

Everything is now in place, and the pricing table buttons will now launch the overlay forms, shown below, or launch Stripe Checkout depending on your form type.

Updated on January 18, 2021

Was this article helpful?

Related Articles