Checkout skips step 1 on storefront & alternate shipping with billing info

Nevermind the first question, just discovered it was an issue with the Checkout Field Editor Plugin and fixed it by disabling it. Still wondering about the second question thought but I guess the plugin is not intended to have this option

Hi Samrot,

Thanks for using Fluid Checkout ??

1st question:

That’s good that you were able to solve it. Anyway below is the answer to this question.

Fluid Checkout will skip any step that has all of the required fields filled out. This will make the checkout process super easy and fast for repeat customers, and ensure new customers do not have to go through all the steps again if they leave the checkout page, for checking product information or editing their cart.

Currently, there is no official way to stop Fluid Checkout from skipping completed steps. We’ll evaluate and possibly add this option in the future.

2nd question:

Exactly, Fluid Checkout intends to “fix” the order of the checkout fields by asking for shipping information before billing.

For your specific case, you might need to set up a shipping method for “Local pickup” and set the cart flag “needs_shipping” to false via PHP customization when “Local pickup” is selected.

This is an interesting feature to be added to Fluid Checkout (most likely to the PRO version). We’ve added it to our backlog to analyze this possibility, we’ll get back to you here as soon as the status change, however, this will likely take a good while.

I did a quick search on Google for a solution for this but haven’t found any solution that will likely work with Fluid Checkout. Most of these solutions rely on Javascript to visually hide the shipping fields, which will likely trigger validation errors when submitting the order.

Best,
Diego

Hi Samrot,

We’ve implemented a feature to hide the shipping address fields when a local_pickup shipping method is selected.

In case a local_pickup shipping method is available for the selected shipping country (preferably using Geolocation), the shipping methods list will be displayed above the shipping address fields. This way the users won’t need to fill up the address:
https://t2449427.p.clickup-attachments.com/t2449427/2f470c1d-5627-4b96-a5ea-77290373212c/Screen%20Shot%202021-07-27%20at%2017.14.55.png?view=open

This new feature is not yet fully integrated, but it is available in beta version 1.2.5-beta-2:
https://t2449427.p.clickup-attachments.com/t2449427/389e5379-ad4d-4758-b71b-f6ce28121853/fluid-checkout.zip

Would you be able to test if this solves your issue regarding your 2nd question?

Best,
Diego

Hi Diego,
Thank you for your reply and for this great update! It’s good to know everything you mentioned and I will give it a try to that update. Thank you for listening!

Not sure if I should create a new topic for this but I’ve come across with another thing and wanted to mention it.

In the order summary, next to the name of the item it should appear the quantity of items of each product but instead there is a number 0 (zero) that shows up no matter how many items of each product are in the basket. How can I fix this?

Please let me know if you prefer me to create a new topic for this, I didn’t want to be annoying.

Regards,
Samuel

Hi Samuel,

You are welcome ??

Yes, please create another support topic because that will enter our tasks list as a different task and that helps us to stay organized.

Please also add a link to a screenshot of the issue, sometimes just the screenshot is enough for us to know where the issue is.

You can upload the image to Google Drive or a similar service and add the link to your post, just make sure you can open the link from in a browser with Incognito/Anonymous mode active.

Best,
Diego

Hi Samuel,

I’m marking this thread as resolved as the local pickup feature has been integrated and published in the latest update (1.2.5).

Best,
Diego

Hi Diego, how are you?

I tried the latest update with the integrated local pickup feature but it doesn’t seem to be quite intuitive in my opinion to select the delivery method before entering your address since some delivery methods may not be available in your area and this could be confusing for the client leading to misunderstandings afterwards. I think it was less confusing the way it was before.

I also want to point that the shipping methods should refresh automatically after the customer selects the region / state. Is this is a matter of the plugin or woocommerce itself?

Hi @samrot,

Thanks for your feedback.

I do agree that selecting the shipping method first is not ideal.

The problem is that both “Shipping method” and “Shipping address” are dependent on each other. Some shipping methods will only be available for some areas, and the shipping address might not be needed for some shipping methods such as “Local pickup”.

What we are trying to accomplish with this layout change is:

1. Avoid users having to enter an entire address, and only after that realizing they could have selected “Local pickup” and not need an address at all.

2. Sometimes the “Local pickup” shipping method might be the first or already selected option. When this happens, and the user selects a different shipping method, they might not notice the shipping address section appearing. This is particularly problematic for people with disabilities or keyboard-only users.

Proposed solution:

a. Move the shipping methods below the shipping address (as it was before), and add documentation for shops using “Local pickup” to make sure users select the shipping method already in the product or cart pages. This way, when users get to the checkout they will see or not the shipping address section based on the already selected shipping method.

b. Only show the shipping method section before the shipping address when the “Local pickup” method is already selected.

** What do you think? **

Also, the shipping method section should be refreshed automatically. I tested it here and it is working as intended.

** What country are testing it with? **

Best,
Diego

Hi Diego,

I’m testing it with Argentina and it is not refreshing automatically.
If it gives you a hint, in the cart page I have to hit the refresh button so it updates the available delivery methods once the region / state is selected.

