Elementor on Checkout Page Layout Issue

Hi there,

Have you checked with Elementor's support team on this first?

It doesn't sound like a GP issue.

Yes, they told to disable all plugins and then test and then also if the issue is there then change theme and test, but thing is we have right now visitor on the website buying on store, so its hard to do changes now, is it possible just if you have a dummy setup on ur end to activate elementor on generatepress theme to check woocommerce checkout page? or do you know how can we make our site staging site to test without affecting current visitors, that will be a damn handy to do things, earlier we used divi and it had safe mode feature which used to just keep woocommerce and divi active for us in safe mode but now since we moved to elementor, if I enable divi safe mode it will disable elementor too, so that can't be used.

Most hosting offers staging site service for free or a small charge.

It is unlikely a theme issue if Elementor is taking over that page.

Hello,

OK on disabling GP Premium all becomes normal. See the image in private box

Hello,

On disabling Woocommerce option in Generate Press premium plugin all becomes normal, so what could be causing this issue there?

The issue is that Elementor is overwriting some of GP's default styles but not all of them.

We can try removing GP's style from the Checkout page with this PHP snippet:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_checkout' ) && is_checkout() ) {
        wp_dequeue_style( 'generate-woocommerce' );
        wp_dequeue_style( 'generate-woocommerce-mobile' );
    }
}, 101 );

Adding PHP: https://docs.generatepress.com/article/adding-php/

Hello,

That will only apply on official checkout page right? coz we are still building it up so we have made "Checkout New" page

So, how can we edit this code to work on that page?

Also can you confirm is this a known issue between Generate Press and Elementor?

This will apply to the page you assigned to be the checkout page within WooCommerce:
https://woocommerce.com/document/conditional-tags/#section-9

I wouldn't say this is an issue for either GeneratePress or Elementor - it's more like a special case that needs to be handled by the snippet above.

I need to use that snippet and apply it on the page where I don't want GP to load its styles.

Can you also give me such snippet for some other pages if I ever wanna use like for Woocommerce My Account Page etc so that I don't need to ask you guys in the future, less work for both of us :)

Hi there,

We can add is_account_page() condition to the mix if you need to do this on WooCommerce's account page.

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_checkout' ) && is_checkout() || is_account_page() ) {
        wp_dequeue_style( 'generate-woocommerce' );
        wp_dequeue_style( 'generate-woocommerce-mobile' );
    }
}, 101 );

Hello,

So if I want to do this on some random page then like I have 1 page named Home or Checkout Testing, so what do I need to always replace from the code?

You just add more conditions.

Say, for example, you want to add a page named "About", "Contact" and a page with an ID of 133:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'is_checkout' ) && is_checkout() || is_account_page() || is_page( array('About','Contact',133) ) ) {
        wp_dequeue_style( 'generate-woocommerce' );
        wp_dequeue_style( 'generate-woocommerce-mobile' );
    }
}, 101 );

is_page() usage reference - https://developer.wordpress.org/reference/functions/is_page/

Hello,

OK, got it thanks a lot Leo and Elvin, have a great week, stay safe :)

No problem. Glad to be of any help. :D