Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

The Order Delivery Date Pro Plugin - for Woocommerce will allow you to disable the pickup calendar on the checkout page through CSS.

image-20240516-152507.pngImage Added

Step-by-Step Guide:

  1. Inspect Element:

    • First, right-click on the calendar field.

    • Select "Inspect Element" from the context menu.

image-20240516-151843.pngImage Added

  1. Locate the ID:

    • In the inspect element panel, you can find the ID attribute associated with the calendar field.

    • For instance, in this case, it is identified as "e_deliverydate_0_field".

    • The ID will be highlighted, and you can find it labeled in blue within the inspection panel.

  2. Utilizing CSS:

    • With the identified ID, you can now utilize CSS to modify its behavior.

    • Navigate to the customizer section of your website.

  3. Access Additional CSS:

    • Look for the option labeled "Additional CSS" within the customizer settings.

image-20240516-152150.pngImage Added

  1. Apply CSS Rules:

    • Add the ID selector preceded by a hash symbol (#) followed by the desired CSS attribute to disable pointer events.

    • For example, if the ID is "e_deliverydate_0_field", input "#e_deliverydate_0_field { pointer-events: none; }".

    • This CSS rule effectively disables pointer events for the identified calendar field.

image-20240516-152250.pngImage Added

By following these steps, you can effectively disable the pickup calendar on the checkout page using CSS customization in Woocommerce.