Conflict between Elementor’s Improved CSS Loading and WooCommerce TAC checkbox

  • Screenshot: https://i.imgur.com/N1RD5Ck.png

    Reproduction steps:

    1. Install Elementor and WooCommerce
    2. Enable WooCommerce’s “terms and conditions” checkbox
    3. If needed, create a terms and conditions page with Elementor and link it up to WooCommerce via the Customizer.
    4. Add a product to your cart and go to the checkout page
    5. Click the “terms and conditions” text to show the terms and conditions preview box
    6. Observe that the terms and conditions preview box includes escaped CSS before the rest of the content

    Workaround: Go to wp-admin > Elementor > Settings > Features and set “Improved CSS Loading” to “Inactive”. Afterwards, edit the affected page (Terms and Conditions) with Elementor, make some kind of small edit so that the update button appears, and click Update. Also, clear your site’s cache if needed.

    Relevant WooCommerce files:

    1. woocommerce/includes/wc-template-functions.php
    2. woocommerce/templates/checkout/terms.php

    Summary: Elementor’s “Improved CSS loading” feature is enabled by default, but it conflicts with the T&C preview in WooCommerce’s default Terms And Conditions checkbox feature. Although the workaround above fixes it, these two plugins are used widely enough that it would make sense for one or both plugin authors to fix the issue to ensure full compatibility between the two plugins.

Viewing 1 replies (of 1 total)

  • I just used this css to remove the unneeded 1st paragraph

    .woocommerce-terms-and-conditions > p:nth-child(1){
    display:none;
    }

Viewing 1 replies (of 1 total)
  • The topic ‘Conflict between Elementor’s Improved CSS Loading and WooCommerce TAC checkbox’ is closed to new replies.