How to remove the line under the logo in WooCommerce? - css

I'm trying to remove the line under the logo at: http://buyfireworks-shop.co.uk/product-category/roman-candles/ I can't remove the white border under the logo. I have tried various css to no avail.

Update this class in inline style sheet #4, you might need to do it in your page builder if you're using one, like Visual Composer or DiviBuilder if you can't find it in WooCommerce; from memory Woo doesn't have admin side styling accessible:
.mk-header { border-bottom: 1px solid #ededed; }
Remove the white border by setting border-bottom to none:
.mk-header { border-bottom: none; }
This style is being added with an inline stylesheet on the page, so you'll need to override it either with important or being really careful about specificity; making sure your .mk-header border fix is in the last css file after the WooCommerce stuff loads.
If you're still having trouble with WooCommerce styles you can disable them entirely in functions.php
// Remove each style one by one
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;
}
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );

Related

Remove a panel from woocommerce

I would like to remove panel or breadcrumbs from dashboard.storefront theme woocommerce plugin as attached in image.This can be seen under woocommerce-->order
i tried unset and css display none for class.it didn't work.
.woocommerce-layout__header {
display: none !important;
}
Screenshot
Add the follows code snippet in your active theme's functions.php -
remove_action( 'in_admin_header', array( 'WC_Admin_Loader', 'embed_page_header' ) );

Child Theme not overriding Parent CSS

I've created a child theme of the Renovation theme. In the child's theme folder I have a "style.css" and a "functions.php" file. My style.css looks like this:
/*
Theme Name: Renovation Child
Theme URI: http://renovation.thememove.com/
Author: ThemeMove
Author URI: http://thememove.com/
Version: 2.0.4
Template: tm-renovation
*/
/*
* #charset "UTF-8";
*/
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 65px!important;
padding-bottom: 35px!important;
}
My functions.php looks like this:
<?php
// Exit if accessed directly
if ( !defined( 'ABSPATH' ) ) exit;
// BEGIN ENQUEUE PARENT ACTION
if ( !function_exists( 'renovation_enqueue_scripts' ) ):
function renovation_enqueue_scripts() {
wp_enqueue_style( 'renovation-child-style', trailingslashit( get_stylesheet_directory_uri() ) . 'style.css' );
}
endif;
add_action( 'wp_enqueue_scripts', 'renovation_enqueue_scripts' );
// END ENQUEUE PARENT ACTION
Unsing the inspector I see that the parent css is being loaded first and it looks like this:
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 30px!important;
padding-bottom: 35px!important;
}
My CSS is being loaded after the parent CSS and it looks like this, except it's all crossed out:
.vc_custom_1438936121266 {
margin-bottom: 70px!important;
padding-top: 65px!important; <-- MY CHANGE
padding-bottom: 35px!important;
}
I've read alot of threads about specificity, and I noticed that my css and the parent css are identical, except for the "padding-top" change I made. Since the child is loaded last, I expected my css to take precedence, but it's not. My css is crossed out in the inspector and the parent is being used.
This doesn't seem right to me, and I was hoping that someone could clarify my understanding of the parent/child relationship and help me fix this problem. Thank you.
if you are only going to override one element and not apply this to multiple it might be best to use an id instead of a class. The id is always overwrites a class.

Overriding a woocommerce !important class

