Community Forums › Forums › Archived Forums › Design Tips and Tricks › Going Green and Woocommerce CSS issue
Tagged: css, WooCommerce
- This topic has 12 replies, 3 voices, and was last updated 10 years ago by David Chu.
-
AuthorPosts
-
March 28, 2014 at 5:24 am #97096ingaMember
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 trumpAny suggestions anyone?
http://mejrupharmonikatraef.dk/produkt/annoncer-paa-mejrup-harmonikatraefs-hjemmeside/March 28, 2014 at 9:36 am #97133David ChuParticipantHi 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.....woocommerce .content { padding: 0 40px; padding: 0 4rem; }
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.
.woocommerce-page #content div.product div.images img { width: auto; }
Ciao,
Dave
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
March 28, 2014 at 10:16 am #97138ingaMemberWonderful 馃檪 Thank you! Do I put this css in my child theme?
March 28, 2014 at 10:40 am #97139David ChuParticipantYou'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:
.woocommerce .content div.product div.images img { width: auto; }
Dave
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
March 28, 2014 at 11:22 am #97143ingaMemberI 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 馃檪
March 28, 2014 at 12:00 pm #97148David ChuParticipantInga,
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:.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; }
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
March 28, 2014 at 12:50 pm #97156ingaMemberTo 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?
March 28, 2014 at 12:58 pm #97160ingaMemberOk, 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!
March 28, 2014 at 1:08 pm #97161David ChuParticipantOh 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
March 28, 2014 at 1:14 pm #97164Brad DaltonParticipantYou 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/
March 28, 2014 at 1:29 pm #97167David ChuParticipantInga,
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
March 28, 2014 at 2:18 pm #97184ingaMember馃檪 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!
March 28, 2014 at 2:32 pm #97187David ChuParticipantThis reply has been marked as private. - woocommerce
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.