The Wordpress WooCommerce StoreFront Theme queues styles in the header from the WooCommerce StoreFront Customiser;
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?
Feb 18, 2015 - These WooCommerce Storefront theme tweaks have been curated from the most common questions we've found on the web. If you want to remove them then the following CSS will do it for you. How to style widgets. Visit the Font Awesome for menus plugin on WordPress.org. 101 Design Customizations for the WooCommerce Storefront theme Introduction Here’s 101 ways to customize the WooCommerce Storefront Theme. Storefront is the official theme for WooCommerce, and it’s a great theme to use if you want to build an online shop with WordPress. It’s now been downloaded over 1 milliion times – so it’s very popular, and for good reason.
Stuart
StuartStuart
7 Answers
For anyone that is fighting with this, this is the solution I found:
Lautaro RosalesLautaro Rosales
The two of inline CSS was added in class-storefront-customizer.php.
For deregister storefront-style-inline-css:
For deregister storefront-woocommerce-style-inline-css:
Nel TsengNel Tseng
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
Jalapeno JackJalapeno Jack
Is this working in Storefront 2.0.4?
![Woocommerce storefront footer Woocommerce storefront footer](http://docs.woocommerce.com/wp-content/uploads/2014/09/sf-headers-950x547.jpg)
Because i have these filters:
but i have still inline css.
The first filter was mentioned in topic:https://wordpress.org/support/topic/remove-inline-css-1?replies=8
Toby HageToby Hage
![Storefront designer free Storefront designer free](https://i2.wp.com/businessbloomer.com/wp-content/uploads/2016/10/woocommerce-change-remove-cart-button.png?fit=1166%2C677&ssl=1&resize=350%2C200)
Try this:
retroriffretroriff
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:
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...
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:
I changed the value of this css attribute to:
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.
ToiletduckToiletduck
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:
RegardsHerbert
Herbert MitschkeHerbert Mitschke
Not the answer you're looking for? Browse other questions tagged wordpresswoocommercewordpress-theming or ask your own question.
I just spent a long time trying to figure out why Storefront displays my fonts differently to — and worse than — other themes (on a 5K iMac). I tracked it down to the
-moz-osx-font-smoothing: grayscale;
and -webkit-font-smoothing: antialiased;
settings for body
in style.css.These settings are non-standard with no future ahead of them (and no past or present, either, unless you're using OSX).
While some people (specifically those who have modified their sites to have white text on a dark background) may find them useful, for the vast majority they are not a good idea.
Reasons to take them out:
-moz-osx-font-smoothing
and-webkit-font-smoothing
are non-standard, are not supported on most operating systems and MDN web docs recommend:
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
- They introduce discrepancies between what you see in OSX and what you see in other operating systems (as they are only supported on OSX). This makes life harder for the developer (e.g. extra testing on different operating systems) and may cause confusion for clients.
- It actually makes things worse for most of the Storefront dark-on-light text rendering (the Storefront defaults). More detail on this in the article Please Stop “Fixing” Font Smoothing. tldr: It fuzzies your fonts.
- With the advent of retina screens (especially in these settings' target audience of OSX), a lot of this has become moot anyway, as the pixel-perfect rendering of fonts needs no 'improvement'. All it ends up doing it making the font thinner, creating less contrast and making it less easy to read. (This is my use-case — a 5K iMac.) If people do want a thinner font, they can install a thinner font, not try to 'thin' a thicker one.
- Anyone that might see an improvement (the light font on dark background people) can put them in their own additional CSS.
Reading back, I see that a list like this is pretty damning (and aggressive :/ ) I'd be interested if there's a counter-list anywhere, and whether this is really such a slam-dunk as it seems :)
Woocommerce also use these settings, so an issue would need opening there too. Though it's only in the back-end, as far as I can see, so not as important.