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.

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

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.

Updated on January 15, 2021

Was this article helpful?

Related Articles