I'm trying to override woocommerce css class which by default is set to !important. How can I override this?
The Default is:
.woocommerce-error, .woocommerce-info, .woocommerce-message{
padding: 1em 2em 1em 3.5em!important;}
I have tried the following but does not want to know:
main .post .entry .woocommerce-error, .woocommerce-info, .woocommerce-message{padding: 0 0 10px 0 !important;}
Not sure if I can change the original woocommerce stylesheet as I assume the changes I make will be overridden when plugin is updated.
Many thanks.
That's because you're overlooking the comma, there are actually 3 rules inside that line of yours, and you will have to specify it for every one of them. This should work:
main .post .entry .woocommerce-error,
main .post .entry .woocommerce-info,
main .post .entry .woocommerce-message {
padding: 0 0 10px 0 !important;
}
In order to over ride default Woocommerce styles it is best to disable the stylesheets by entering the below in your functions.php file:
add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
This way you can avoid using !important as this is bad practise and customise the shop to look as you wish.
By default Woocommerce enqueues 3 stylesheets and the above snippet will disable all of them, if you wish to disable just each one individually you can add:
// Remove each style one by one
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;
}
Please see here for more info: Woomerce Docs
!important is amazingly evil and should be avoided unless you really 10000% sure you won't regret it (or maybe you want to do a simple utility class, which is okay). I never use Woo-commerce but it is such a shame for them to use !important rule in the css, which will be amazingly hard to make any other style that will beat that specificity.
Anyway, the best way I know is to add an ID to element that you want to override if possible, and add a new selector to improve specificity, and add !important rule to that selector (example below). But if not, wellllllll, I don't know.
#newselector{
padding: 1em 2em 1em 3.5em!important;
}
!important is evil, I hope you won't afraid if it's suddenly eating you alive.

Remove Wordpress WooCommerce StoreFront Header Styles

