Removing Booking Plugin CSS From Frontend Form and Calendar

  • Resolved davpdav

    (@davpdav)


    1 month, 3 weeks ago

    You are trying to remove CSS stylesheets generated by a booking plugin on the frontend form and calendar. However, the solution using wp_dequeue_style and wp_deregister_style doesn’t seem to work. Here’s a more effective method that directly removes the <link> tag output for the stylesheets in the frontend.

    function remove_booking_plugin_styles()
    {
      wp_dequeue_style('wpdevelop-bts');
      wp_deregister_style('wpdevelop-bts');

      wp_dequeue_style('wpdevelop-bts-theme');
      wp_deregister_style('wpdevelop-bts-theme');

      wp_dequeue_style('wpbc-tippy-popover');
      wp_deregister_style('wpbc-tippy-popover');

      wp_dequeue_style('wpbc-tippy-times');
      wp_deregister_style('wpbc-tippy-times');

      wp_dequeue_style('wpbc-material-design-icons');
      wp_deregister_style('wpbc-material-design-icons');

      wp_dequeue_style('wpbc-ui-both');
      wp_deregister_style('wpbc-ui-both');

      wp_dequeue_style('wpbc-time_picker');
      wp_deregister_style('wpbc-time_picker');

      wp_dequeue_style('wpbc-time_picker-skin');
      wp_deregister_style('wpbc-time_picker-skin');

      wp_dequeue_style('wpbc-client-pages');
      wp_deregister_style('wpbc-client-pages');

      wp_dequeue_style('wpbc-fe-form_fields');
      wp_deregister_style('wpbc-fe-form_fields');

      wp_dequeue_style('wpbc-calendar');
      wp_deregister_style('wpbc-calendar');

      wp_dequeue_style('wpbc-calendar-skin');
      wp_deregister_style('wpbc-calendar-skin');

      wp_dequeue_style('wpbc-flex-timeline');
      wp_deregister_style('wpbc-flex-timeline');
    }
    add_action('wp_enqueue_scripts', 'remove_booking_plugin_styles', 20);

    If de-queuing and de-registering styles aren’t working as expected, an alternative is to directly filter the HTML output to remove the specific <link> tags for the stylesheets. The following solution utilizes output buffering to accomplish this.

    function remove_booking_plugin_styles_output() {
        // Start output buffering and modify the final output
        ob_start(function ($buffer) {
            // Define the patterns to match the stylesheet <link> tags
            $patterns = [
                '/<link[^>]*id=\'wpdevelop-bts-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpdevelop-bts-theme-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-tippy-popover-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-tippy-times-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-material-design-icons-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-ui-both-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-time_picker-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-time_picker-skin-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-client-pages-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-fe-form_fields-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-calendar-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-calendar-skin-css\'[^>]*>/i',
                '/<link[^>]*id=\'wpbc-flex-timeline-css\'[^>]*>/i'
            ];

            // Remove all matching <link> elements from the HTML output
            $buffer = preg_replace($patterns, '', $buffer);
            return $buffer;
        });
    }

    // Hook the output buffer function to the wp_head and wp_footer actions
    add_action('wp_head', 'remove_booking_plugin_styles_output', 1);
    add_action('wp_footer', function () {
        ob_end_flush(); // End buffering and flush the content to the browser
    }, 100);

    Could you provide me solution with wp_dequeue_style?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author wpdevelop

    (@wpdevelop)

    Hello.

    Please note, you can disable loading of Booking Calendar CSS and JavaScript files in the settings of the Booking Calendar. You can do this at the WP Booking Calendar > Settings General page in “Advanced” section. Please open that page and enable this option: “Load JS and CSS files only on specific pages” .

    You need to specify at least one relative URL of the page, where you want to load the CSS and JavaScript files of Booking Calendar (in text area under the “Load JS and CSS files only on specific pages” option ).

    Kind Regards.

    Thread Starter davpdav

    (@davpdav)

    It seems like the option you’re referring to—”Load JS and CSS files only on specific pages”—disables both JavaScript and CSS for the Booking Calendar plugin when not on the specified pages. Unfortunately, there isn’t an inbuilt option to disable just the CSS while keeping the JavaScript active.

    Plugin Author wpdevelop

    (@wpdevelop)

    Ok in this case, please use instead of this code (in your initial example):

    add_action('wp_enqueue_scripts', 'remove_booking_plugin_styles', 20);

    this code:

    add_action('wp_enqueue_scripts', 'remove_booking_plugin_styles', 1000000002);
    Thread Starter davpdav

    (@davpdav)

    It works, thank you!

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.