woocommerce / storefront

Official theme for WooCommerce
https://wordpress.org/themes/storefront/
959 stars 472 forks source link

Account for order attribution being between customer details and add-ons #2154

Open agibson-godaddy opened 2 weeks ago

agibson-godaddy commented 2 weeks ago

Storefront has CSS to integrate with the WooCommerce Checkout Add-Ons plugin. However, the existing CSS does not work when "Order Attribution" is turned on, because that changes the markup of the page in a way that the CSS selector is no longer accurate.

Screenshots

Here's what it looks like before (trunk):

Screenshot 2024-06-19 103011

And the corresponding markup:

Screenshot 2024-06-19 103114

Here's how it's fixed with this PR:

Screenshot 2024-06-19 103335

How to test the changes in this Pull Request:

  1. Install the WooCommerce Checkout Add-Ons plugin.
  2. Go to WooCommerce > Checkout Add-Ons and create an add-on.
  3. Go to WooCommerce > Settings > Advanced > Features and make sure "Order Attribution" is checked on.
  4. Go to Appearance > Customize > WooCommerce > Checkout and configure the add-on settings like this: Screenshot 2024-06-21 124721
  5. Add an item to your cart and go to the checkout page.
  6. In trunk you will see the layout is broken. Specifically the order summary appears very far down on the page.
  7. With this fix applied, you will see the expected column layout is restored.

Changelog

Fix checkout page layout when using "Order Attribution" setting and "WooCommerce Checkout Add-Ons" extension.

imanish003 commented 2 weeks ago

Hey @agibson-godaddy,

Thank you for the PR. I tried to reproduce the issue but cannot reproduce it. I tried on WC 9.0.1 and 8.9. Please let me know which version of WC you used when you faced this issue. Also, can you try to reproduce it on WC 9.0? I would really appreciate it if you could provide more info to reproduce the issue. Thanks in advance 🙇

agibson-godaddy commented 2 weeks ago

Hi @imanish003 ,

Thanks for taking a look! Sorry for the confusion. It looks like the WooCommerce 9.0 update mostly fixes this issue via this PR: https://github.com/woocommerce/woocommerce/pull/46834/files

Previously it was adding the attribution to the woocommerce_checkout_after_customer_details hook only, which is what causes the problem in question. Now it uses an array of possible hooks. The problem no longer happens for me with the new hook set.

You can simulate the issue with this filter:

add_filter('wc_order_attribution_stamp_checkout_html_actions', fn($hook) => ['woocommerce_checkout_after_customer_details']);

I suppose it's up to you if you still want to account for that or not. People could still get the error if they end up using that woocommerce_checkout_after_customer_details hook for stamping the attribute HTML.

agibson-godaddy commented 2 weeks ago

Also one other thing for replication: the add-on settings must be configured like this:

Screenshot 2024-06-21 124721

roykho commented 1 week ago

Hi @agibson-godaddy

Firstly thanks for the contribution as mentioned above! Greatly appreciated.

Thanks for taking a look! Sorry for the confusion. It looks like the WooCommerce 9.0 update mostly fixes this issue via this PR: https://github.com/woocommerce/woocommerce/pull/46834/files

If the above PR fixes the issue for you, I would suggest closing this PR and if further issue arises then open a new PR that specifically deals with the new issue. Would that be ok?