Getting Membership 2 Pro content to display in Divi template pages

Hi, im having some problems getting membership 2 pro to work well with the Divi builder.

I’ve managed to get the sign up page working well. The issue is the membership page.

Once redirected from sign up to membership the page displays fine. But once you click the ‘signup’ button on the membership type it doesn’t display in the divi template anymore.

The registration page is at https://miniplanet.woodr****eative.co.uk/signup

Thank you!

  • Ash
    • WordPress Hacker

    Hello Lewis

    The custom css on your site is poorly coded, I am afraid to touch that. So I have written a script which should improve the visual. Please try the following code:

    add_action( 'wp_head', function() {
    	?>
    	<script>
    		jQuery(function($){
    			if($('.ms-membership-form-wrapper').length) {
    				if( ! $('.et_pb_section_0').length) {
    					$('.ms-membership-form-wrapper').wrapAll('<div class="et_pb_section et_pb_section_0 et_section_regular et_pb_section_first" style="padding-top:150px;"><div class="et_pb_with_border et_pb_row et_pb_row_0" style="border: 4px solid #606060"></div></div>');
    					$('.et_pb_section_1').css({
    						'margin-top': '-34px',
    						'padding-top': 0,
    
    					});
    				}
    			}
    		});
    	</script>
    	<?php
    } );

    You can use this code in your child theme's functions.php if the theme is not changed. Otherwise mu-plugin is the best option. To create a mu-plugin, go to wp-content/mu-plugins folder. If there is no mu-plugins folder then, create one. Now, inside the mu-plugins folder create file with name anything.php (make sure file extension is .php). Now start with a <?php tag and then put the above code.

    Hope it helps! Please feel free to ask more questions if you have any.

    Have a nice day!

    Cheers,
    Ash

  • Lewis
    • Flash Drive

    Hi Ash.

    Thanks for taking the time to take a look. Its fixed the next page on /membership so thanks very much!

    Unfortunately Im having some issues now once 'complete payment' is clicked. The page lowers further down the screen then it should do - and the footer doesn't display correctly. I've attached some screenshots.

    Also - I was wondering if its possible to skip the membership selection screen & go straight to the page where the 'complete payment' button is located after signup? Im only needing one membership type so theres not much need to display the list. I found a shortcode on the forums to do this but it didn't work. No worries if its been deprecated though its not a big issue.

    Thanks again for your help! :slight_smile:

  • Ash
    • WordPress Hacker

    Hello Lewis

    Unfortunately Im having some issues now once 'complete payment' is clicked.

    Do you mean the thank you page is loaded or just after the click? Is it possible to make a screencast? You can make a screencast using http://recordit.co

    I found a shortcode on the forums to do this but it didn't work. No worries if its been deprecated though its not a big issue.

    How's about using this shortcode?

    [ms-membership-buy id="5" label="Join now!"]

    You just need to correct membership ID in the above shortcode. Let us know if that works for you.

    Have a nice day!

    Cheers,
    Ash

  • Lewis
    • Flash Drive

    Hi Ash, I mean just after the click. I havent got to thank you page bit yet. The issue im having is on the page before someone clicks 'buy now' & is redirected to PayPal, stripe etc.

    Recordit doesn't seem to like my computer so ive used another app.

    You can see the issue im having here : https://cl.ly/4d1e6a96fdb6

    I tried your suggestion of a mu plugin too but that seemed to break things even more.

    Cheers for the shortcode but it isnt really what I was hoping for. I was wanting someone to sign up & then be directed straight to the payment page for my membership but I can make do without that if theres no shortcode available for it.

    Cheers for your help :slight_smile:

  • Nithin
    • Support Wizard

    Hi Lewis,

    Sorry for the delay in getting back to you, I could notice the issue in your system. It seems like there is a Div which is getting removed when the Payment is clicked.

    Could you please enable support access to the website, so that we could give a closer look, and see what's causing this behaviour.

    You can grant access from WPMU DEV > Support > Support Access > Grant Access, or check this manual: https://premium.wpmudev.org/docs/getting-started/getting-support/#chapter-5

    Cheers for the shortcode but it isnt really what I was hoping for. I was wanting someone to sign up & then be directed straight to the payment page for my membership but I can make do without that if theres no shortcode available for it.

    I'm afraid, there isn't any out of the box setting regarding that, the above shortcode will directly take the logged in members to the Payment Page. If the same button is accessed by a logged out user, then they'll have to 1st register, and it'll then direct to the payment page.

    Please let us know once you enable access, so that we could get this sorted. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Nithin
    • Support Wizard

    Hi Lewis,

    I have replaced the above-given jQuery code with the following one, and now the page seems to work fine:

    add_action( 'wp_head', function() {
    	?>
    	<script>
    		 jQuery(document).ready(function() {
    
    	if(jQuery('.ms-membership-form-wrapper').length) {
    				if( ! jQuery('.et_pb_section_0').length) {
    
    jQuery('.ms-membership-form-wrapper').wrapAll('<div class="et_pb_section et_pb_section_0 et_pb_with_background et_section_regular et_pb_section_first" data-fix-page-container="on" style="padding-top: 234px;"><div class="et_pb_section et_pb_section_1 et_pb_with_background et_section_regular"><div class="et_pb_with_border et_pb_row et_pb_row_0"><div class="et_pb_column et_pb_column_4_4 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough et-last-child"><div class="et_pb_module et_pb_text et_pb_text_0 et_pb_bg_layout_light  et_pb_text_align_left"></div></div></div></div></div>');
    
    jQuery("#main-footer > div:first").addClass('et_pb_section_4').removeClass('et_pb_section_1 et_pb_section_first');
    jQuery("#main-footer > div > div:first").addClass('et_pb_row_1').removeClass('et_pb_row_0');
    
    				}
    			}
    
          });
    	</script>
    	<?php
    } );

    Please do note that the above code is more of a workaround as Divi isn't fully compatible with Membership 2 Pro plugin. It would be advisable to not edit the pages further via Divi, as doing so might cause more anomalies as noticed.

    If you have any further changes, we can provide custom CSS, if needed. Please check, and see whether it works fine. Have a nice day ahead. :slight_smile:

    Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.