Divi makes it possible to achieve almost any layout, insert almost any content element, and style things in almost any way. But what about payment forms? What about payment forms within modal popups?

Divi Payment Form Modal Popup - Divi Builder

By default, Divi doesn’t have options for modals or payment forms. That’s why we’ll be using our Payments for Divi plugin, and the Popups for Divi plugin. In just three simple steps, we’ll have an awesome looking modal popup that contains a custom payment form.

Step 1: Create a Button to Launch the Payment Form Modal

Once you’ve installed both the Payments for Divi and Popups for Divi plugins, head over to your page, and enable the Divi Visual Builder. Go ahead and add a button wherever you want. I’ve added a button with the text of “Order Now.”

Divi Payment Form Modal Button Settings

The main requirement for the button is the “Button Link URL” setting. This setting normally takes a URL for the button link. However, to launch our payment form modal popup, we’ll use a hash link. A hash link looks like #id_of_target_element, where id_of_target_element will be the ID of our modal’s section. This tells your browser to open the modal when the button is clicked.

On my test site, I’ve used #order as the Button Link URL, which means my modal section will need to have an ID or order.

Step 2: Create a Modal Popup Section for the Payment Form

Next, you create the modal popup section, which is done with the Popups for Divi plugin. To create the modal, just add a new section to your page. I added mine at the bottom, but it doesn’t matter where you add it because the section will be hidden until the modal is toggled open.

To add my payment form popup, I styled my new section with a full row, and limited the row to 400px in width. I also made sure it was centered in the page.

Divi Payment Form Modal Popup Settings

To enable the section as a popup, the Popups for Divi plugin adds a “Popup” tab to the section’s settings. Click that tab. Under the General dropdown, toggle the setting to enable the section as a popup. Then, give it a “Popup ID” of whatever you used in your Button Link URL above, excluding the # symbol. Since I added #order as my button link, I’ll give the popup an ID of order.

After the basic requirements are set, you can style and configure your popup however you wish.

Step 3: Add the Payment Form

Finally, we’ll add the payment form to the popup section. Simply add a new module to your section’s row, and select the Payment Form module. You can read more about how to create payment forms for Divi here. I also added a text module, with a title for the modal. After saving, this is what my payment form modal looks like.

Divi Payment Form Modal Popup

Gutenberg makes it super simple to create your content, such as pages and blog posts. As WordPress and Gutenberg continue to grow, the new editor will be extended to work on other parts of your site, so the possibilities will only continue to grow!

Using WordPress’s native blocks and third-party blocks, you can achieve unique layouts, filled with design elements that are beautifully crafted by top-notch block developers and designers.

What is CoBlocks

CoBlocks, founded by Rich Tabor at GoDaddy, is a suite of blocks for the WordPress editor. It includes a bunch of blocks that not only help content creators add new features to their websites, but they look flat out awesome!

In this post, we’ll look at how you can use CoBlocks with Ad Injector to bring the same powers of Gutenberg to your WordPress post archives, such as Blog page, custom post type listings, and even WooCommerce product grids!

What is Ad Injector?

With Ad Injector, you can use Gutenberg to create content like advertisements, promotions, calls to action, and much more. You can then insert that content anywhere within your blog page.

For example, say you’re launching a new product, and you’d like to display a promotional call to action after the first blog post on your Blog page. You can use Ad Injector to create the ad, insert it after the first post, and even schedule it for when to start and/or end. You can use CoBlocks to make it look great!

Here’s what we’ll be creating…

Ad Injector with CoBlocks

Here, we’ve created a promotional call to action using CoBlocks and Ad Injector, and have inserted it after the first post on the Blog page.

Prerequisites

You won’t need anything special here – just CoBlocks and Ad Injector!

CoBlocks is a free plugin you can download from your WordPress admin, or upload the zip file.

Ad Injector is available from Elegant Modules, with a Basic license starting at just $39. You can download the plugin’s zip file, and upload it in your WordPress admin. Make sure to add your license key in the Ad Injector settings to ensure you get access to automatic updates and support.

Creating the Promotion

After both CoBlocks and Ad Injector are installed and activated, you can create your promo. In your WordPress admin, in the admin menu on the left side of the screen, click on Ads –> Add New.

Creating a new ad is just like creating any other post or page in Gutenberg. For our example, we’ll be using the “Media Card” block available in CoBlocks. The setup will look similar to this:

