WooCommerce on Wordpress CSS Styling

[danieljamesphoto]

Hi,

Right so i'm having a couple of problems with Wordpress, really basic CSS styling issues with WooCommerce. All i'm looking to do is pad out the breadcrumb (been tying #breadcrumb to no avail) from the navigation and fix the image blurring issue which i've read is done by removing the 100% widths to the images? (might be wrong on that)

My sites here;

www.danieljamesphotography.net/online-shop-2/double-sided-photo-keyring/

I think when that's done i'll be happy as the main Woo styling is nice for the most part! I just can't seem to get it to overwrite those couple of issues.

thanks in advance!

Daniel

 

[Richard King]

Add to style.css

DIV#breadcrumb
{
margin-top: 14px;
}

DIV#breadcrumb A
{
padding-right: 5px;
padding-left: 5px;
}



in woocommerce.css you have...


DIV.product DIV.images IMG, #content DIV.product DIV.images IMG
{
width: 100%;
height: auto;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.3);
}

remove the width line, it is forcing the image to be resized in the browser

 

[Richard King]

Addituonally woocommerce is dynamically spewing out a PHP style sheet (style.php) with this line


DIV.product DIV.images, #content DIV.product DIV.images
{
float: left;
width: 200px;
margin-bottom: 2em;
height: 200px;
}
that is clearly going to be resixing the imges square at 200 x 200. either change the PHP or settings to match what you are using. or resize the images before you send them up

 

[danieljamesphoto]

Thanks a lot!!! last thing i'm trying to change is the price, to increase it to 2em but again it's not seemingly that easy.

Not sure i'm going deep enough into the containers etc with firebug.

Yeah it seems as though woocommerce has a lot of people annoyed but personally I only need a few products on there so saw it as useful.

 

[Richard King]

Thanks a lot!!! last thing i'm trying to change is the price, to increase it to 2em but again it's not seemingly that easy.

Not sure i'm going deep enough into the containers etc with firebug.

Yeah it seems as though woocommerce has a lot of people annoyed but personally I only need a few products on there so saw it as useful.

add

DIV.summary P.price SPAN.amount
{
font-size: 2em;
}

to Styles.css

 

[danieljamesphoto]

DAMN I WAS CLOSE!

I missed the SPAN out

thanks again, a life saver!