Community Forums › Forums › Archived Forums › General Discussion › Woocommerce Shop Page
Tagged: WooCommerce
- This topic has 22 replies, 2 voices, and was last updated 9 years, 11 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
May 21, 2014 at 12:49 pm #106190jalodicoMember
I am using Woocommerce with the Agency child theme and it doesn't look like the shop page is showing properly. I can't figure out how to modify it either.
I have installed the Genesis WooCommerce Connect plugin and tried a few other things but nothing seems to work.
Ideally, I'd like to just get the basic Woocommerce styling to show.
Here's a sample page:
http://www.wheatusa.com/shop/
(Yes, some products are missing images)Any suggestion as to how to get this page looking better? I can't believe this is the default styling.
Thanks in advance for any help
http://www.wheatusa.com/shop/May 21, 2014 at 4:31 pm #106234Tony @ AlphaBlossomMemberHello,
Maybe someone else will chime in with their thoughts, but everything looks correct to me. The issue is the default woostyling uses a white background. When you remove the white background, it looks really bad without additional styling.
I added a white background and some padding to .content on your site and it looks ok. Some things are overridden by your Genesis styling, such as fonts, font-sizes, input padding and styling, etc, but overall it looks like the default styling that comes with woo.
If you want to keep the transparent background on your content and just have white behind each product box, you will most likely have to change to 3 across, then you can add some padding around each item and it will look much better. If so, let me know what you want and I can help you with that.
Have a great day,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 22, 2014 at 10:16 am #106345jalodicoMemberThanks Tony,
I've been trying to make changes with Firebug but I can't seem to get it to work. I'd like it to show three across and offer a number of rows down.
I was able to set up some category pages using WooCommerce short code and the products look pretty good. The white background does help. I also like the shading on the boxes and the rounded corners.
http://www.wheatusa.com/junior-clothing/
I would be great if I could get the shop pages to look similar. I imagine it's a matter of pulling that template somehow but I'm not sure where it would go or even what template that is using.
Any help would be greatly appreciated and yes, I'm really good at copying and pasting code.
Jim
May 22, 2014 at 12:26 pm #106361Tony @ AlphaBlossomMemberHey Jim,
It looks much better with the white background. You can use this filter added to your theme's functions.php to control the number of columns:
add_filter( 'loop_shop_columns', 'wc_loop_shop_columns', 1, 10 ); /* * Return a new number of maximum columns for shop archives * @param int Original value * @return int New number of columns */ function wc_loop_shop_columns( $number_columns ) { return 3; }
I tested with the Agency Pro theme and it works well. You'll have to adjust the css to fit your needs for three colums with something like this added to your theme's style.css file:
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product { float: left; margin: 0 5% 2.992em 0 !important; padding: 0; position: relative; width: 30% !important; }
Try without the !important first and if it doesn't work, add the !important back in.
If you want to modify any of the templates, you can copy the WooCommerce templates into your theme's folder and make any changes there. Just as with the Genesis Framework, it's never a good idea to modify core files, so this lets you copy them to your theme and make changes there which won't be overwritten as you update.
For example, if you want to customize your single product page, you would copy woocommerce/templates/single-product.php to yourtheme/woocommerce/single-product.php
http://docs.woothemes.com/document/template-structure/
The archive-product.php file is the main file for the shop page.
One last thing, depending on what you want to change - often you can do this with filters/functions so you don't need to copy the file over.
Hope this helps!
Take care,
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 22, 2014 at 12:37 pm #106362jalodicoMemberThanks so much Tony. I'll give this a try and let you know how it goes.
Jim
May 22, 2014 at 1:08 pm #106365jalodicoMemberThat's looking better but I'm not sure how to style it. I didn't see much difference with the CSS you suggested above both with the "important" and without.
I tried adding the archive-post.php template but that didn't look so good. So what determining the style of the categories link I shared above? Is there a way I can just copy that over so that the archive page looks the same?
I pulled that category page with short code that included the number of columns and products displayed. I was thinking if I could figure out where that is coming from I might be able to copy it into a new archive-product.php file to get a similar style.
If you look at the shop page now, you can see that it is showing three products on the top row but only two on the bottom. I see what controls the number of products across but what controls the number of rows down and why would it only show 2 instead of 3 products in that second row?
Thanks again Tony. You are a lifesaver.
May 22, 2014 at 1:22 pm #106366Tony @ AlphaBlossomMemberHey Jim,
No problem, glad to help.
The !important is also overriding the .last margin (the 3rd of each row), so you'll also have to add this under the css you added above:
.woocommerce ul.products li.last, .woocommerce-page ul.products li.last { margin-right: 0 !important; }
I really don't like to use !important unless I have to...there are ways around it here, but it starts getting complex and I didn't want to confuse the main issue.
The number of products shown is controlled by settings > reading > Blog pages show at most (in your admin panel). This also controls blog posts, so if you want to control the shop separate from blog posts you can add this to your functions.php file:
// Display 24 products per page. Goes in functions.php add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 24;' ), 20 );
Change 24 to whatever you want it to be.
For some reason the lower section is not being filtered to show 3 across. How are you adding those later items?
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 22, 2014 at 1:29 pm #106368Tony @ AlphaBlossomMemberTry using this function instead of the one above:
// Change number or products per row to 3 add_filter('loop_shop_columns', 'loop_columns'); if (!function_exists('loop_columns')) { function loop_columns() { return 3; // 3 products per row } }
I haven't used WooCommerce Connect plugin, so it's possible that this filter does not work with that. Maybe a question to post on their forum...but I tried this on Agency Pro and it works for me on both category and shop pages (this function and the function above both).
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 23, 2014 at 8:58 am #106496jalodicoMemberIt looks like the "!important;" was changing the style of the product boxes in a way that didn't look so good. Removing it helped things line up better.
I didn't realize the number of products was in the reading settings. That helps a lot and shows much better. They don't use the blog so not a big deal. I added the second bit of style to fix that last row but it still didn't work. I didn't add the functions since there is no need for the blog. Is that why it isn't working?
The last thing I'd like to do is add a white background. I was able to do it in firebug but can't seem to get it to work on the site. It looks like it goes in the same code which you provided above. I tried it both with the important and without but it didn't work.
Same with the page numbers at the bottom. I was able to change the background color to white in firebug but can't seem to find it in the stylsheet. Is this being pulled from somewhere else?
May 23, 2014 at 11:34 am #106514Tony @ AlphaBlossomMemberThe !important overrides other rules and can cause a lot of issues so I try to only use it when absolutely necessary 🙂
You currently have this in your style.css file:
.entry { background-color: #FFFFFF; border-radius: 3px; margin-bottom: 4rem; padding: 4rem 4rem 2.4rem; }
The problem is your shop page doesn't have .entry, so it doesn't apply there. Two ways to handle it. The first is best if it doesn't screw up your other pages. Maybe give it a try and check your other pages to see if it works.
I would move all of these styles from .entry to .content, so your .content will look like:
.content { float: right; width: 740px; background-color: #FFFFFF; border-radius: 3px; margin-bottom: 4rem; padding: 4rem 4rem 2.4rem; }
You might have to play around with it a bit but that should take care of it for all pages.
If it screws things up, you can add this for only the shop page:
.post-type-archive-product.woocommerce-page .content { background-color: #FFFFFF; border-radius: 3px; margin-bottom: 4rem; padding: 4rem 4rem 2.4rem; }
I haven't tested this, but this should apply to only the shop page, so the rest of the site will be as is.
The function above filters the existing woo loop to change how many columns you have. I'm not sure how you were adding the second (bottom) section, but my guess is it was a shortcode. If so, I believe there's an argument that controls that for short codes as well...but it looks like you got that sorted out anyways.
Also, with the above the pagination will now be on a white bacgkround...but if you need to change them more and are having problems, let me know.
Have a great weekend!
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 23, 2014 at 12:27 pm #106517jalodicoMemberThat did it. I added just the second code you provided as I only need to change those archive/shop pages.
I'm not sure why the last row doesn't show. The example I sent with the white background was created with a short code but it shows the last row properly. The archive/shop page where we just added the white background still only shows one product on the last row.
Now that I've added more products to the page through the settings/number of posts, it doesn't stand out near as much now.
Thanks so much for your help with this. You've been a lifesaver.
Jim
May 23, 2014 at 1:18 pm #106521jalodicoMemberSpoke too fast. It worked on the "shop" page but not on the category "shop" pages. I added the first code and it worked.
Thanks again,
Jim
May 24, 2014 at 2:21 pm #106625Tony @ AlphaBlossomMemberHey Jim,
It looks like it's getting there 🙂
Yea, I think adding the white background to .content is better all around, just wasn't sure how it would affect other pages.
I'm still not sure about the second section...It's showing 4 columns for me, and the css is for 4 columns as well. I'd have to know how it's being added to try to figure it out, but is sounds like you're ok with it as is.
I'm glad we could get most of the issues resolved...if there's anything else, please let me know.
Have a great weekend!
Tony
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 27, 2014 at 7:20 am #106955jalodicoMemberThanks again Tony.
One last question, where are you seeing 4 columns (Second section?)? Everywhere I look it's 3. Everything under the "Shop" drop down at the top is going to an archive page. That is a link in the menu to show the selected category page which I believe is an archive page for the category.
I think I changed the number of products to 3 columns using the code you provided above.
May 27, 2014 at 3:22 pm #107050Tony @ AlphaBlossomMemberHi Jim,
Everything shows 3 across for me now. Might have been a cache issue or maybe before you changed it over.
If you want your three columns to extend the full content, you can add:
.woocommerce main.content ul.products li.product, .woocommerce-page main.content ul.products li.product { width: 30.8%; }
I added "main.content" so you shouldn't need !important, but if it doesn't work you can add it in and that will make your 3 columns span 100% of their wrapper.
Looking good!
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 28, 2014 at 10:24 am #107120jalodicoMemberThanks so much for all of your help Tony. One last thing (and this may be unrelated)...
Somewhere in this editing the home middle widget on the home page was changed and now it isn't showing properly. The dark background which pops up when you hover over is showing at the bottom of the images. I have another matching sister site with the same images and it works fine there. Not sure how to turn it back to it shows properly.
Any suggestions?
Thanks,
Jim
May 28, 2014 at 12:06 pm #107136Tony @ AlphaBlossomMemberHey Jim,
I took a look and all 6 boxes are working as expected. I checked in firefox, chrome, safari and ie latest.
Try clearing your cache to see if that fixes it for you.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 28, 2014 at 12:59 pm #107153jalodicoMemberThat's strange. I cleared the cache and it's not showing properly on Safari, Chrome and Firefox on my Mac. It looks like there is too much white space at the top and bottom of the container but I don't know why that would have changed.
I took a screen shot using Stitch. Link is below:
May 28, 2014 at 1:14 pm #107160Tony @ AlphaBlossomMemberI'm not sure I understand how it's supposed to be. I thought you meant the black hover boxes were not covering the images.
Can you post the link to the site that's working? Or additional description or diagram?
The white space on top is controlled here:
home-middle { padding: 10% 0 5%; }
Changing this to smaller numbers will take care of this, but not sure if that's what you're referring to.
Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom
May 28, 2014 at 1:31 pm #107170jalodicoMemberSure. Those images should be on an all white background. The black hover boxes are actually showing through underneath the images at the bottom of both rows.
Here's the sister site which is working properly:
If you compare the two sites you can see that something is pushing the white space above the images on the top and bottom.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.