CoBlocks Media Card

The Media Card block looks great, and is simple to configure. We just need to select our image, and add a title and description. You can also set thing like a background color, the amount of padding, card or image shadows, and more.

After you’ve added the content for your promo, it’s time to insert it into your blog with Ad Injector.

Inserting the Ad

The Ad Injector settings next. Since we want to display the promo after the first post in our blog, we’ll select “Posts” as our post type, and enter “1” as the position. You can also set a start and end date for your ad, if desired. Your settings will look like…

Ad Injector ad settings

After designing your promo and configuring the Ad Injector settings, you can save and public your ad. You can now create any kind and any number of promos you’d like, and insert them into whichever post type archives you wish. Use Ad Injector to insert things like email opt-ins, product upsells, and anything else you can do in Gutenberg!

Want to Add Custom Promos in Your Blog?

Check our Ad Injector, a WordPress plugin that lets you build, schedule, and insert custom promotional content right into your blog. It also supports custom post types and WooCommerce product grids!

Send File Uploads Straight to Amazon S3

SyncS3 for Gravity Forms lets you send your file uploads to any Amazon S3 bucket. Store your images, videos, and other files on Amazon's high quality infrastructure.

If you need to use instance profiles and IAM Roles to send Gravity Forms file uploads to an Amazon S3 bucket, SyncS3 for Gravity Forms includes a filter for overwriting the S3 client object. This will allow you to assume an IAM user role, and configure the S3 client to use that role’s credentials to upload files.

Using Amazon’s sample code in Assuming IAM Roles in another AWS account, we’ll adapt it to work with SyncS3. Note that some of this code needs modified to use your own AWS credentials.

add_filter( 'syncs3_s3_client', 'my_iam_syncs3_s3_client', 10, 3 );
/**
 * Overwrites the S3 client to use an IAM user's credentials.
 * @see https://docs.aws.amazon.com/sdk-for-php/v3/developer-guide/guide_credentials_assume_role.html#assuming-an-iam-role-in-another-aws-account
 *
 * @param  object   $client     S3Client
 * @param  array    $config     Default configuration data
 * @param  mixed    $entry      Entry data aray, if available, else empty
 *
 * @return object S3Client
 */
function my_iam_syncs3_s3_client( $client, $config, $entry ) {
	
	SyncS3::autoload();
	// This needs modified to fit your account
	$stsClient = new Aws\Sts\StsClient([
		'profile' => 'default',
		'region' => 'us-east-2',
		'version' => '2011-06-15'
	]);
	// This needs modified to fit your account
	$result = $stsClient->AssumeRole( array(
		'RoleArn' => 'arn:aws:iam::123456789012:role/xaccounts3access',
		'RoleSessionName' => 's3-access-example',
	) );
	// Create the new S3 client using the IAM user
	 $client = new Aws\S3\S3Client([
		'region' => $config['region'],
		'credentials' => array(
			'key'    => $result['Credentials']['AccessKeyId'],
			'secret' => $result['Credentials']['SecretAccessKey'],
			'token'  => $result['Credentials']['SessionToken']
		)
	]);
	
	return $client;
}

If you run an e-commerce website, setting up Google Analytics E-Commerce Tracking is something you should do sooner rather than later. E-Commerce Tracking will provide you with valuable insights on where your sales are coming from, such as which referrers and pages are generating the most revenue.

In this post, we’ll take a look at how to set up Google Analytics E-Commerce Tracking in Easy Digital Downloads. Since EDD doesn’t have an official add-on for enabling this feature, we set out to enable it on our own website with some custom code. Here’s how we did it.

Pre-Requisites for Google Analytics E-Commerce Tracking

Before looking at the code to add Google Analytics e-commerce tracking, you need to make sure everything is in place for it to work.

First, you have to have a Google Analytics account, and the general tracking snippet installed on your website. We’ll assume you have one, so we won’t cover the basic Google Analytics integration. If you need help with this step, see this article on How to Set Up Google Analytics in 5 Simple Steps.

Assuming you now have your basic Google Analytics integration up and running, the next step is to enable E-Commerce Tracking for the property/website.

After logging in to your GA dashboard, click the “Admin” menu item (the gear icon). This will take you to a screen that looks like this.

Google Analytics admin

In the Property column, select the correct property. This is the website on which you want to enable e-commerce tracking.

Next, in the View column, select “Ecommerce Settings.” This will open up the following settings.

