Checkout page broken after creating a new one manually with Elementor and Astra

Resolved svitlana288
(@svitlana288)

6 months, 4 weeks ago

Hello!

I created a new checkout page manually using Elementor and the Astra theme.
I didn’t use the default WooCommerce shortcode page at first, so later I tried to rebuild it with the shortcode [woocommerce_checkout].

However, the page now looks broken (unstyled, half-English interface) when viewed live, even though it looked fine in the Elementor editor.

Steps I took:
– Created a new page and inserted the [woocommerce_checkout] shortcode.
– Assigned it as the Checkout page in WooCommerce → Settings → Advanced.
– Cleared cache and updated permalinks.
– Added a code snippet to force enqueue checkout styles, but it didn’t fix the issue.

Current checkout page: https://bellasport.com.ua/step/checkout-2/

Could you please help me understand why the checkout layout is broken and how to restore the correct WooCommerce styling?

Thank you very much for your time and help!
– Svitlana

The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 24 total)

1 2 →

Moses M. (woo-hc)
(@mosesmedh)

6 months, 4 weeks ago

Hi @svitlana288,

Thank you for bringing this to our attention and for outlining the steps you’ve taken so far. I understand how frustrating issues like this can be.

To better understand your request, could you please confirm whether the new page you created with the checkout shortcode was built using Elementor or the default Gutenberg editor?

If it was built with Elementor, please try creating a new page using the Gutenberg editor instead. Add the shortcode using the Shortcode block, save the page, set it as your default checkout page, and let me know if it works.

For this test, it’s best to remove the code snippet you previously used to enqueue the checkout styles. Once done, please share your observations and the link to the new test checkout page.

Thread Starter svitlana288
(@svitlana288)

6 months, 4 weeks ago

Hi Moses M.,

Thank you for your quick reply 🌸

I followed your instructions carefully:
– I created a new checkout page using the Gutenberg editor (not Elementor).
– Added the [woocommerce_checkout] shortcode.
– Selected this new page under WooCommerce → Settings → Advanced → Checkout Page.
– Saved the permalinks and cleared the cache.

