This is the css I'm trying to remove (image from Google Page Speed Insights). I put this in my functions.php file but I'm still getting the same result when I rerun Google Page Speed Insights
add_action( 'wp_enqueue_scripts', 'remove_block_css', 9999999999999999 );
function remove_block_css() {
wp_dequeue_style( 'wc-blocks-style' ); // WooCommerce
}
Related
I am using WordPress and I installed the Woocommerce plugin.
I added the template folder in my theme and started to customize my theme.
Now, I have to remove the Woocommerce.css from my theme and I found code on the official website here
I added the same code in the function.php
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
or
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
but both answers are not working. I have installed the 5.7.1 Woocommerce.
How can I solve this issue?
function.php
function customtheme_scripts() {
wp_enqueue_style( 'customtheme-style', get_stylesheet_uri(), array(), time() );
wp_style_add_data( 'customtheme-style', 'rtl', 'replace' );
wp_enqueue_script( 'customtheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), _S_VERSION, true );
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' );
}
wp_dequeue_style( 'customtheme-woocommerce-style' );
}
add_action( 'wp_enqueue_scripts', 'customtheme_scripts' );
view source
The domain name is just an example.
This answer has been fully tested on woocommerce 5.x+ and works fine on the default woo style sheets! If you're using a custom theme and/or custom style sheet then you may encounter some discrepancies.
What you see on the documentation page, no longer works on woo 4+, according to their github page.
So you need to dequeue its styles!
wp_dequeue_styleDocs
So if you only want to remove woocommerce.css file, then you could do this:
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('woocommerce-general'); // This is "woocommerce.css" file
}
However, if you want to remove all of the style sheets loaded by woo, then you could use this:
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('wc-block-vendors-style');
wp_dequeue_style('wc-block-style');
wp_dequeue_style('woocommerce-general');
wp_dequeue_style('woocommerce-layout');
wp_dequeue_style('woocommerce-smallscreen');
}
If you still can see the styles, then try to clean your cache.
UPDATE related to the question "custom style sheet"
At the time that I was writing the answer you had not provided any screenshot of your style sheet, nor did you say anything about using a custom style sheet. That's why you were not able to get it to work.
Please do NOT copy/paste if you're using a custom style sheet, like the custom css file used in the question. wp_dequeue_style function takes your style sheet handle as the argument. So please read the documentation first. You're using a custom handle name (i.e "customtheme-woocommerce-style"), therefore, you need to use that handle name.
add_action('wp_enqueue_scripts', 'removing_woo_styles');
function removing_woo_styles()
{
wp_dequeue_style('customtheme-woocommerce-style'); // This is your "custom style sheet" file.
}
Also note that commenting out the enqueue section in the main file (i.e inc/woocommerce.php) may work temporarily but on the next woo update, it'll come back again. So, it's recommended to avoid updating your template files as much as possible unless you really have to which is not the case here!
I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.
This is how I wanted to start doing it:
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.
This is the list of files being dequeued:
custom-frontend.min.css
post-1501.css (this is the css file of the page I was looking at while making these changes)
frontend-legacy.min.css
post-1396.css (some global Elementor's css)
post-3556.css (this one and the 5 below are templates from a plugin I'm using across my website)
post-4473.css
post-5653.css
post-3489.css
post-3464.css
post-3458.css
I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.
Does anyone know how I can dequeue only the custom-frontend.min.css file?
After that I wanted to dequeue these files as well:
animations.min.css
elementor-icons.min.css
global.css
frontend-legacy.min.css
swiper.min.js
I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!
You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.
function dequeue_elementor_global__css() {
wp_dequeue_style('elementor-global');
wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);
Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id. For example:
If any stylesheet id is the elementor-global-css then this file handle will be elementor-global
My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.
If you load your new, optimised frontend.min.css files with the same name, then it should work.
e.g.
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?
This seems to work. Tested on a few pages and posts:
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_deregister_style( 'elementor-frontend' );
wp_dequeue_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
I am trying to dequeue some scripts from non-relevant pages in wordpress. It is working fine with some (like contact-form-7) but not with other plugins. Is there any reasons these .js and .css files are still being loaded, despite being dequeued?
Code below is loaded via functions.php in child-theme. Relevant plugin is woo-variation-swatches.
add_action( 'wp_enqueue_scripts', 'custom_swatches_script_conditional_loading' );
function custom_swatches_script_conditional_loading(){
// Edit page IDs here
if(! is_page(39341) )
{
wp_dequeue_style('woo-variation-swatches'); // Dequeue CSS file.
wp_dequeue_style('woo-variation-swatches-theme-override'); // Dequeue CSS file.
wp_dequeue_style('woo-variation-swatches-tooltip'); // Dequeue CSS file.
wp_dequeue_script('woo-variation-swatches'); // Dequeue JS Script file.
}
}
You want to either hook it after wp_enqueue_scripts like wp_print_styles or simply try setting the priority of your add_action.
Looking at the plugin source code. It enqueue's the scripts with priority 15.
woo-variation-swatches.php line 103.
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ), 15 );
So really, anything priority higher than 15 should dequeue it like this :
add_action( 'wp_enqueue_scripts', 'custom_swatches_script_conditional_loading', 99 );
I want to prevent specific js in specific page for example suppose i have page name is detail_event and i would like to prevent load script mouse.min in this page .
I wrote following code in curent theme's functions.php but still mouse.min js is loading how to stop it.
add_action( 'wp_enqueue_scripts', 'my_register_javascript', 100 );
function my_register_javascript() {
if ( is_page('my-page') ) {
wp_deregister_script( 'mouse.min' );
}
}
And location of mouse.min js is mysite.com/wp-includes/js/jquery/ui/mouse.min.js?ver=1.11.4
please anyone know how to do this.
There are couple of things to be noticed here:
The handle for mouse.min.js is jquery-ui-mouse and not mouse.min
You are deregistering the script which means that as soon as that page is visited, WP will stop enqueuing this script in all pages.
Instead of doing that you should try below mentioned code:
add_action( 'wp_footer', 'custom_wp_dequeue_script', 11 );
function custom_wp_dequeue_script() {
if ( is_page('my-page') ) {
wp_dequeue_script( 'jquery-ui-mouse' );
}
}
You just need to make the conditional include negative:
if ( !is_page('my-page') ) {
I have encountered a problem with enqueuing and dequeuing style CSS sheets with font Awesome. In my functions.php child theme file I try to dequeue a default one and download a new version from CDN server.
It worked 100% fine until I introduced "Move render-blocking JavaScript." part of the code. With code below no CSS stylesheet from CDN is loaded and instead of maybe 50 ms of time to get woff file, according to GTmetrix and pingdom it now takes around 600ms while getting from my FTP's Storefront theme fonts folder (btw I have no idea why the difference is so huge).
I even tried better font awesome plugin for Wordpress instead of my font snippet, but outcome is just the same - works without moving scripts, doesn't work with it.
// Move render-blocking JavaScript.
function custom_clean_head() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'custom_clean_head' );
// Specify FontAwesome character set early.
add_action( 'wp_enqueue_scripts', 'layers_child_styles', 100);
add_action( 'wp_footer', 'load_awesome', 1);
if( ! function_exists( 'layers_child_styles' ) ) {
function layers_child_styles(){
wp_dequeue_style('layers-font-awesome');
wp_dequeue_style('font-awesome');
}
function load_awesome() {
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css', $deps = array(), $ver = false);
}
}
Try This
// Remove and Unregister Styles
function layers_child_styles(){
wp_dequeue_style('layers-font-awesome');
wp_dequeue_style('font-awesome');
wp_deregister_style('font-awesome');
}
add_action( 'wp_print_styles', 'layers_child_styles', 999);
// Add Additional Script or style
function load_awesome() {
wp_enqueue_style('font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
}
add_action( 'wp_enqueue_scripts', 'load_awesome' 999);