search

woocommerce / woocommerce

A customizable, open-source ecommerce platform built on WordPress. Build any commerce solution you can imagine.
https://woocommerce.com
9.42k stars 10.77k forks source link

Customizer overwrites field visibility of Checkout block #52724

Closed nielslange closed 20 hours ago

nielslange commented 3 days ago

Prerequisites

Describe the bug

When using a classic theme with the shortcode-based checkout, merchants can adjust the visibility settings of fields like the company name, address line 2, and phone number in the Customizer by navigating to Appearance > WooCommerce > Checkout. However, if the merchant switches to using the Checkout block with a classic theme, the Checkout section in the Customizer becomes inaccessible. Moreover, when a block theme is active, the entire Customizer is no longer visible.

If a merchant previously set any of these fields (company name, address line 2, or phone number) as required in the Customizer and then switches to the Checkout block, they lose access to these settings. Adjusting the visibility of these fields within the page editor does not resolve the issue, as the Customizer’s settings override the Checkout block settings. This situation is confusing for merchants, as the cause of the conflict and the solution are not immediately apparent. I encountered this issue while investigating "Company name is required" is displayed when company is optional.

Here are additional reports of this issue:

Expected behavior

The visibility settings (for the company name, the address line 2 and the phone fields) in the Checkout block must work independent of the visibility settings in the Customizer.

Actual behavior

The visibility settings (for the company name, the address line 2 and the phone fields) in the Customizer overwrite the visibility settings of the Checkout block.

Steps to reproduce

  1. Ensure that you have one page that contains the shortcode checkout [woocommerce_checkout] and one page that contains the Checkout block.
  2. Install and activate the Storefront theme.
  3. Go to WooCommerce > Settings > Advance.
  4. Define the page with the shortcode checkout as the Checkout page.
  5. Go to Apperance > Customize > WooCommerce > Checkout.
  6. Set the visibility of the Company name field, the Address line 2 field and the Phone field to Required.
  7. Go to WooCommerce > Settings > Advance.
  8. Define the page with the Checkout block as the Checkout page.
  9. Open the frontend in incognito mode.
  10. Add a product to the cart.
  11. Go to the page with the Checkout block.
  12. Provide use details and place the order.
  13. See that the Company name field, the Address line 2 field and the Phone field are not visible.
  14. See that the error message There was a problem with the provided shipping address: Company name is required, Apartment, suite, unit, etc. is required is visible.

Image

WordPress Environment

System Status Report ``` ### WordPress Environment ### WordPress address (URL): [Redacted] Site address (URL): [Redacted] WC Version: 9.5.0-dev Legacy REST API Package Version: The Legacy REST API plugin is not installed on this site. Action Scheduler Version: ✔ 3.8.2 Log Directory Writable: ✔ WP Version: 6.6.2 WP Multisite: – WP Memory Limit: 512 MB WP Debug Mode: – WP Cron: ✔ Language: en_US External object cache: – ### Server Environment ### Server Info: nginx/1.25.4 PHP Version: 8.2.19 PHP Post Max Size: 512 MB PHP Time Limit: 30 PHP Max Input Vars: 1000 cURL Version: 8.8.0 (SecureTransport) OpenSSL/3.3.0 SUHOSIN Installed: – MySQL Version: 8.3.0 Max Upload Size: 512 MB Default Timezone is UTC: ✔ fsockopen/cURL: ✔ SoapClient: ✔ DOMDocument: ✔ GZip: ✔ Multibyte String: ✔ Remote Post: ✔ Remote Get: ✔ ### Database ### [REDACTED] ### Post Type Counts ### attachment: 23 customize_changeset: 1 page: 11 post: 16 product: 18 product_variation: 7 revision: 19 shop_coupon: 1 shop_order_placehold: 5 wp_global_styles: 2 wp_navigation: 1 ### Security ### Secure connection (HTTPS): ✔ Hide errors from visitors: ✔ ### Active Plugins (6) ### Debug Log Manager: by Bowo – 2.3.3 Query Monitor: by John Blackbourn – 3.16.4 SMNTCS Nord Admin Theme: by Niels Lange – 1.4 SMNTCS Show Symlinked Plugins: by Niels Lange – 1.3 SMNTCS Theme List View: by Niels Lange – 1.3 WooCommerce: by Automattic – 9.5.0-dev ### Inactive Plugins (0) ### ### Dropin Plugins () ### db.php: Query Monitor Database Class (Drop-in) ### Settings ### Legacy API Enabled: – Force SSL: – Currency: EUR (€) Currency Position: left Thousand Separator: , Decimal Separator: . Number of Decimals: 0 Taxonomies: Product Types: external (external) grouped (grouped) simple (simple) variable (variable) Taxonomies: Product Visibility: exclude-from-catalog (exclude-from-catalog) exclude-from-search (exclude-from-search) featured (featured) outofstock (outofstock) rated-1 (rated-1) rated-2 (rated-2) rated-3 (rated-3) rated-4 (rated-4) rated-5 (rated-5) Connected to WooCommerce.com: – Enforce Approved Product Download Directories: ✔ HPOS feature enabled: ✔ Order datastore: Automattic\WooCommerce\Internal\DataStores\Orders\OrdersTableDataStore HPOS data sync enabled: – ### Logging ### Enabled: ✔ Handler: Automattic\WooCommerce\Internal\Admin\Logging\LogHandlerFileV2 Retention period: 30 days Level threshold: – Log directory size: 22 KB ### WC Pages ### Shop base: #55 - /products-beta/classic-shop/ Cart: #57 - /cart/ - Contains the woocommerce/cart block Checkout: #58 - /checkout/ - Contains the woocommerce/checkout block My account: #61 - /my-account/ Terms and conditions: #62 - /terms/ ### Theme ### Name: Storefront Version: 4.6.0 Author URL: https://woocommerce.com/ Child Theme: ❌ – If you are modifying WooCommerce on a parent theme that you did not build personally we recommend using a child theme. See: How to create a child theme Theme type: Classic theme WooCommerce Support: ✔ ### Templates ### Overrides: – ### Admin ### Enabled Features: activity-panels analytics product-block-editor coupons core-profiler customize-store customer-effort-score-tracks import-products-task experimental-fashion-sample-products shipping-smart-defaults shipping-setting-tour homescreen marketing mobile-app-banner onboarding onboarding-tasks pattern-toolkit-full-composability product-custom-fields remote-inbox-notifications remote-free-extensions payment-gateway-suggestions printful shipping-label-banner subscriptions store-alerts transient-notices woo-mobile-welcome wc-pay-promotion wc-pay-welcome-page launch-your-store Disabled Features: product-data-views experimental-blocks coming-soon-newsletter-template minified-js product-pre-publish-modal settings async-product-editor-category-field product-editor-template-system blueprint reactify-classic-payments-settings use-wp-horizon add-to-cart-with-options-stepper-layout Daily Cron: ✔ Next scheduled: 2024-11-12 05:09:17 +00:00 Options: ✔ Notes: 66 Onboarding: - ### Action Scheduler ### Complete: 33 Oldest: 2024-11-11 04:14:07 +0000 Newest: 2024-11-12 03:24:10 +0000 Failed: 2 Oldest: 2024-06-04 04:57:06 +0000 Newest: 2024-11-11 05:46:32 +0000 Pending: 2 Oldest: 2024-11-12 03:24:20 +0000 Newest: 2024-11-12 04:14:07 +0000 ### Status report information ### Generated at: 2024-11-12 03:25:08 +00:00 ```

Isolating the problem

ralucaStan commented 20 hours ago

This will be fixed via https://github.com/woocommerce/woocommerce/issues/42773. Thank you for surfacing your findings Niels.

nielslange commented 11 hours ago

This will be fixed via #42773. Thank you for surfacing your findings Niels.

Thank you for pointing out #42773, @ralucaStan. Great to see that @mikejolley is already working on this issue.