Css issue when added woocommerce WordPress
- SOLVED
I have a wordpress site which I added woocommerce to. The rest of the site is fine, but on the shop & individual page, the background is gone and alignment is off.
Any quick css fixes? I've tried what I can....
Regular background of page example: http://idmarketingevents.com/krewe/?page_id=10
Shop page: http://idmarketingevents.com/krewe/?post_type=product
Individual Page: http://idmarketingevents.com/krewe/?product=krewe-white-t-shirt
Any suggestions?
Answers (3)
John Cotton answers:
The HTML doesn't match - because WooCommerce provides it's own structure which you've got to edit to match your theme.
If you look at the first pages from a div with id all-container downwards, you'll see the HTML structure is different.
You need to take files from the woocommerce/templates folder (not necessarily all of them) and copy them to a woocommerce folder in your theme and then edit them so that html structure your CSS is set for is the same as your theme.
In particular, you need to look at single-product.php and shop/wrapper-start.php and shop/wrapper-end.php.
idavila comments:
I created the folders, but don't know much what to do now to change them?
John Cotton comments:
You need to look at the HTML structure for a working page (probably page.php but perhaps also single.php) and make sure that that structure is copied to the woocommerce files.
So, for instance if you theme has
<div id="wrap">
before the main page content, you need to have the same in the woocommerce files.
Arnav Joy answers:
you can place files in your theme folder and then style and place elements as per your theme ,
how to place and where , you can read in this article
http://docs.woothemes.com/document/template-structure/
let me know if you need more help .
my email is : [email protected]
and skype : arnav.joy
rajeshstarlite answers:
Few HTML and css classes don't match with your current theme and that's the reason behind background is gone and alignment is off.
Woocommerce provides facility to override template, you can find instructions for it at http://docs.woothemes.com/document/template-structure/
If you make those HTML and css classes in your template then the problem can be solved.