Adding settings tabs to WooCommerce Memberships Plan Edit Pages

For those who have WooCommerce and WooCommerce Memberships plugins installed. How to add your own options to the membership plans.

/2 comments

When I work with my MailChimp Synchronization plugin for WordPress and WooCommerce Memberships, my task was to add settings into membership plan edit pages.

I think that it would be good idea to add settings into tabs, without creating default-styled WordPress post metaboxes.

WooCommerce Membership plan settings tab

Fortunately WooCommerce Memberships plugin is very customizable and it allows to add settings using build-in action hooks. And in this post I will show how, I hope it will save you much time.

There are wc_membership_plan_data_tabs filter which can help you with changing the settings tabs (add or remove) and wc_membership_plan_data_panels action hook that helps you to add custom HTML into plan data metabox.

WooCommerce Memberships plans are custom post types, so we will save data into custom fields. And here is my example of adding a new tab and a simple text input field in it.

add_filter( 'wc_membership_plan_data_tabs', 'rudr_membershiptabs' ); /* add tabs */
add_action( 'wc_membership_plan_data_panels', 'rudr_membershiptabcontent' ); /* add tab content */
 
/**
 * @param array $tabs contains all WooCommerce Membership plan tabs data
 */
function rudr_membershiptabs( $tabs ) {
 
	$tabs['truemailchimp'] = array(
		'label'  => 'Mailchimp',
		'target' => 'rudr_mailchimp' /* ID of the HTML tab body element */
	);
	return $tabs;
 
}
 
function rudr_membershiptabcontent(){
	global $post;
 
	$tabbody = '<div id="rudr_mailchimp" class="panel woocommerce_options_panel">
		<div class="table-wrap">
		<p>Please, enter the Mailchimp list ID to synchronize active users of this plan with it.</p>
		<div class="options_group">';
 
	wp_nonce_field( basename( __FILE__ ), 'rudr_mchimp_nonce' );
	$list_id = get_post_meta( $post->ID, 'rudr_list_id', true );
 
	$tabbody .= '<p class="form-field post_name_field ">
		<label for="rudr_list_id">List ID:</label>
		<input type="text" name="rudr_list_id" id="rudr_list_id" value="' . $list_id . '" />
		</p>				
		</div><!--.option_group-->
		</div><!--.table-wrap-->
		</div><!--#rudr_mailchimp-->';
 
	echo $tabbody; 
}

If you insert the code above without changes to your theme functions.php file, the result will be something like this:

WooCommerce membership plan settings

And the final step is to save the data into custom fields. You can use save_post for this.

add_action( 'save_post', 'rudr_membershipsave' );
 
/**
 * @param int $post_id ID of the membership plan
 */
function rudr_membershipsave( $post_id ){
	if ( !isset( $_POST['rudr_mchimp_nonce'] ) || !wp_verify_nonce( $_POST['rudr_mchimp_nonce'], basename( __FILE__ ) ) )
        	return $post_id;
 
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) 
		return $post_id;
 
	if ( !current_user_can( 'edit_post', $post_id ) )
		return $post_id;
 
	$post = get_post( $post_id );
 
	/* save data only for membership plan custom post type */
	if ( $post->post_type == 'wc_membership_plan' )
		update_post_meta( $post_id, 'rudr_list_id', $_POST['rudr_list_id'] );
 
	return $post_id;
 
}

Related Posts

Need some help with WordPress?

If you need some professional developer help, I will be happy to assist you.

Contact me Who I am?

Comments — 2

Leave a comment

php js HTML CSS Code