Going Green and Woocommerce CSS issue

Community Forums Forums Design Tips and Tricks Going Green and Woocommerce CSS issue

This topic is: not resolved

Tagged: ,

This topic contains 12 replies, has 3 voices, and was last updated by  David Chu 6 months, 3 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #97096

    inga
    Member
    Post count: 13

    I have some problems in how to align the text more to the left, on my product page ( and I think also in the other pages ) and would be happy if someone could help me out…

    And the product image is blurry.

    I have these plugins installed:

  • woocommerce
    genesis connect for woocommerce
    genesis style trump
  • Any suggestions anyone?

    http://mejrupharmonikatraef.dk/produkt/annoncer-paa-mejrup-harmonikatraefs-hjemmeside/
#97133

David Chu
Participant
Post count: 1371

Hi Inga,
Woo always has mountains of CSS. One needs to be a CSS hacker to control them. They are a pain! :-)
Here’s something that should help with the spacing. Check the other Woo pages, because this may affect all of them. Appearance… Edit….

[css]
.woocommerce .content {
padding: 0 40px;
padding: 0 4rem;
}
[/css]

The image is also being enlarged drastically by Woo CSS. The image width is being set to 100%, so it will fill its space. You can try the CSS below. It will show the image at normal (quite small) size.

[css]
.woocommerce-page #content div.product div.images img {
width: auto;
}[/css]

Ciao,
Dave


Dave Chu · Custom WordPress Developer – likes collaborating with Designers

#97138

inga
Member
Post count: 13

Wonderful :-) Thank you! Do I put this css in my child theme?

#97139

David Chu
Participant
Post count: 1371

You’re welcome!
Yes, that would go in your child theme. Appearance… Edit. (unless you’re using a special CSS plugin – I wasn’t sure, because it looks like you’ve compressed/minified the CSS).

I already found a little mistake in the 2nd bit of code… try this instead:

[css]
.woocommerce .content div.product div.images img {
width: auto;
}
[/css]

Dave


Dave Chu · Custom WordPress Developer – likes collaborating with Designers

#97143

inga
Member
Post count: 13

I used compressed/minified the CSS, now I turned it off – is that giving me a problem?

Well, we are almost there, at least something is happening…but now all the text is on the right side of the page…

The image looks a lot better now :-)

#97148

David Chu
Participant
Post count: 1371

Inga,
Minifying should not hurt anything. It looks like you’re playing with the summary width. ;) If you want to use 48% for the image, that’s cool, but I found the following code using 48% when you don’t need to. I’ve commented out the width line, and added some nice padding:

[css]
.woocommerce #content div.product div.summary, .woocommerce div.product div.summary, .woocommerce-page #content div.product div.summary, .woocommerce-page div.product div.summary {
float: right;
/* width: 48%; */
padding: 0 40px;
padding: 0 4rem;
}[/css]


Dave Chu · Custom WordPress Developer – likes collaborating with Designers

#97156

inga
Member
Post count: 13

To be honest, I really don’t know what I am doing. Css is not my language, at least not yet… I just but the code in my css stylesheat, and then this happened ( exiting )…and then I disabled “minify”, but I’ll think I’ll turn that one on again, if it doesn’t hurt anything.

So the Genesis Connect for WooCommerce doesn’t do the job, really?

#97160

inga
Member
Post count: 13

Ok, that is not the case, Genesis Connect for WooCommerce is needed. Just tried to turn it of, and that was not doing any good…

Turning it back on!

#97161

David Chu
Participant
Post count: 1371

Oh wow, it’s way off now. It’s very hard to see with the minifying, but I wonder if you may have made a slip of the hand editing that. If it’s totally messed up, you might want to copy in the original CSS.

Genesis Connect generally works fine with Woo Commerce, but many users find that they need to make CSS edits to have their site look the way they want. This is what they don’t tell you when you buy those products, unfortunately.


Dave Chu · Custom WordPress Developer – likes collaborating with Designers

#97164

braddalton
Participant
Post count: 10177

You could dequeue the general WooCommerce style sheet and add it to your child theme so you can modify it there. http://wpsites.net/web-design/add-woocommerce-style-sheet-in-child-theme-for-easy-modification/


#97167

David Chu
Participant
Post count: 1371

Inga,
One last thought, because you said you don’t know CSS – I am assuming that you are finding the existing code and making the changes above, rather than simply pasting in the above code, which may not work. (sorry if I’m pointing out the obvious).

Good luck, Dave


Dave Chu · Custom WordPress Developer – likes collaborating with Designers

#97184

inga
Member
Post count: 13

:-) nothing obvious for me, I copied and pasted…

I can’t even see any “woocommerce css” code anywhere in my child theme, so I probably should pay someone to do this…but really want to learn…

#braddalton I’ll look into that one, thank you!

#97187

David Chu
Participant
Post count: 1371
This reply has been marked as private.
Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.