However, when I try to open my new checkout page (https://bellasport.com.ua/checkout-test/), it still automatically redirects to the old one (https://bellasport.com.ua/step/checkout-2/).

The new page is visible in the settings with ID 4987, but WooCommerce keeps forcing the redirect.

Could you please advise how I can completely remove this automatic redirect or make WooCommerce use the new checkout page?

Thank you very much for your time and help 🙏
– Svitlana

Moses M. (woo-hc)
(@mosesmedh)

6 months, 4 weeks ago

Hi @svitlana288,

Thank you for getting back to me. I believe this behavior is expected, as you mentioned earlier that you added custom code to force the previous Elementor checkout page to be set as the default, as shown below. Did you remove every customization you added before creating the new checkout page.

– Added a code snippet to force enqueue checkout styles, but it didn’t fix the issue.

To better understand your setup, can you share your system status report from woocommerce > status > get system report > copy for support and share it using pastebin?

Thread Starter svitlana288
(@svitlana288)

6 months, 4 weeks ago

Hi Moses M.,

Thank you for your prompt response.
I have removed the custom snippet I previously added.
Here is the system status report you requested:
🔗 https://pastebin.com/rKV9SURE

Please let me know if you notice any conflicts or misconfigurations. I’m happy to provide further details or try changes as needed.

Thank you for your continued help!
– Svitlana

Moses M. (woo-hc)
(@mosesmedh)

6 months, 4 weeks ago

Hi @svitlana288,

Thank you for getting back. Could you please temporarily delete the “checkout-2” page and deactivate the following plugins: Elementor, SpeedyCache (and SpeedyCache Pro), and the Code Snippets plugin?

Once that’s done, please let me know so I can check your site again before we proceed with a more thorough conflict test.

Thread Starter svitlana288
(@svitlana288)

6 months, 4 weeks ago

Hi @moses,

Thank you for your reply!

I have already deleted the “checkout-2” page.
Now I have also deactivated the following plugins as you requested:
– Elementor
– SpeedyCache
– Code Snippets

Please check my site when you can and let me know the next steps.

Thanks again for your help!
– Svitlana
Moses M. (woo-hc)
(@mosesmedh)

6 months, 4 weeks ago
Hi @svitlana288,

Thank you for the update and for getting back. I’ve checked, and it looks like the checkout URL is still set to checkout-2, even though the page has been deleted. Based on my experience, it seems your theme is using an Elementor template to apply custom checkout styles and may include a setting that overrides WooCommerce’s default checkout behavior.

To investigate this further, please create a staging copy of your live site — this can be on a subdomain or in a separate directory. You can easily do this using the WP Migrate Guru plugin.

Once the staging site is ready, please:
1. Switch your theme to Storefront,
2. Disable all plugins except WooCommerce, and
3. Share both the System Status Report from the staging site and the staging site URL so I can run additional tests on my end.
Thread Starter svitlana288
(@svitlana288)

6 months, 3 weeks ago

Subject: Unable to Create a Staging Copy — Need Alternative Way to Proceed

Message:
Hi Moses,

Thank you for your detailed explanation and guidance.
I tried to create a staging copy of my active site using the WP Migrate Guru plugin (as you suggested), but unfortunately, it didn’t work — the plugin doesn’t allow me to choose FTP/SFTP, and when I tried the cPanel option, it caused issues on the live site.

Could you please suggest another way I can provide you access or the information you need to investigate the checkout issue?
For example, I could share login details to my main site directly, if that helps you check the configuration and troubleshoot the problem safely.

Thank you for your understanding and support!

Best regards,
Svitlana

Plugin Support Frank Remmy (woo-hc)
(@frankremmy)

6 months, 3 weeks ago

Hi Svitlana,

Thanks so much for your update, and I really appreciate your effort in trying to set up a staging site. I understand how frustrating it must be when the plugin doesn’t cooperate and causes issues on the live site.

Please note that sharing you login credentials publicly is against the forum guidelines.

Since WP Migrate Guru didn’t work for your setup, I recommend trying WP Staging. It’s a user-friendly plugin that spins up secure clone of your site within your existing hosting environment, without needing FTP or cPanel access. This might be a safer and more reliable way to proceed.

If that’s not feasible, we can continue troubleshooting on your live site with extra caution. Just let us know if you’d prefer that route, and we’ll see how it goes.

Looking forward to your response.

Thread Starter svitlana288
(@svitlana288)

6 months, 3 weeks ago

Hi Frank,

Thank you so much for your kind reply and understanding 💙
I really appreciate your suggestion — I’ll try using WP Staging instead, as Migrate Guru didn’t work properly on my hosting.

If I encounter any difficulties while setting it up, I’ll let you know.
Thanks again for your help and patience!

Best regards,
Svitlana

Plugin Support Frank Remmy (woo-hc)
(@frankremmy)

6 months, 3 weeks ago

Hi Svitlana,

Awesome! Looking forward.
Thread Starter svitlana288
(@svitlana288)

6 months, 3 weeks ago
Hi Frank,

Thank you for your kind support.
I’ve successfully created a staging copy of my site using the WP Staging plugin:
🔗 https://bellasport.com.ua/test

On this staging site, I’ve:
- Activated the Storefront theme
- Deactivated all plugins except WooCommerce
- Generated the System Status Report, which I’ve included below
Here is the report:
```
WordPress Environment

WordPress address (URL): https://bellasport.com.ua/test
Site address (URL): https://bellasport.com.ua/test
WC Version: 10.2.1
REST API Version: ✔ 10.2.1
WC Blocks Version: ✔ 11.3.2
Action Scheduler Version: ✔ 3.7.0
Log Directory Writable: ✔
WP Version: 6.8.1
WP Multisite: –
WP Memory Limit: 256 MB
WP Debug Mode: –
WP Cron: ✔
Language: uk
External object cache: – Server Environment

Server Info: LiteSpeed
PHP Version: 7.4.33
PHP Post Max Size: 128 MB
PHP Time Limit: 30
PHP Max Input Vars: 1000
cURL Version: 7.84.0
OpenSSL/1.1.1w

SUHOSIN Installed: –
MySQL Version: 10.3.39-MariaDB-cll-lve
Max Upload Size: 128 MB
Default Timezone is UTC: ❌
fsockopen/cURL: ✔
SoapClient: ✔
DOMDocument: ✔
GZip: ✔
Multibyte String: ✔
Remote Post: ✔
Remote Get: ✔ Active Plugins (2)

SiteSEO - SEO Simplified: від Softaculous – 1.3.0
WooCommerce: від Automattic – 10.2.1 Inactive Plugins (34)

(A list of all other plugins is currently deactivated for troubleshooting) Theme

Name: Storefront
Version: 4.9.0
Author: Automattic
WooCommerce support: ✔ Templates

Overrides: –
```
Please let me know if you can now test the checkout issue on this staging site or if you need me to adjust anything else.

Thank you so much for your help! 🙏
Best regards,
Svitlana
Plugin Support shahzeen(woo-hc)
(@shahzeenfarooq)

6 months, 3 weeks ago

Hi there!

Thank you for creating the staging site. I tried accessing it, but it appears that the store pages are currently set to Coming Soon mode.

Just to verify, are you still facing the same issue even after deactivating all plugins except WooCommerce? Also, please make sure WooCommerce is updated to the latest version 10.2.2.

Additionally, please deactivate the SiteSEO – SEO Simplified plugin as well.

If the issue persists, please disable the Coming Soon mode by going to WooCommerce → Settings → Site Visibility, and set the store to Live. Once done, let us know so we can further investigate.

Thread Starter svitlana288
(@svitlana288)

6 months, 3 weeks ago

Hi Shahzeen,
I’ve set the staging site to Live and deactivated the SiteSEO – SEO Simplified plugin as you suggested.
The issue is still present on the checkout page.
You can now access the site here: https://bellasport.com.ua/test

Please check it and let me know what you find.
Thank you so much for your help! 🙏

Best regards,
Svitlana

Moses M. (woo-hc)
(@mosesmedh)

6 months, 3 weeks ago

Hi @svitlana288,

Thank you for getting back to me. I believe the test page you mentioned is the checkout test page you created, correct? Please edit that page and share a screenshot of what’s currently on it, as it appears the checkout shortcode might be missing.

Before you reply, please also go to WooCommerce > Status > Tools, scroll down to Create default WooCommerce pages, and click Create pages. Once that’s done, let me know so I can take another look.

Additionally, the system status report you shared for the staging site isn’t complete. Kindly provide the full report, as I need to review additional details about your WooCommerce setup and page configurations.