Multi-step Checkout Billing Fields out of Order

Additional information. Multi-step also removes the ability to add a coupon. I’ve created a page with screen captures of both regular checkout and Multi-Step checkout high-lighting the differences.

https://hermitscupboard.com/multistep-checkout-problem/

Thank You,
Rev. Dr. Lloyd

Hello @hermcupadmin,

Thank you for reaching out,

The solution to achieve it is customization, and it needs familiarity with PHP, if you are unfamiliar with PHP, you can contact a PHP expert. To do this, first, you need to use the child theme. You can copy the metafile from the partials folder in the child theme following the same path and then make the necessary changes.

For more information about that, please follow the steps below:

By using FTP or cPanel access (if didn’t use the localhost), Go to this directory:
wp-content\themes\oceanwp\partials
Find your template which you want to customize and copy that template file(in your case, for example, you need to change the date on the blog page, so you need to use the blog template(s): https://i.postimg.cc/brv9gn9s/image.png).

Then head over to the same path on the child theme. There isn’t an entry folder as a default on your child theme, so you need to create a new one(one time).

Example: If you want to change the HTML tags structure in the single blog post featured image for standard post format, all you need in this step is the following:

1. Head over to your WP root > wp-content > themes > oceanwp > partials> single > media path.
2. Then, find the “blog-single.php” file and copy this file.
3. After that, go back to the themes folder (wp root > wp-content > themes) and go to the oceanwp-child-theme-master folder.
4. Create a new folder with the “partials” name in the child theme.
5. Go to the /partials/ folder and create a new folder with the “single” name.
6. Go to the /single/ folder and create a new folder with the “media” name.
7. Go to the /media/ folder and paste the “blog-single.php” file here.

* Please check this screenshot: https://i.postimg.cc/sxjYTWyt/image.png.
* Download child theme: https://docs.oceanwp.org/article/90-sample-child-theme.
* Developer docs: https://docs.oceanwp.org/collection/19-developer-doc.

Note: It’s working with the /woocommerce/ folder or root of the theme files.

I hope it helps.
Best Regards

The Multi-step Checkout is a feature of Ocean WP. So you’re claiming that users should expect this Ocean WP feature to present the checkout fields out of order as part of the feature?

I think your reply is well intentioned, but the true problem is there is a bug in the OceanWP Multi-step Checkout feature causing the coupon option to disappear and the billing fields of email, first name, and last name to be out of sequence.

Sincerely,
Rev. Dr. Lloyd

Hello @hermcupadmin,

Thank you for reaching out,

Regarding ordering the fields on Multi-step Checkout, unfortunately, this feature is unavailable on OceanWP theme. Achieving it would require customization.

Regarding the coupon issue that you have raised on this topic, I fully examined it and didn’t see any issue on my end. As far as I’ve tested, the coupon is placed only in the last step(4. payment info), and in the step where you have the “first name” and the “last name” inputs, there is no coupon field, which it is not possible to make those fields disappear.

By the way, I couldn’t open your website to check it live(https://postimg.cc/p5Q9JWMt).

We need to reproduce this issue on a brand-new WordPress.

It would be helpful if you could provide us with step-by-step instructions on how to recreate the issue with a fresh WordPress installation so I can better understand and check it. You can provide us with screenshots or a short video of the issue you faced, step by step. To upload any files, use the following online services:
https://postimages.org
https://loom.com
https://drive.google.com
https://wetransfer.com
___________________

In the meantime, if possible, perform a basic troubleshooting checkup method and make sure the issue is related to our theme or plugin(s). To do this, deactivate all other plugins, then activate them one by one and check for this issue. Continue doing this until you find out what product is causing a conflict with our product. Then provide the details as explained above.

Note 1: You can try troubleshooting on the staging website/or on a fresh installation and ensure that you are using the latest version of the theme and plugins(before updating, please get a full backup from your website).

Note 2: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, remember to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

Please keep us posted.
Best Regards

Access to our site is restricted to from within the US. International traffic is blocked to prevent fraud.
OceanWP advertises the Multi-step Checkout as a basic feature of the theme. https://oceanwp.org/oceanwp-features-for-woocommerce/.

Hello @hermcupadmin,

Thank you for reaching out,
Sorry, but I didn’t quite catch the main point of your issue in this topic.

I know that we have Multi-step Checkout in the OceanWP theme, but the information provided in this thread regarding the problems you are facing is insufficient for troubleshooting purposes and the possibility to understand why this is happening on your end.

Would you please share a short video of the issue you have?
And tell us how we can replicate your steps to arrive at the issue on a fresh WordPress installation. Also, please tell me how you would like that section to look like.

Thank you for understanding,
Best Regards

I posted a video of the problem on YouTube. https://youtu.be/7oPLyGMDVCU I start with the site in the single page checkout format, noting the placement of the email field, first name field, and last name field. Next, I walk through the steps in customize to turn on multi-step checkout. Once the multi-step checkout displays, I explain how the name, email and last name are not in logical order.

Thank you for pointing out the ‘enter coupon’ is at the top of the last step in multi-step checkout and not at step one. I appreciate the accuracy of that response.

Sincerely,
Rev. Dr. Lloyd

Hello @hermcupadmin,

Thank you for reaching out,

As I explained in the first reply, you need personalization regarding the coupon positioning in the Multi-Step Checkout. We cannot change the coupon position, so you need to customize it.

Regarding the using tab to move the steps, since it is customized, unfortunately, I can’t provide a solution to solve that issue since you made some changes on the default form.
This is the default form in the OceanWP theme: https://postimg.cc/5XQb4R6d
This is your changes: https://postimg.cc/4KGMDLc1

We didn’t provide this, and customization isn’t included in the support.
On the other hand, depending on your customization, the solution to solve that issue would be different, too, and we don’t know how you changed the positioning of those inputs(email, first and last name). However, as a general solution, I would like to share these codes, which can help you change the positioning of the input, order the tabs correctly, and add classes to make the tabs full-width or half-width.

PHP:

add_filter( 'woocommerce_billing_fields', 'custom_override_billing_fields_my_account', 10, 2 );
function custom_override_billing_fields_my_account( $fields, $country ) {
	$fields['billing_email']['priority'] = 1;
	$fields['billing_first_name']['priority'] = 2;
	$fields['billing_last_name']['priority'] = 3;
    return $fields;
}

CSS:

#checkout-wrapper form.checkout #billing_email_field {
    float: none;
    width: 100%;
}

This is a way I customized that: https://postimg.cc/VJ4LvV8K.
The tab key will work in this ordering: email > first name > last name.

I hope it helps.
Best Regards

I am sorry for being a pain. I don’t have any customer code. I’m not that intelligent. However, your consistent rebuttal had me digging deeper than I’ve had.

You are correct, Ocean WP is fine. After a few hours of testing, I found the problem happens with WooCommerce Stripe Payment Gateway.

Please accept my apologies for being a bother.

Sincerely,
Rev. Dr. Lloyd