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

Integrating with Elementor 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 forms or Stripe Checkout.

This document will show you how you can get Elementor’s pricing tables to play nicely together with WP Simple Pay’s overlay and Stripe Checkout forms.

Overlay Form Instructions

Double click the appropriate button – labeled “Click Here” in the image above – which will open up the settings panel for that button. Now click the Link Options gear icon, which will toggle the display of further options and settings.

Enter class|simpay-modal-control,data-form-id|24 in the Custom Attributes field. In the example below, you would replace 24 with the ID of your form. Repeat this process for each pricing table button.

Then to have the actual form “exist” on the page, so it can be launched, add a “Shortcode” element below the pricing table column and enter the WP Simple Pay shortcode. In this example the shortcode is [simpay id="24"]:

The last step is to hide the Simple Pay buttons where the shortcode is being rendered. You can accomplish this by clicking the Shortcode elements “Advanced” gear icon and adding the following CSS:

#simpay-overlay-form-wrap-24 { display: none; }

Be sure to apply all of your changes by clicking the APPLY button.

Everything is now in place, and the pricing table button will launch the overlay form, shown below:

Repeat the process detailed above for each button in the pricing table.

Stripe Checkout Instructions

Double click the appropriate button – labeled “Click Here” in the image above – which will open up the settings panel for that button.

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

Then to have the actual form “exist” on the page, so it can be launched, add a “Shortcode” element below the pricing table column and enter the WP Simple Pay shortcode. In this example the shortcode is [simpay id=”14″]:

The next step is to hide the Simple Pay buttons where the shortcode is being rendered. You can accomplish this by clicking the Shortcode elements “Advanced” gear icon and adding the following CSS:

#simpay-stripe_checkout-form-wrap-14 { display: none; }

The final step is to add the following code to an HTML element dragged outside of the pricing table, again replacing 14 with your form’s id:


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

Repeat the process detailed above for each button in the pricing table.

Updated on May 7, 2021

Was this article helpful?

Related Articles