Memberships 2 Pro system pages overrides Divi layout

Hello again,

3rd post today. Sorry, it's Christmas. Time for working on my own stuff.

I'm trying to work on the system pages for Memberships 2 plugin. Like for the Register page. I'm using the Divi builder since I want a specific layout:

https://monosnap.com/file/iIwCcXR2IFZygkllUdOp7sY5Pm2O9e

This works fine on the first page, when viewing the memberships:
https://monosnap.com/file/WvdvduOBnsBOaAAIsFxveY7irMlUFi

But as soon as I click Signup, the layout brakes:
https://monosnap.com/file/Y0MBJ5THqikbTMS24AZHRhuWgaaxHb

I have been posting about this before, that there's been issues with all system pages setup in Divi. I have searched the forums and support tickets, but there's only a few CSS fixes.

There must be an update to this issue soon?

Also, when trying loading the visual builder in Divi, it's not working. Only the frontpage gets loaded, but no builder interface.

  • Rupok

    Hi Johnny,

    There must be an update to this issue soon?

    Thanks a lot for reporting. Let me explain the scenario.

    Each theme has some CSS class or ID for input fields of their own to beautify the input fields. For example, if I create a theme called anything, then I might add class "anything-text-input" for the input fields and will define custom CSS code for that class so text input fields looks nice in my theme. As different themes use different class and ID, it's not really possible to add all those classes and IDs in our plugin output wrapper because we don't know on which theme the will be shown. Membeship 2 Pro works beautifully in default WordPress themes because those themes follow a standard. Membership 2 Pro has it's own class and IDs for the wrapper. So actually Divi developers can integrate our input field classes and IDs in their theme to show our form fields beautifully in Divi. Can you please talk to them regarding this? I believe, they will take this in consideration for their future releases.

    However, from our end, we can give you custom CSS code to make those input fields look better as we now know that you are using Divi. That's why you are getting custom CSS codes in different threads as you mentioned. So if you want us to help you make Membership 2 Pro input fields look better in your site, would you mind allowing Support Access so we can check the current Divi styling classes for form input fields and give you proper custom CSS code to make Membership 2 Pro registration and login page looking better?

    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    when trying loading the visual builder in Divi, it's not working. Only the frontpage gets loaded, but no builder interface

    This is really weird and should not happen. Just to make sure no other plugin is causing this, can you please do a plugin conflict test? To know more about plugin conflict test, you can check this guide: http://premium.wpmudev.org/manuals/using-wpmu-dev/getting-support/

    Please let us know how it goes.

    Can you please also check your browser console for errors when you try to load Divi Visual Builder? If you see any errors there, can you please copy and paste here? That will give us valuable insight regarding the issue.

    Did you mean that this issue is happening only for Membership 2 Pages? In that case, again, would you mind allowing Support Access so we can have a closer look at this?

    Please confirm here when you are done granting Support Access. I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Johnny

    Hello,

    Well, it's not really about the style of the form fields I'm talking about. I know and understand what you are explaining, so that's fine. I'll just code up my own CSS if I need.

    I granted support access now.

    If you take a look at my Membership 2 register page, you will see what I mean.

    The signup page doesn't include and render the other elements I have added to the page. This is what I mean.

    This is how the Registration page looks like in edit:
    https://monosnap.com/file/JS5uC7ocjMqy3kN5xLilIpuiQ1W12N

    This is now it gets rendered as soon as you click Signup on one of the memberships:
    https://monosnap.com/file/V7CyGgdD4Fi2jlZpIVMPjapQAkRr8z

    It's the same page, but the layout is gone.

    About the Divi builder

    I just discovered now that when trying to use the Divi builder on the /register page, I just get FW to /memberships because I'm already logged in.

  • Rupok

    Hi Johnny,

    Thanks for the details. I checked again Membership 2 Pro register and other pages in default WordPress themes in my test site and they all work fine. But when I activate Divi, this issue appears. So this is Divi specific issue.

    Can you please ask Divi developers regarding this and let us know what they say about this? As Divi builder is a third party paid plugin, I don't have any idea about their coding and architecture. Divi developers can tell you best why this is happening because they have complete idea on Divi architecture.

    Please let us know what they say about this. If there is something we can do from our end, we will be glad to do that. In the mean time, if you need custom CSS code to make your registration page looking better, please let us know. We will be glad to provide you custom CSS code to fix the design thing.

    I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Yasaf Burshan,

    I don't think a theme will cause CPU usage such higher. Just to make sure, can you please activate any default WordPress theme and monitor your CPU usage for an hour or two? If the usage gets lower, then this is definitely Divi specific issue. If it doesn't change, then Divi is not causing this.

    And regarding your thread, I can see that Nastia is already working on that. I believe, she will come up with her feedback very soon on that thread.

    Have a nice day. Cheers!
    Rupok

  • Rupok

    Hi Yasaf Burshan,

    I'm really sorry if I was not clear in my last reply. What I meant is, if Divi conflicts with Membership 2 Pro in any way and that conflict cause high CPU usage for M2P, then deactivating this theme will give you a lower CPU usage and we can be sure that Divi is causing high CPU usage for M2P. That's why I asked to change your theme from Divi to any default WordPress theme.

    I hope you understand.

    Have a nice day. Cheers!
    Rupok

  • Yasaf Burshan

    Rupok ,
    No worries. Thanks.
    I have actually tried that now, and while I can't really do a full scale test as my content elements are based on DIVI objects, I can say that even with Twenty Seventeen the initial load time with M2P active is much longer, then with this specific plugin disabled. This is the same behavior as with DIVI.
    Let's let Nastia do her magic.

    Johnny sorry for marching into your post, but your scenario made me curious as it is similar to mine.

  • Johnny

    Update on this:

    I have been into the ElegantThemes for the Divi section. They say this must be a plugin issue and not Divi. I told them that you say this must be a theme issue and not the plugin. (pretty funny)

    I wanted to mention that this issue has occurred before and we talked about it in a support ticket here. That was about the missing/wrong layout for the members invoices, and this was fixed programmatically.

    Membership invoices ticket

  • Kasia Swiderska

    Hello Johnny,

    Also, members invoices totally brakes the layout. Basically, most things based on the M2 short-codes.

    If you remove templates for invoices does the pages start to look correctly?
    I'm testing on my Divi copy and I can't replicate any of the problem I can see on your site - each page has correct template with sidebar (except the invoice that are looking the same like on your first thread about them).
    Can you check what happen if you switch to parent Divi without any customization?

    kind regards,
    Kasia

  • Johnny

    Hey Kasia,

    Ah, you know what! I forgot to try that template specific for the invoices. I tried it now, and the invoice renders correctly with the default sidebar.

    Hm, but I still have troubles with the other native M2 pages you know. I mean, what makes the invoice rendering need a separate template in the first place?

    Ok, while writing this, I just discovered something on my demo site: Btw, go in a play with that if you need. I opened for support access at "demo.motion-effect.com". It's a clean WP and Divi install.

    Membership 2 Pro shortcodes works fine when just adding to a standard WP page. But as soon as I activate and use Divi builder, the pages collapses.

    Have a look...

  • Nithin

    Hi Joe,

    Hope you are doing good today. :slight_smile:

    Hm, but I still have troubles with the other native M2 pages you know. I mean, what makes the invoice rendering need a separate template in the first place?

    This issue is theme specific, the plugin should work out of the box with a default WordPress theme, in case of Divi theme, we'll have to make use of template so that the layout doesn't break. Could you please specify the other M2 pages where you are having issues? The M2 pages assigned under Membership 2 > Settings > General > Membership 2 Pages are working fine in your demo site.

    Membership 2 Pro shortcodes works fine when just adding to a standard WP page. But as soon as I activate and use Divi builder, the pages collapses.

    Could you please specify which shortcode you are making use of? I'm not sure about how Divi Builder works since it's a premium theme. Membership 2 Pro should work out of the box with themes that follow the default WordPress template hierarchy, and it's coding standards. I did try some couple of shortcodes in the Divi builder, and it seems to work fine, when I added it under Code. I wasn't able to find the page where you are implementing the shortcode in Divi Bulider though.

    Could you please advise what I'm missing so that we could help get this sorted asap. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Johnny

    Hi!

    I have never been called Joe, but I guess it could work out too :wink:

    Hm, I believe I have explained this many times now, and have given support access to two different sites so you can see.

    Did you take a look at the site mentioned that is work in progress now? The most important one is this: https://alternative.motion-effect.com/

    But if you look at my testing site which I explained yesterday, you will see what the problem is. But I can recap of course:

    First of all, the Register page using this shortcode

    [ms-note type="info"]We have the following subscriptions available for our site. To join, simply click on the Sign Up button and then complete the registration details.[/ms-note]
    [ms-membership-signup]

    Try clicking one of the Signups, and you will see the layout brakes. This page is using Divi builder with shortcode in the Code module like you tried. Have a look.

    Next one is when confirming the membership and payment buttons will show, same broken layout.

    Thank you page and Account page is doing fine with Divi builder.

  • Nithin

    Hi Johnny,

    Hope you are doing good today. :slight_smile:

    Not sure how that name came instead of yours, maybe a typo from my side, sorry about that. Thank you for pointing out the register page, and membership layout issue when confirming it, I could see the same when using the Divi Builder.

    Since it's a premium theme, Membership 2 Pro plugin hasn't been tested extensively using Divi Builder, and there could be some issues when it comes to the layout, and the layout issue seems to be only specific when implemented using the Divi builder.

    I could see you have already fixed the layout issue in your live site, ie https://alternative.motion-effect.com/

    This would be how the /register page functions, ie the same page gets loaded when you perform different functions like signup, clicking Already have a user account? links, etc. The easiest solution, and the workaround would be make use of custom CSS to fix the layouts, if you are looking to make this work in Divi Builder.

    If you notice, the CSS from the theme is overriding the plugins layout. For register page you could add the following CSS in the custom CSS section, For eg:

    .ms-guest .entry-content {
    	min-height: 600px;
    }
    #ms-shortcode-register-user-form {
    	width: 85%;
    	margin: auto;
    	padding-top: 2%;
    }

    You'll have to do the same same for other pages where you are having layout issues, like in membership and payments button etc. The above CSS is just an example, since I could see you have already coded your own CSS in live site.

    If you are looking for customization for any specific page, please do let us know, we would glad to provide custom CSS. I hope this helps. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Johnny

    Hey,

    No worries about the name :slight_smile:

    Yes, that's right. Layout issues is only when activating and using the Divi builder.

    I didn't really fix the Alternative site. I basically just "hacked" it with CSS to have the form itself display in a better way. It works on the first page until I click Signup. Then I loose the layout of the right column and the circle with %. So I can't build the layout I intended.

    I guess it's because of the scripting, loading the same page that the layout brakes. I'm having a guy on the ElegantTheme's support staff to have a look at this also now.

  • Nithin

    Hi Johnny,

    I didn't really fix the Alternative site. I basically just "hacked" it with CSS to have the form itself display in a better way. It works on the first page until I click Signup. Then I loose the layout of the right column and the circle with %. So I can't build the layout I intended.

    Yes, I could see that happening. It seems like the Divi Builder elements are only loaded during the initial page load. Once we click the Signup button, the Divi Builder class doesn't seem to load in the create an account section of the same page.

    Would like to know what the Support staff at Elegant theme would have to say, please let us know how that goes, and let us know if you still need any further assistance. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Johnny

    Nithin, hi!...

    I got some feedback again from ElegantThemes. No he have spent some time on testing this himself on my demo WP install.

    Here are his reply:

    Thanks! This is not an issue with the Divi Builder. After checking, I can see that the Divi Builder works okay on the register page, the module appear just fine. However when you click the signup button, you'll see a different content loaded in place of the original content, on the same page, which we have no control over it. In fact, you will see the same issue with the default WordPress editor. Add the shortcode of the plugin, then add any text after that (e.g. testing 123...). You'll see this text on the register page alone, but not when you click signup.
    I'm afraid it's not something we can help you with, I mean we could add the Divi modules manually to the WP default editor as a workaround but since the default editor doesn't work as well, you should check with the plugin author again (this time let them know that it's occurring with the WP default editor).

    Johnny

  • Nithin

    Hi Johnny,

    I could see what you meant, but this would be how the /register page works, and that page is integral part of the Membership 2 Pro plugin, ie different content gets loaded up for each action performed. It would require editing the plugin core files to include content that is loaded for every page action for register page. And to make that compatible with Divi builder would require a lot of custom coding. At the moment, this would be considered as more of a feature request, and I'll move this thread to Features & Feedback section, so that it'll be considered for development.

    If you are looking to get this sorted quickly, you'll have to check the Jobs & Pros section if you are considering custom development. Please do note that the members found in the Jobs & Pros, are individuals, and doesn't have any affiliate with WPMU DEV.

    Best Regards,
    Nithin

  • Johnny

    Hi,

    Just to finish this thread for now, and comment on that.

    I would say that this should be something that should be fixed/changed, because things are changing with how themes are built. And Divi is pretty much on the top on premium themes now. It's annoying to not being able to use the Divi builder features along with preferred plugins to have control over the design.

    Seems like for now that I just have to "hack" it with CSS and drop out the design and layout flow I was looking for then.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.