Woocommerce checkout notices appearing at top of page??

I have a checkout page configured using Layouts.

I have included the woocommerce notices element on the page but it doesn’t appear in the correct place. No matter where I insert the woocommerce notices they always appear at the top of the page content which messes up the page.

See screenshots.

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

Thanks. See below.

Also, the contact form 7 form (bottom of every page) doesn’t display on the Checkout page for some reason?? It’s in exactly the same place as all the other pages but gives the error: “Error: This contact form is placed in the wrong place.”

Could you look at this too please?

Hello,

May be there is an issue with the 3rd party plugins. Please deactivate all the 3rd party plugins and activate only theme-required plugins on the site and then check the issue. I am sure your issue will be solved. Then Activate the 3rd party plugins one by one and check which plugin is creating the issue for you.

Otherwise, if the issue still exists then keep the 3rd party plugins deactivated and share the WP admin login details of your site so I will check and give you a possible solution.

Best Regards.

Disabled plugins and both issues (incorrect woocommerce notifices location and broken CF7 on checkout page).

You already have the login credentials from my previous comment.

*both issues still present

With only woodmart core, wpbakery, woocommerce and password protected plugin enabled I still get the two issues I describe above.

Could you please escalate this issue as I believe it may be a bug and not the fault of my setup.

Note; you disabled the password protected plugin, I have just enabled it. Please do not disable this. I do not want the site public or indexable at the moment. The issues occur with or without this plugin so it can remain enabled.

Hello,

The issue is that you have created only a “Checkout form” layout, for the correct work there should be the “Checkout top content” – https://prnt.sc/-7i8cTEXkYbW

In general, the checkout page contains two different areas that need to be customized separately. A checkout form that will contain all checkout fields and buttons, and Checkout top content needed for login and coupon forms, notices.

Kind Regards

Thanks but that’s completely broken my background. It also shows the white box which splits the page. See attached.

Attachments:

You must be logged in to view attached files.

Surely Top Content should be inserted into the checkout layout and not be its own layout? That doesn’t really make sense.

I don’t know if you can tag here but; @admin

Artem, Why is checkout top content a separate layout entirely? Surely it makes more sense to have it as an element to insert into the normal checkout layout?

We need to launch this site ASAP so for the time being I have added CSS to hide the woocommerce notices on the checkout page.

Can I trigger a custom warning to complete required form fields on checkout instead?

Hello,

For this, you have to create the Checkout Top content layout separately and the Checkout form layout separately in the layouts: https://ibb.co/HVM1dt4

You should add the notices and page title and checkout steps in the Checkout top content layout and other forms in the checkout Froms layout then the notices will show fine.

You need to create both layouts separately and do not use the Notices and checkout steps in the Checkout form layout.

Best Regards.

Hi, could you please escalate this issue (perhaps to Artem?) because having checkout top content and the other checkout elements in different layouts it completely screws up the page.

I don’t understand why they need to be two different layouts, they should just be elements on the same layout surely??

Hello,

Checkout consists of two layout parts: one for the actual checkout form (which is wrapped with HTML form tag). And the top part needs to be outside the form, that is why it needs to be created separately. We recommend you import some of our prebuilt checkouts and start customizing it to make sure that it is done correctly. Also, refer to our documentation. https://xtemos.com/docs-topic/checkout-page-builder/

Kind Regards

Hi Artem, the issue with that is that it duplicates the background (see my previous screenshots).

It seems very weird that these need to be individual layouts for two parts of the same page. Is this entirely necessary? Eg; would putting them in two different rows not be a better solution? Then you can have a row with the background, an inner row with top content and then another inner row below it with the checkout layout?

Hello,

It is necessary because of WooCommerce checkout structure and the nature of HTML forms. You can’t put login and coupon code inside the main form with checkout fields. They will not work because it is not allowed to put one form inside another.
In your case, we recommend you to set the background via Theme Settings and not for particular rows on your page with WPBakery.

Kind Regards

Thanks. I’ll make those changes and see how I get on.

One thing which is still a concern though; the woocommerce notices opens with a white background, splitting the page. I’ve used CSS to try and make this transparent but not had any joy with that.

Yes, it is because the background image is set for the row and not for the entire page. Try to set it via Theme Settings and it will work correctly.

Hi Artem (@admin). Many thanks for clarifying. I’ve now made those changes (removing row bg’s and using settings instead). Thanks for your help with that.

1) I’m still having the issue I mentioned previously where the contact form 7 form is producing an error on the checkout page only. Would you be able to take a look at this please?

2) If you add an item to basket and go to the cart, then remove the product from the cart, it forwards to the empty cart page which is quite malformed. Any advice on this?

Thanks.

There is also an issue with the Order Complete step of the checkout process. Link can be found in the private info box.

Just realised that link above wont work, so I’ve supplied a screenshot below.

Attachments:

You must be logged in to view attached files.

I have now also attached a screenshot of how it looks when you remove a product from your cart. If you just go to the /cart page then it displays fine, this issue only pops up when you remove an item from your cart.

Attachments:

You must be logged in to view attached files.

Update, and to keep things organised as I know I’ve commented a lot here.. :

– I fixed the issue with malformed empty cart page by creating an empty cart layout, adding the empty cart element and the html block for the footer. This works but the notice appears at the very top of the page, and there is no “top content” option for this so I cannot move it down. Please advise. Screenshot attached.

– The issue with the thankyou page is still present. The “enable default thankyou page” option nor the “Extra content for Thank you page” option don’t have any effect. There is no thankyou page layout option so I cannot customise this. I’ve also attached the screenshot of this to keep things tidy.

– The issue with the CF7 form on the checkout page is still present. I’m not understanding why this is only happening on the checkout page.

Attachments:

You must be logged in to view attached files.

Hello,

1. You need to add padding top for the first row in your Empty cart content as shown on the screenshot https://monosnap.com/file/8unPtYWlU8wBSF4BTzj1B7atl5CSrP

2. You need to put the [woocommerce_checkout] to the checkout page to fix this https://gyazo.com/b488eb5c4bc6bebc904b7acc569ab986

3. Checkout content is wrapped in HTML form tag so you can’t place any forms inside it. You can either create a prefooter for this form or add it to the checkout top content.

Kind Regards

Thanks Artem, I will look at this today.

I can see from my security logs that you’re in Ukraine. I wish calm skies and peace soon for you. Stay safe.

1) I added padding to the top row and then removed the padding at the top of the empty cart text to bring everything together, this now displays ok. Thanks.

2) I thought the use of the checkout layout negates the need to include the [woocommerce_checkout] shortcode? If I include the [woocommerce_checkout] shortcode then I cant have a customised checkout form configured through Layouts right? Is there perhaps a way for me to have an entirely separate Thankyou page which isn’t part of the checkout process which would help me workaround this issue?

3) Thanks, this was very confusing as it was only happening on the checkout page. I think for now I will just hide the CF7 form on the checkout page and perhaps try and workaround this later down the line. Thanks.

Point number 2 is the only real issue right now.

I added the woocommerce checkout shortcode to the checkout page (not the checkout layout) and its still broken. See screenshot.

Attachments:

You must be logged in to view attached files.

[Author]

Posts