Not sure what the first option implies. Even thought it would be nice that the checkout considers what was selected on previous steps, I wouldn’t rely too much on this information and wouldn’t have the layout based on this info since it is not definitive and could change or take definition during the checkout process. Also, some stores skip the cart page and many don’t have the option to select shipping method in the single product pages and there is some information that is requested regardless of which shipping method you select like the data of the person that will receive the product (by shipping or by pickup) so the only real leftover information is the shipping address, city and maybe the zipcode (if it’s not used to verify the available shipping methods) so these are really the fields that could be added if you select a shipping method or could be hidden if you select a pickup method.

Another option (if you have pickup options enabled) is to enter the delivery information first (name, last name, contact number and region/province/state or zipcode) and then the available delivery options based on that info so if you choose a shipping method you could reveal all the remaining shipping fields to be completed then.

Also, you could consider to display the shipping methods above the order summary in the right (since it is going to interact with it if it adds a shipping price to the total) but this would only apply to desktop devices.

Hope this helps!
Please let me know your thoughts.

Hi @samrot,

## State/Region refresh

It seems the “state/region” refresh only happens when you have the entire shipping address filled. This is the normal WooCommerce behavior.

I noticed, for example, that if I had the “Postcode / Zip” field empty it does not refresh any part of the checkout, also with Fluid Checkout disabled.

—

## Local Pickup

The first option is basically to always display the shipping methods below the address, as it was before. But still hiding the shipping address when “Local pickup” is selected.

#### Revealing remaining address fields

This makes sense for this workflow, however, for a base checkout to be used on many websites as Fluid Checkout, it can lead to many problems with other workflows and plugins.

I’m not sure it if is possible to do it without breaking compatibility with many plugins that depend on the shipping address and methods sections.

#### Showing the shipping methods on the sidebar

Yes, it only works well for the desktop view. On mobile, the order summary is not displayed until the last step. Well, technically, on mobile the user can also access the order summary by clicking the “cart <value>” button on the header, but then they have to know to click there.

That would be too confusing for mobile users.

#### Another possible solution

From what I could see on the annotated screenshots of the Baymard Institute research on this topic, most shops do not show shipping fields when “Local pickup” is selected.

Some of them show extra contact fields for “Pickup contact person(s)” which I think is a better solution. See an example here:
https://baymard.com/ecommerce-design-examples/65-store-pickup/4274-staples-step-4

And all 23 examples here:
https://baymard.com/checkout-usability/benchmark/step-type/store-pickup

This is similar to your suggested solution, but without using the shipping address fields (first name, last name, and phone) as the pickup person fields.

** What do you think? **

Best,
Diego

Hi Diego,

## State/Region refresh
You are right! Thank you for that info!!

#### Another possible solution – Some of them show extra contact fields for “Pickup contact person(s)” which I think is a better solution.
Couldn’t agree more. I also think this is the best solution and that you really understood what I was talking about.

Please let me know if there is anything else I can help you with.
Best,
Samuel

Hi @samrot,

I arrived at the conclusion that the best solution would be to add a substep to select between “Postal Delivery” and “Pickup” before the shipping or pickup fields, similar to what Zalando did:
https://baymard.com/ecommerce-design-examples/65-store-pickup/4512-zalando-step-5

Then, when “Pickup” is selected, the shipping address would be hidden and the “pickup contact” fields would be displayed instead.

The thing is, this new feature is not a trivial change and is something we can’t focus on right now. I added it to our backlog and will get back to it at some point.

As the current solution is not ideal for your workflow, and if you want to move the shipping methods back to below the shipping address fields, please let me know and I can provide you with a code snippet.

Best,
Diego

Hi @diegoversiani,

Thank you for your response.

Ok, that’s great to hear.

Until those changes are ready, can we go back to the previous version and move the shipping methods below the shipping address (as it was before) so the available shipping methods display only after customer enters the delivery address?

Regards,
Samuel

Hi @samrot,

Do you still want the “Shipping Address” fields to be removed (all of them), as it is doing now, and only move the “Shipping Methods” below it (see screenshot)?

https://t2449427.p.clickup-attachments.com/t2449427/4f4afb00-0722-437b-a5fc-290cafe9d619/Screen%20Shot%202021-08-18%20at%2021.13.37.png?view=open

If so, add this snippet to your functions.php:

function fluidcheckout_move_shipping_methods_below_address() {
	remove_action( 'fc_output_step_shipping', array( FluidCheckout_Steps::instance(), 'output_substep_shipping_method' ), 10 );
	remove_action( 'fc_output_step_shipping', array( FluidCheckout_Steps::instance(), 'output_substep_shipping_address' ), 20 );
	add_action( 'fc_output_step_shipping', array( FluidCheckout_Steps::instance(), 'output_substep_shipping_address' ), 10 );
	add_action( 'fc_output_step_shipping', array( FluidCheckout_Steps::instance(), 'output_substep_shipping_method' ), 20 );
}
add_action( 'wp', 'fluidcheckout_move_shipping_methods_below_address', 6 );

Otherwise, if you want to go back to the original behavior, without these “local pickup” customizations that were introduced in v1.2.5, then I’ll ask you to wait a few days as I need to make some changes to the code to allow removing those customizations.

Best,
Diego

Hi @diegoversiani,

I would like to go back to the original behavior since, by default, when using the code you kindly provided, it shows a shipping price that may not be the one that applies to the customer delivery area so it may be confusing and also disappointing for the customer to see that price increase when they enter the shipping address.

Looking forward to the next version then.

Regards,
Samuel