The Wordpress WooCommerce StoreFront Theme queues styles in the header from the WooCommerce StoreFront Customiser;
<style id='storefront-woocommerce-style-inline-css' type='text/css'></style>
<style id='storefront-style-inline-css' type='text/css'></style>
I seem to spend more time over-righting these styles, than defining what I want. Does anyone know how to remove them or disable the Storefront customiser?
For anyone that is fighting with this, this is the solution I found:
function my_theme_remove_storefront_standard_functionality() {
//remove customizer inline styles from parent theme as I don't need it.
set_theme_mod('storefront_styles', '');
set_theme_mod('storefront_woocommerce_styles', '');
}
add_action( 'init', 'my_theme_remove_storefront_standard_functionality' );
The two of inline CSS was added in class-storefront-customizer.php.
For deregister storefront-style-inline-css:
add_filter('storefront_customizer_css', '__return_false');
For deregister storefront-woocommerce-style-inline-css:
add_filter('storefront_customizer_woocommerce_css', '__return_false');
I had to remove these recently, and the best way to do it is using Ngoc Nguyen's method.
Just put the below code in your functions.php
function wpcustom_deregister_scripts_and_styles(){
wp_deregister_style('storefront-woocommerce-style');
wp_deregister_style('storefront-style');
}
add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );
Is this working in Storefront 2.0.4?
Because i have these filters:
add_filter( 'storefront_customizer_enabled', '__return_false' );
add_filter( 'storefront_customizer_css', '__return_false' );
add_filter( 'storefront_customizer_woocommerce_css', '__return_false' );
but i have still inline css.
The first filter was mentioned in topic:
https://wordpress.org/support/topic/remove-inline-css-1?replies=8
Try this:
add_filter( 'storefront_customizer_enabled', 'woa_storefront_disable_customizer' );
function woa_storefront_disable_customizer() {
return false;
}
https://github.com/FrancySanchez/storefront-child/blob/master/functions.php
I had been having this problem and though my solution is quite specific to my own application, you may find use in it.
My problem was that I wanted white menu text with a hover color of a light grey. By default the inline css that you have a problem with seemed to take your menu text color, lighten it by a factor and set that color as the hover color. Obviously white cannot be lightened so my menu simply stayed the same on hover. Here is how I solved this:
In the file "class-storefront-customizer.php" located at wp-content/themes/storefront_child/inc/customizer there are functions defined on how the theme editor interface works. Firstly I took the following function:
public static function get_storefront_default_setting_values() {
return apply_filters( 'storefront_setting_default_values', $args = array(
'storefront_heading_color' => '#333333',
'storefront_text_color' => '#6d6d6d',
'storefront_accent_color' => '#aeaeae',
'storefront_header_background_color' => '#ffffff',
'storefront_header_text_color' => '#6d6d6d',
'storefront_header_link_color' => '#333333',
'storefront_footer_background_color' => '#f0f0f0',
'storefront_footer_heading_color' => '#333333',
'storefront_footer_text_color' => '#6d6d6d',
'storefront_footer_link_color' => '#333333',
'storefront_button_background_color' => '#eeeeee',
'storefront_button_text_color' => '#333333',
'storefront_button_alt_background_color' => '#333333',
'storefront_button_alt_text_color' => '#ffffff',
'storefront_layout' => 'right',
'background_color' => 'ffffff',
) );
}
And I set the storefront_accent_color var as the offset color I wanted, in my case #aeaeae. This set the default color to that value for the editor. This step is not necessary but does make it easier.
I also set this option to the same value as I was not sure which would really take effect...
$wp_customize->add_setting( 'storefront_accent_color', array(
'default' => apply_filters( 'storefront_default_accent_color', '#aeaeae' ),
'sanitize_callback' => 'sanitize_hex_color',
) );
On line 501 of this file is the definition of the function get_css() which sets up the inline css you see that you are trying to get rid of. For me, the value I needed to change was in this section:
.main-navigation ul li a:hover,
.main-navigation ul li:hover > a,
.site-title a:hover,
a.cart-contents:hover,
.site-header-cart .widget_shopping_cart a:hover,
.site-header-cart:hover > li > a,
.site-header ul.menu li.current-menu-item > a {
color: ' . storefront_adjust_color_brightness( $storefront_theme_mods['header_link_color'], 80 ) . ';
}
I changed the value of this css attribute to:
color: ' . $storefront_theme_mods['accent_color'] . ';
This did not change the set color of my offset on hover. What it did do however was change the editor.
So the final step is to go into the editor, go to the typography tab, select accent color, hit the default color button (which should now come up as my color) and then SAVE that. My menu worked fine after that.
This was a bit long and not quite what you were asking for, but I put it all in to illustrate how you can manipulate the values that are output into that inline css. Hopefully that info has helped you.
In case anyone else stumbles on this question here's how I managed to solve it:
Create a child theme from the parent storefront theme. (refer to this link to find out how to do that: https://developer.wordpress.org/themes/advanced-topics/child-themes/)
In the child theme's functions.php file put the following code:
remove_action( 'wp_enqueue_scripts', array( $storefront->customizer, 'add_customizer_css' ), 130 );
It basically grabs the function "add_customizer.css" from the class Storefront_Customizer, which adds the inline css, and removes that hooked function from the 'wp_enqueue_scripts'.
In the storefront theme's functions.php file there's the following code:
$storefront = (object) array(
'version' => $storefront_version,
/**
* Initialize all the things.
*/
'main' => require 'inc/class-storefront.php',
'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);
What it does is it stores the class Storefront_Customizer from file 'class-storefront-customizer.php' in $storefront array and then converts the array into an object.
By creating a child theme you'll be able to update your parent storefront theme and the changes won't be lost.
after several trials I got a final solution to solve the problem!
It's to simple to believe :-)
Remove the following line in "class-storefront-customizer.php" and it works:
add_action( 'wp_enqueue_scripts',array( $this, 'add_customizer_css' ), 130 );
Regards
Herbert

Wordpress: Featured images all showing with 1px width and 1px height

I'm not sure what exactly has caused this, but either after upgrading to the latest WP version or using WP.SmushIt plugin, all my featured/thumbnail images are displaying with 1px width, and 1px height.
The regular images used inside the pages/content are fine, only those that I'm calling using get_the_post_thumbnail($post_id, 'carousel-thumb'); are broken.
carousel-thumb is just a custom size I've defined in my functions.php like add_image_size( 'carousel-thumb', 220, 220, true ); //(cropped)
Any help is appreciated.
Was able to fix the issue using Regenerate Thumbnails plugin.
maybe you need to add this code to your functions.php,
add_action( 'admin_head', 'style_thumbsss' );
function style_thumbsss()
{
echo '
<style type="text/css">
.inside p.hide-if-no-js a img.attachment-post-thumbnail { width: 230px!important; height: 160px!important; }
</style>';
}
or may need to use plugin, called "REGENERATE thumbnails" , which creates new thumbs for the uploads images, and sets them normally.

Resources