I am trying to edit the styles of the Woocommerce checkout page that is coming from style.dev.css. I tried to copy the file to my child theme directory and made the changes in the new child file. However, it seems that the page is still loading the original file and not the theme file The reason I am not doing my edits in the style.css child file is that most selectors have !important and don't want to do heavy overwriting. Does anyone know what I am missing, please?
The documentation of WooCommerce could help you acheive what you are looking for.
WooCommerce - Disable the default stylesheet
Disable all stylesheets
WooCommerce enqueues 3 stylesheets by default. You can disable them all with the following snippet:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
Disable specific stylesheets
If you want to disable specific stylesheets (i.e, if you do not want to include the handheld stylesheet), you can use the following:
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] );
unset( $enqueue_styles['woocommerce-layout'] );
unset( $enqueue_styles['woocommerce-smallscreen'] );
return $enqueue_styles;
}
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Then enqueue your own stylesheet like so:
function wp_enqueue_woocommerce_style(){
wp_register_style( 'mytheme-woocommerce', get_stylesheet_directory_uri() . '/css/woocommerce.css' );
if ( class_exists( 'woocommerce' ) ) {
wp_enqueue_style( 'mytheme-woocommerce' );
}
}
add_action( 'wp_enqueue_scripts', 'wp_enqueue_woocommerce_style' );
Related
I have a basic bunch of CSS/Js files defined in my functions.php file. There I register and enqueue those scripts and stylesheets.
But in specific situations I want to load additional scripts based on the site template which is used.
I tried to register and enqueue those additional scripts in the specific template file, but it didnt work. It does only work when included in the functions.php.
What is the correct way to do this?
You can try like this
add_action( 'wp_enqueue_scripts', 'enqueue_file' );
function enqueue_file() {
if(is_front() || is_archive()){ // you can set here condition
wp_enqueue_style( 'main-css', get_template_directory_uri() .
'/static/css/main.min.css"' );
}
}
add this to your functions.php in child theme:
add_action(
'wp_enqueue_scripts',
'loadActionFrontend'
);
function loadActionFrontend()
{
if( is_page( 'pageid here' ) ) {
wp_register_script(
'scriptName',
'scripturl',
[],
'',
true
);
wp_enqueue_script('scriptName');
}
}
with the query if( is_page( 'pageid here' ) ) you can insert your desired pageid where the script shold loaded.
I am trying to find a way to dequeue styles and scripts on the "login, password reset and register " default wp pages.
I understand there is 'login_enqueue_scripts' but no such thing as login_dequeue_scripts.
Whats your approach ? Ive tried something like this:
add_filter('body_class', function($classes) {
if (in_array('login', $classes)) {
wp_dequeue_style( 'list-css' );
wp_dequeue_style( 'blog-css' );
wp_dequeue_style( 'dir-css' );
wp_dequeue_style( 'author-css' );
}
return $classes;
});```
You could just use the wp_dequeue_script/style function for the login_enqueue_script action. Like so:
function custom_login_page() {
wp_dequeue_style( 'list-css');
}
add_action( 'login_enqueue_scripts', 'custom_login_page' );
The action of 'login_enqueue_scripts' is what happens when the other scripts/styles are loaded on that page. You can create a custom function to run when that happens, which is what you want.
However, rather than dequeueing, why not just write some of your own CSS for the elements on the page, then enqueue whatever that custom CSS?
function custom_login_css() {
wp_enqueue_style( 'custom-login-styles', get_stylesheet_directory_uri() . '/custom-login.css' );
}
add_action( 'login_enqueue_scripts', 'custom_login_css' );
Here's a good reference for the different elements you can customize with CSS on the WP login page.
I'm developing my first WordPress plugin. I need to use a custom CSS for the settings pages that I created for the plugin but when I enqueue my stylesheet file, it affects the whole WordPress backend and not just my plugin's settings page.
Is possible to solve this problem? How?
When you want to add styles or scripts in WordPress you enqueue them using hooks. For the admin side the hook you are looking for is called admin_enqueue_scripts.
You can add something like
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style() {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
You just need to be careful to correctly specify the url of the css script you want to enqueue.
Hope this helps.
Oh and https://developer.wordpress.org page is great for finding out about WordPress functionality, core functions, hooks etc.
Also check out the plugin handbook: https://developer.wordpress.org/plugins/
Loads of useful information can be found there :)
EDIT:
admin_enqueue_scripts has a parameter you can use read more
/**
* Register and enqueue a custom stylesheet in the WordPress admin.
*/
function wpdocs_enqueue_custom_admin_style( $hook ) {
if ( $hook === 'edit.php' ) {
wp_register_style( 'custom_wp_admin_css', plugin_dir_url( __FILE__ ) . 'css/woo-solo-api-admin.css', false, '1.0.0' );
wp_enqueue_style( 'custom_wp_admin_css' );
}
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );
This will load the script only on the edit post screen.
You can see what hook is loaded on your screen by adding
error_log( print_r( $hook, true ) );
In your wpdocs_enqueue_custom_admin_style function before the condition. Enable the debug log in your wp-config.php and you'll get a name of your custom post screen hook.
Alternatively, you could target the $current_screen to match the CPT's screen. This will load the script only on that page.
I'm trying to get rid of unused styles in my WP. I'm doing it like this:
// remove CSS
add_action('wp_dequeue_style', 'remove_css');
function remove_css() {
// boostrap shortcodes
wp_dequeue_style(array(
'bs_bootstrap-css',
'bs_shortcodes-css'
));
// woocommerce
wp_dequeue_style('woocommerce-layout-css');
wp_dequeue_style('woocommerce-smallscreen-css');
wp_dequeue_style('woocommerce-general-css');
}
Problem is, neither first nor the secound example works. I tried using wp_deregister_script and setting a priority to add_action. What can I do?
You should hook into wp_enqueue_scripts:
add_action( 'wp_enqueue_scripts', 'so26892641_remove_css', 25 );
function so26892641_remove_css(){
wp_dequeue_style('woocommerce-layout');
// etc
}
Woocommerce has a filter for that, also note that the handles do not have "-css" at the end.
add_filter( 'woocommerce_enqueue_styles', 'jk_dequeue_styles' );
function jk_dequeue_styles( $enqueue_styles ) {
unset( $enqueue_styles['woocommerce-general'] ); // Remove the gloss
unset( $enqueue_styles['woocommerce-layout'] ); // Remove the layout
unset( $enqueue_styles['woocommerce-smallscreen'] ); // Remove the smallscreen optimisation
return $enqueue_styles;
}
Code shamelessly copied from the following link :)
My wordpress website is not updating the stylesheet its using instead of style.css it is showing "style.css?ver=3.8.3"
I want to know why is this happening and where does this version thingie come from since I've checked both via admin panel and the ftp and have reset cache but still its getting its styles from some other version of the styelsheet.
It would be really helpful if someone points out the logic behing this. Many Thanks!
You have to set the '$ver' parameter to 'null' in the call to style-sheet in your theme files
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Add this code to the functions.php file of your WordPress theme
function remove_cssjs_query_string( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_query_string', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_query_string', 10, 2 );
This code will remove query strings (?ver=) parameter from all the CSS and JS files on your site.
add_filter( 'style_loader_src', 'remove_cssjs_query_string', 10, 2 );
Above line removes query strings from all CSS files
add_filter( 'script_loader_src', 'remove_cssjs_query_string', 10, 2 );
Above line removes query strings from all JS files
Hope it helps :)
Source : http://belnad.com/remove-ver-query-string-wordpress-css-js-files/