Google Analytics Enable E-Commerce Tracking

The “Enable Ecommerce” setting will likely be off, so toggle it on, then save your change.

The Code

Now that your website supports GA e-commerce tracking, let’s actually add the code to tell GA when it should record e-commerce data.

add_action( 'wp_footer', 'em_load_ga_ecommerce_event_tag' );
/**
 * This loads the script required for sending payment conversion to Google
 *
 * @return void
 */
function em_load_ga_ecommerce_event_tag() {
	// Bail if not on payment confirmation
	// $_GET['payment_key'] is not available on new purchases (only when later viewing receipt)
	if ( ! edd_is_success_page() || ! empty( $_GET['payment_key'] ) ) {
		return;
	}
	global $edd_receipt_args;
	$payment = get_post( $edd_receipt_args['id'] ); // Post data for payment ID
	$meta = edd_get_payment_meta( $payment->ID ); // Meta data about the transaction
	// Get some transaction data
	$payment_obj = new EDD_Payment( $payment->ID );
	$total = $payment_obj->total;
	if ( isset( $meta['cart_details'] ) ) {
		$cart_items = $meta['cart_details'];
	}
	$items = array();
	if ( ! empty( $cart_items ) ) {
		foreach ( $cart_items as $key => $product ) {
			$items[] = array(
				'id' => $product['id'],
				'name' => $product['name'],
				'sku' => edd_get_download_sku( $product['id'] ),
				'price' => $product['item_price'],
				'quantity' => $product['quantity']
			);
		}
	}
	?>
	<script>
		gtag('event', 'purchase', {
		  "transaction_id": "<?php echo $payment->ID; ?>",
		  "affiliation": "<?php bloginfo( "name" ); ?>",
		  "value": <?php echo $total; ?>,
		  "currency": "USD",
		  "tax": 0,
		  "shipping": 0,
		  "items": <?php echo json_encode( $items ); ?>
		});
	</script>
	<?php
}

You can add this code snippet to your theme’s `functions.php`. Let’s review what all this does.

  1. The first check is that the user is on the purchase confirmation page, but only if it’s a new purchase. Since EDD uses the same page for both new purchases and viewing the receipt of previous purchases, this check helps avoid duplicate recordings in the event that a customer reviews the payment receipt later on.
  2. Next, it loops through all of the products in the payment, and assembles data to send to Google Analytics. This is how GA knows which products are being sold.
  3. Finally, it loads a bit of Javascript to send a purchase event to Google Analytics. We load this in the footer to ensure that the Google tag manager script is loaded (that should be loaded in the header). We tell GA about the payment, including its total, transaction/payment ID, our currency, and the payment’s items.

Now, when a customer completes payment and is sent to the purchase confirmation page, the Google Analytics tag manager will send the purchase data for recording in your GA account.

DigitalOcean Spaces is an object storage service designed to make it easy and cost effective to store and serve large amounts of data.

DigitalOcean

SyncS3 for Gravity Forms now supports syncing file uploads with DigitalOcean Spaces!

Overview

Spaces is a low-cost data storage service from DigitalOcean. For just $5 per month, you get 250GB of storage, 1TB of outbound transfers, and unlimited uploads. Perfect for use as a CDN to host files such as images, videos, large PDFs and much more! This allows businesses to scale their websites’ performance at greatly reduced prices and complexity.

Spaces + Gravity Forms

In version 1.3 of SyncS3, we added a new setting to add your own endpoints to your file uploads, overriding the default. DigitalOcean provides you with a Spaces endpoint that you can use with SyncS3 to send files to your Space instead of directly to Amazon S3.

Send File Uploads Straight to Amazon S3

SyncS3 for Gravity Forms lets you send your file uploads to any Amazon S3 bucket. Store your images, videos, and other files on Amazon’s high quality infrastructure.

To sync file uploads with Spaces, you’ll need your space’s keys (access and secret), bucket name, bucket region, and DigitalOcean Spaces endpoint. Plug these into the SyncS3 settings in your file upload field (or your form or global settings).

Your settings will something like this.

SyncS3 settings for DigitalOcean Spaces.

Now, when a file is uploaded via Gravity Forms, it will be pushed to your DO Spaces bucket!

For more information on retrieving bucket information for your Spaces bucket, here are a couple help links:

