I have a side bar that is not displaying correctly because the woocommerce pages width are too wide. I have been trying to find out how to change the width of it so I can fit the side bar in for a few days now but cannot figure it out, mainly because I’m not sure which file to look in.
This is what it looks like
I have looked through a ton of the woocommerce code but just cannot figure out where the width is set for their pages.. any help would be hugely appreciated
Try installing Firebug for Firefox. That way you can right-click on areas of your template and select “Inspect Element with Firebug”.
You can play around with the CSS and on the right it will also tell you what CSS file and line so you can then modify the template.
From memory some of those woocommerce themes declare CSS in a sub-directory within the theme. But firebug should point you to the location of the file.
Hope this helps 😉
The theme layout controls the page and sidebar width. Woocommerce controls the size of the image shown for the products.
That may have a part in it. Try setting your images small till you have your sidebars configured and then fit images to them.
Duplicate your theme’s page.php file, and name it woocommerce.php
This file should be found like this: wp-content/themes/YOURTHEME/woocommerce.php.
Open up your woocommerce.php in a text editor and
replace the loop
Next you need to find the loop (see The_Loop). The loop usually starts with a:
and usually ends with:
This varies between themes. Once you have found it, delete it. In its place put: