Responsive woocommerce shop page display problem

[JeffCl]

Hey everyone,

I have used genesis and the sample theme for a few sites and love it, but I am currently making an ecommerce site and have run into a few problems.

The mobile responsive layout is currently still displaying 4 products side by side, with things like the buttons and text sizes not responding and overlapping.

I would think 2 products side by side at tablet and a single product at mobile would make more sense. I could get this behaviour with storefront but want to stick with Genesis if possible.

Thanks for any help, much appreciated

http://69th-dept.com/shop/

[bisonbrah]

I too am having the same issue - NOTHING I do is fixing this problem.

Even reached out to WooThemes/WooCommerce and they said everything is pointing too Genesis..

:/

[JeffCl]

Yeah, it's annoying but I have gotten a little bit further in the last few hours... ( I really would prefer to stick with Genesis )

Check this out:
http://wpquestions.com/question/show/id/9934

The css from that link has my store page showing two columns, but they just resize smaller for a phone screen. It's better than showing 4 and with some styling on the buttons could be workable, but still not ideal.

I've seen that there are some experienced people in this forum, so I have my fingers crossed someone more experienced can shine a light in the right direction...

[bisonbrah]

It appears that it's populating vas via woocommerce-layout.css, not the css in woocommerce.css or the small screen woocommerce css file. My brain hurts lol.

Just launched a clients site yesterday and then bam the update happened and now their site looks like it's crap.

[JeffCl]

The css from that link with a bit of tweaking of media queries shows rows of two products on larger screens that respond to single product rows on phone size.

Its actually still two rows of 4 that are being split, in this case into 4 rows of two. If I play with the css it will show as a row of three, then row of 1, then 3 then 1...

I am pretty sure I saw some woocommerce php snippet floating around somewhere that will alter the amount of products shown in a row, if I can find that and reduce them to 3, then I should be able to tweak this CSS to show 3 products per row on PC/Tablet, and 1 product per row on Mobile.

I haven't updated woocommerce yet, I guess I should bite the bullet...

[Victor Font]

If you update the styles in woocommerce-layout.css, the next time there's a WooCommerce update, you'll overwrite your changes. I put up a lot of Genesis/WooCommerce sites. One of the first things I do is change the load order of the style sheets so the child theme style sheet loads after the WooCommerce styles. This way you can change WooCommerce styles in your theme's style.css so there's no risk of your changes being overwritten later. This article explains how it's done: http://victorfont.com/change-genesis-child-theme-style-sheet-load-order/

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[JeffCl]

@bisonbrah

I changed the amount of products showing per row, you can do it by adding a snippet to your functions.php or using a plugin:

https://docs.woothemes.com/document/change-number-of-products-per-row/
https://wordpress.org/plugins/woocommerce-product-archive-customiser/screenshots/

Then I adjusted my child-theme.css by adjusting the aforementioned css found here:

http://wpquestions.com/question/show/id/9934

My css adjusted for 3 images, dropping to 1 for iphone horizontal aspect:

body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {margin: 0 2% 20px 2% !important; text-align:center;}

body.woocommerce ul.products li.product a img, body.woocommerce-page ul.products li.product a img{margin:5px auto 15px auto !important;display:block;max-width:95% !important;}

body.woocommerce .products .star-rating, body.woocommerce-page .products .star-rating{margin:5px auto !important;}

@media (min-width:855px){
          body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {width: 29% !important;}
      }

@media (max-width:854px){
         body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {width: 96% !important;}
     }

It's working as I want it (roughly), still gonna play with styling, maybe make it respond at different sizes.

@Victor Font

Thank-you kindly for your help, I have changed the load order so now my css is loading last. Your site is also full of a myriad of other useful snippets and tutorials for problems I've come across, I'm about to load my fonts locally and remove wordpress script query strings on several other sites, and see about improving their responsive menu.

The fact that you are regularly building Genesis/Woocommerce sites gives me confidence to stick with it.

[bisonbrah]

Awesome - looks like I got mine squared away - thanks as always Genesis community!

[Author]

Posts