By default, SyncS3 for Gravity Forms uploads files to Amazon S3 with private file permissions. This means the only way to access them is with a signed URL – SyncS3 signs the URLs in the admin so you can easily view them. If you want to offer public access to the files, such as viewing images or downloading zip files, you’ll need to adjust the files’ permission settings.

The Bucket Policy

To change a file’s permission settings, you first need to ensure that access to the file isn’t denied at the bucket level via the bucket policy. The easiest solution may be to not have any bucket policy. This will let you set access permissions on a per-file basis. However, if you have a reason for a bucket policy, you’ll need to adjust it to exclude the files you want to keep public.

Amazon S3 bucket policy

Here’s an example bucket policy that denies access to bucket files, unless requested from an authorized website.

{
    "Version": "2012-10-17",
    "Id": "http referer policy example",
    "Statement": [
        {
            "Sid": "Allow get requests referred by mywebsite.com.",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-bucket/*",
            "Condition": {
                "StringLike": {
                    "aws:Referer": "https://mywebsite.com/*"
                }
            }
        },
        {
            "Sid": "Explicit deny to ensure requests are allowed only from specific referer.",
            "Effect": "Deny",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::my-bucket/*",
            "Condition": {
                "StringNotLike": {
                    "aws:Referer": "https://mywebsite.com/*"
                }
            }
        }
    ]
}

This policy denies access to any file in the my-bucket bucket, unless the request is from https://mywebsite.com. You’ll need to modify the policy to set your bucket name and website URL. You can also modify the Resource path if your public files are saved to a subfolder.

SyncS3 Filter

It is currently on our development roadmap to build a feature into SyncS3 that lets you select a canned ACL option for your file uploads. Until then, you can use the syncs3_put_object_acl filter to override the file’s ACL permission.

add_filter( 'syncs3_put_object_acl', 'em_syncs3_object_acl', 10, 6 );
/**
 * Filters the Access Control List for an object.
 * For possible choices, see https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl.
 *
 * @param  string 	$acl       	ACL (default: 'private')
 * @param  string 	$file      	Local file URL when uploaded
 * @param  string 	$file_name 	Name of uploaded file
 * @param  int 		$field_id  	ID of the fileupload field
 * @param  int 		$form_id   	ID of the form
 * @param  array 	$entry     	Entry data
 *
 * @return string
 */
function em_syncs3_object_acl( $acl, $file, $file_name, $field_id, $form_id, $entry ) {
	// Logic here if needed
	return 'public-read';
}

This snippet sets all files uploaded by SyncS3 to public-read. You’ll need to add your own logic if needed. The filter make available data about the entry, form, and field so you can run your own logic.

After you’ve set your bucket policy and filtered the file’s ACL permission, files will be accessible according to your custom permissions. If you’ve set your bucket policy and ACL to allow for public-read access, you can link to the files with the stored S3 URLs, and user won’t get the “Access Denied” XML error they’d normally receive when the file is set to private.

SyncS3 for Gravity Forms allows you to send file uploads to any Amazon S3 bucket when your forms are submitted. Each time an entry is created, those files are sent to S3, and a reference to the file is saved in the entry on your website.

If you regularly find yourself deleting entries from your website, you may want to also delete the files that were sent to Amazon S3. If you don’t have a specific reason to keep the files, why pay for the space they take up?

By default, SyncS3 does not have a feature to automatically remove the files when an entry is deleted. This is by design, because we’d rather be safe and not remove files. Instead, you can elect to remove the files by using the following code snippet.

add_action( 'gform_delete_entry', 'syncs3_remove_s3_urls_on_delete_entry' );
/**
 * Delete an entry's files from Amazon S3 when an entry is deleted.
 * This fires before the entry is fully deleted, so the entry meta is still available.
 *
 * @param  int		$entry_id 		Entry ID to be deleted
 *
 * @return void
 */
function syncs3_remove_s3_urls_on_delete_entry( $entry_id ) {
	$s3_urls = gform_get_meta( $entry_id, 's3_urls' );
	if ( ! empty( $s3_urls ) ) {
		foreach ( $s3_urls as $field_id => $urls ) {
			if ( ! empty( $urls ) ) {
				foreach ( $urls as $url ) {
					if ( ! empty( $url['file_url'] ) ) {
						syncs3_delete_file( $entry_id, syncs3_get_url_parts( $url['file_url'] )['file_name'] );
					}
				}
			}
		}
	}
}

This code runs when an entry is deleted from your website’s database. Note that this is not the same as moving an entry to the trash. For this code to do its job – delete the files from S3 – you need to trash the entry, and then empty your trash.

Also, for this code to work, you need to be running SyncS3 Pro 1.2.0. Prior to 1.2.0, not enough information was saved about each file to remove them. Therefore, this will only work for deleting entries that were created on SyncS3 1.2.0 or later.

In version 1.0.3 of SyncsS3 for Gravity Forms, we introduced a couple new filters that allow you to apply custom logic on bucket names and file paths. These filters include syncs3_put_object_bucket_name, and syncs3_put_object_file_path.

With these filters, you can create more complex logic for determining which buckets file uploads, thereby overriding the default that you set within SyncS3.

You can also set a custom file path for the files. By default, SyncS3 places files into a folder within your bucket that looks like form-{form_id}, where form_id is the ID of your Gravity Form. The syncs3_put_object_file_path lets you override that default, and create a nested folder structure for your files.

Customize the Amazon S3 Bucket Name in SyncS3

add_filter( 'syncs3_put_object_bucket_name', 'customize_syncs3_bucket_name', 10, 6 );
/**
 * Custom logic to set the bucket name in SyncS3 for Gravity Forms
 *
 * @param string 	$bucket_name 		Bucket name
 * @param string 	$file 			Local file URL when uploaded
 * @param string 	$file_name 		Name of uploaded file
 * @param int 		$field_id 		ID of the fileupload field
 * @param int 		$form_id 		ID of the form
 * @param array 	$entry 			Entry data
 *
 * @return string 	Bucket name
 */
function customize_syncs3_bucket_name( $bucket_name, $file, $file_name, $field_id, $form_id, $entry ) {
	// Custom logic here
	return $bucket_name;
}

Customize the Amazon S3 File Path in SyncS3

add_filter( 'syncs3_put_object_file_path', 'customize_syncs3_path', 10, 6 );
/**
 * Custom logic to set the bucket name in SyncS3 for Gravity Forms
 *
 * @param string 	$path 			File path to return. Make sure the path ends with $file_name.
 * @param string 	$file 			Local file URL when uploaded
 * @param string 	$file_name 		Name of uploaded file
 * @param int 		$field_id 		ID of the fileupload field
 * @param int 		$form_id 		ID of the form
 * @param array 	$entry 			Entry data
 *
 * @return string 	Bucket name
 */
function customize_syncs3_path( $path, $file, $file_name, $field_id, $form_id, $entry ) {
	// Custom logic
	$path = "testing/new/{$file_name}"; // Make sure the new path includes the file name
	return $path;
}

These code snippets can be placed in a custom functions plugin, or your theme’s functions.php file.

Editing recurring totals in WooCommerce…how do you do it efficiently? Say you have a recurring subscription product named, “Elite Subscription.” This is sold via your website, using WooCommerce and WooCommerce Subscriptions. Up until now, the Elite Subscription has cost $10 per month, and you have about 300 active subscriptions for a current MRR (monthly recurring revenue) of $3,000.

After some deliberations, you decide to change this subscription to $100 per year to help combat customer churn. This price change, unfortunately, will only take effect for new customers, by default. Now how do you get the price changes to apply for the 300 current subscriptions? Updating them one-by-one is tedious, time-consuming, and error-prone. You don’t want to do it this way.

Instead, let’s look at the Bulk Update WooCommerce Subscriptions extension. Bulk Update WooCommerce Subscriptions will automatically update all subscriptions associated with a given product when that product’s pricing changes. There are no special settings – it works right out of the box with just one extra click of your mouse.

To edit your recurring payments/subscriptions, all you have to do is edit the subscription product’s pricing terms. In our Elite Subscription example, head over to the Elite Subscription product, and change the pricing details to $100 every year.

Before saving, make sure to check the “Update Subscriptions” checkbox. This tells the plugin that you want to update recurring payments associated with this product. Leaving it unchecked will keep those recurring payments at their current prices, so only new customers will have the new pricing.

Bulk Update WooCommerce Subscriptions price change

That’s all you have to do. Really. After you save the new pricing, Bulk Update WooCommerce Subscriptions will figure out which subscriptions are associated with that product, and schedule each one to be updated to the new pricing.

In our opinion, Gravity Forms is the best form builder plugin for WordPress. It’s been around a long time, it’s flexible, highly customizable, and incredibly powerful.

At the heart of any web form is the need to communicate in some way with your users. Why else would you ask them to submit a form? More often than not, a form submission is the beginning of a conversation that moves to some other communication method, such as email.

There are many different ways you can respond to form submissions in Gravity Forms, with directly sending an email being the most common method. Responding to users over email isn’t the only way, though. In this post, we’ll look at some different ways to respond to submissions right inside Gravity Forms, without having to fire up your email client.

Replying with Entry Notes

Gravity Forms submissions are called “entries.” When you see the word “entry” used in Gravity Forms, it just means a particular instance of a form submission. If Jane Smith submits your contact form, that record is saved as an entry. Gravity Forms allows you to manage and view individual entries under the form’s entries section.

In each entry, there is a feature called “Notes.”

Gravity Forms notes

Notes are very handy, especially if you want to leave an internal note about an entry that’s intended your eyes only (you don’t want the submitter to see it). You do also have the ability to send that note to the user who submitted the form.

Canned Replies

Building on the concept of entry notes is Canned Replies. With Canned Replies for Gravity Forms, you can set up any number of canned responses, and quickly select which one to send to the submitter. Like notes, it also stores a record for each reply you send to the user. It even counts the number of times you’ve used a canned reply, so you can make decisions about which questions you’re being asked most frequently.

If you’re using an advanced integration with the Gravity Forms REST API, Canned Replies can also send out canned responses when an entry is updated via the API.

There you have it! Just a couple simple ways you can reply to form submission in Gravity Forms without having to directly send emails.

WooCommerce is a great solution for e-commerce. In fact, it’s currently the most popular e-commerce platform on the web, being used on 26% of the top one million websites using e-commerce technology.

While WooCommerce has established a reputation for selling physical products, it’s also very much capable of selling virtual/intangible products, including premium memberships. This means that you can create paid content on your website, and make it available only to users who sign up for a membership plan.

What if you want to drip your content, though? This means that when a customer signs up for a membership, they don’t automatically get access to all of your premium content. Instead, the content is “dripped” out to them over a period of time. This helps retain members past the initial membership period.

Using WooCommerce Memberships and Elegant Modules for WooCommerce, dripping your content is simple. Let’s see how to do it.

Creating a Membership Product

First, let’s create the membership product. There is a difference between the membership product and membership plan that may be confusing. Since WooCommerce Memberships extends built-in WooCommerce functionality, it still requires normal products. The membership product is where you’ll configure things like prices, add images, etc.

To add your membership product, head over to your wp-admin, go to Products, and add a new Product. We’ll give the product a title, description, price, and image. We’ll also set the product type to Simple and Virtual, and ignore the Membership settings for now. Set up your product however you wish, save it, and we can move on to creating the membership plan.

WooCommerce Membership product data

Creating a WooCommerce Membership Plan

Next, let’s create a new membership plan. Creating a new membership plan will be very minimal. All you need to do is give it a title, select the membership product we created in the last step, and define a membership length like 1 year. Since we’ll be using the Elegant Modules Gutenberg + WooCommerce Memberships module, there’s no need to configure special access rules unless you have a particular reason for doing so.

WooCommerce membership plan

Protecting and Dripping Membership Content

Last, we just need to set up our content protection and dripping. Elegant Modules has WooCommerce Memberships integrations with the most popular page builders for WordPress, like Divi, Elementor, and Beaver Builder. The same flexibility is included in all those integrations. In this step, though, we’ll assume you’re not using a page builder, and are using Gutenberg instead.

In your post or page, add your content like you normally do. To protect and drip the content, open up the Gutenberg block selector, and locate the “Content Restriction (WooCommerce)” block. Typing in “elegant modules” will bring it right up!

After adding the Content Restriction block, configure its settings by selecting your membership plan, enabling drip, and setting the drip timing. Then, add or move your content into the Content Restriction block. The Content Restriction block works like a parent-child block, so it acts as the parent with all the content acting as the children. Any block that is placed with the Content Restriction block will be protected according to the rules you set.

WooCommerce Memberships Gutenberg editor

When you’re done adjusting your content, just save it, and you’re all done. The content will be dripped out after the time you set, and only to members of the membership plan you selected.

Elegant Modules integrations provide visual content protection and dripping for the most popular page builders and membership plugins. Check out our current modules, and take your membership website to the next level with simple content dripping!

Your Cart
Your cart is currently empty.
Open Cart