Community Forums › Forums › Archived Forums › Design Tips and Tricks › Issues with minimum theme + woocommerce integration
- This topic has 9 replies, 2 voices, and was last updated 10 years, 8 months ago by David Chu.
-
AuthorPosts
-
August 11, 2013 at 2:48 pm #55679SiegerVinnareMember
Hi There,
I have combined woocommerce with the minimum theme and the integration
seems to have went pretty smooth except for a couple problems I can't seem to
fix.1. On my store page(URL: http://bit.ly/161PoDq) I added a widget above the content (genesis extender plugin) using the hook "genesis_before_content" and it worked except that it pushed my sidebar down, so the only solution I could find was to add the code:
.archive.woocommerce .sidebar { margin: -120px 0 0 0; }
and I was successful in pushing the sidebar back up; however, apparently my "brands" pages(brand URL: http://bit.ly/18n8tQG) from the woocommerce brand plugin use the same CSS classes as the shop home page so it
now pushes the sidebar up on those pages as well.I am wondering if there is any way to keep my sidebar at the top without
having to adjust the margin like that and risk messing up the sidebar on
other pages.2. On mobile (iphone) the woocommerce shop page "Add to Cart" and "Select
Options" buttons below each product are too wide and overlap each other.
Is there anyway to fix this? The button size looks like it needs to shrink more on
mobile resolutions.Any help with these matters would be greatly appreciated!
Cheers,
TylerDisclaimer: I am still a CSS newbie.
August 12, 2013 at 9:31 am #55793David ChuParticipantHi,
I've wrestled with Woo Commerce, Woo Sensei, and probably a couple Woo others, trying to get them to look decent in Genesis. Woo sidebars are often a challenge, and sometimes a big pain. I usually use CSS to fix them, and at times, one must dig into Woo documentation and make programming changes.You're doing quite well so far! Did you use the Genesis Connect plugin? This is generally necessary for getting Woo sidebars to not look awful.
Dave
PS: I don't know if Genesis Connect will work with Genesis 2 with HTML5 turned on. (on your site, it's not turned on) I may investigate that.
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
August 12, 2013 at 12:16 pm #55829SiegerVinnareMemberThanks for your reply David. I considered turning HTML5 on; however, like you said, I don't know if genesis connect will work with 2.0. I have a feeling that it won't. Hopefully they update the plugin soon.
The integration was going pretty smoothly until I used genesis extender plugin to add a widget area above the products on the woocommerce shop page. I can't get the sidebar to stay at the top; seems to stay pushed down no matter what I do. I added that -120 top margin and it worked, but then messed up the sidebar on a couple other pages.
I am considering adding the woo sidebars plugin to manage my sidebar content, but I'm afraid I'll run into problems with that too.
Any tips for getting my sidebar to stay up at the top would be a huge help!
Cheers,
TylerPS. I have taken out that -120 top margin code so the sidebar shows up perfect on my brand pages, but on my main shop page it is pushed down about 100-120px.
August 12, 2013 at 1:11 pm #55840David ChuParticipantOh, I gotcha.
You're getting tricky there with that extra Extended thingie! 馃檪This is somewhat of a hack, but try it on for size. This should pull up the sidebar only on the Shop page and leave the others alone. Take a look at the BODY on that page, and you'll see the class that I'm leading with here. I'm using that to distinguish it from your other pages - it's more specific. (If that doesn't work, there are loads of classes on BODY that you could try.)
.post-type-archive-product .sidebar { margin-top: -120px; }
If that does work, make a note of how you can use handy classes from particular pages/posts to do all kinds of fun stuff. In case there are no classes that do what you want already there, you can also add classes to a Post/Page right at the bottom of the editor, a standard Genesis feature!
PS: you have Genesis 2, but you don't have HTML5 turned on (which requires manual intervention, a safety feature), so you could actually try "pre-2.0" plugins if you want.
Dave
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
August 12, 2013 at 4:29 pm #55886SiegerVinnareMemberThanks Dave! That was a big help. Seems to have worked. Your point about making note of the body classes helps a ton too. I kind of knew what I was looking at with those but never completely understood. I think I do now and it will help a lot with editing certain pages in the future.
The only problem I have now is that pushing the sidebar up on the store page has also pushed it up on my mobile view store page and as you probably know, the sidebar is underneath the content on mobile, so now it has pushed it up right into the main content and created a bit of a disaster. Is there a way to make it so the responsive design ignores that -120px top margin?
Thanks again for all your help.
Tyler
August 12, 2013 at 4:52 pm #55899David ChuParticipantCool!
For the last thing, just go into your CSS. You'll see "media" stuff near the bottom, beginning with an @ sign. You will see different device widths there. Try this line command underneath one of them, and test. If that doesn't work, pick a different device width, and move the line there..post-type-archive-product .sidebar { margin-top: 0; }
This will give you an awareness of how those device breakpoints change the size of stuff! Last important lesson: Back up this file somewhere! If you don't, if you update the theme you may lose your nice changes! 馃檪
D
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
August 12, 2013 at 5:19 pm #55903SiegerVinnareMemberThanks for the quick reply Dave. I tried adding that code; I added to all of the device widths and it still didn't push down the sidebar. I tested it on an iphone and an ipad. Both still had the sidebar pushed up into the content. I tried clearing the cache and it made no difference.
Not really sure what to try now. Any ideas?
Thanks for the tips! 馃檪 Definitely helpful for a newbie like myself.
Tyler
August 12, 2013 at 6:24 pm #55915David ChuParticipantTyler,
You have the CSS in there just great. This was a brain teaser! Something is weird about the Genesis Extender, which is pouring in CSS that's interfering with the good stuff that you're writing.If that renegade thing has a place for custom CSS, you could try the latest bit of code up there, just be sure to have the media line, the new code, and a closing bracket after that to officially close media line.
Keep in mind that in some of these issues the Extender support may be helpful. I don't have that, so I can't give firsthand help.
Cheers, D
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
August 12, 2013 at 9:55 pm #55948SiegerVinnareMemberDave, you're a genius. I had to add the code to the genesis extender custom CSS table. That is where I added the original -120px margin top code as well. I think when I put together the real site I will try to keep everything on the same CSS. I would assume that is best practice; however, I didn't know the extender was putting the code somewhere else. In fact, I still don't know where the file is exactly... I just edit it from the plugin.
Thanks again Dave! Huge help.
Cheers,
TylerPS. I'm going to send you a message through your website contact form.
August 13, 2013 at 7:52 am #56039David ChuParticipantGlad you got it sorted! Usually plugins that deal with CSS will pop it onto your page, and sometimes the order of the stylesheets can get gnarly. A plugin will usually try to have theirs be the last in the "concatenation", which makes sense in most cases. So if you're using that plugin, I'm guessing that this is where CSS changes should go instead of style.css.
I do want to examine that Genesis Extender sometime, it does sound quite interesting. Right now, I'm my own
Grampa"Extender". 馃檪
Dave Chu 路 Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.