I am having similar issue in reducing product page space by moving product page title upward the page line, I have used the jetpack custom css and even the child theme css but none seems to work. see code here
#breadcrumbs {
margin: 0px;
padding: 0px;
}
Please assist.
Hi, the WooCommerce styles are enqueued conditionally after the theme stylesheet. So if you’re just putting CSS directly into the style.css file there’s a chance it’s being overwritten by the core WooCommerce stylesheet.
Instead you should enqueue your own stylesheet in the child theme. You can rad about how to do that here: http://codex.wordpress.org/Function_Reference/wp_enqueue_style
Honestly though, for a few lines of CSS, using the JetPack feature is fine if you’re already loading JetPack anyway.
@bennn You’re targeting the wrong selector. Try .woocommerce-breadcrumb
.
Hi James – thanks for your prompt response.
I will give this a go as I’d rather not be loading Jetpack in addition to everything else.
Given it’s good practice to use a child theme, and that Woo Themes recommends it for alterations, would it be possible to update or add information about using a child theme with Storefront and WooCommerce to the support pages?
The info that’s on there refers to Canvas and has no reference to enqueue_style.
I’ve used child themes with other themes and never had to use enqueue_style so in that respect it is an unusual requirement and I think should be highlighted – or the theme code changed of course to make it work in the standard way π
Thanks again
John
Hi John,
You don’t have to enqueue a separate stylesheet, but it might be better to in some cases. Most themes just include all their CSS in a single file, Storefront is different – we only include the WooCommerce CSS if WooCommerce itself is active to improve performance for those not using it.
So it could just be a case of styles in our woocommerce.css file overruling what you’ve put in your child theme, I can’t say for sure without seeing your code. Enqueuing a stylesheet with wp_enqueue_style()
would resolve this, but you could also just use the !important
declaration. That’s up to you.
We’ll update the docs with more info later π
Hi James
Thanks for your response – much appreciated.
John
Hi James, please see if I use the right code as suggested:
#woocommerce-breadcrumb {
margin: auto;
padding: 0px;
}
Every page has too much white space above the page title, it was easier for me to customize with the mystile theme but now I changed to storefront the pages load with white space above the page title .
Please assist.
Hi,
The child theme is a pain to work with not just with css but with other stuff too.
I have this problem for now. Even if I copy the woocommerce templates in my child theme and activate them I get this:
http://screencast.com/t/fwoFf95Q
http://screencast.com/t/jgT5h7495jR2
The front page is squeezed….
@surfmedia – if you are looking for help, please start your own thread – this one is already marked resolved.
If you are using Storefront theme, start a new one here:
https://wordpress.org/support/theme/storefront#postform
Hi Guys,
I’m customising my Storefront_Child theme and have been looking for the CSS stylesheet so I can customise it. But when I click on the “Edit CSS” plugin that I’ve installed, the CSS codes are not there.
Any idea where I can find the codes?
Thank you,
Andrew