asked on

Woocommerce products per row

Hi,

I have updated woocommerce on a site i am working on and since then it only displays 2 products per row. It used to be 4, i Googled for a solution and tried the following code in the functions.php file but still only showing 2 products per row.

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 4;
}

Any help would be much appriciated.

Many Thanks,

Andrew

Peter Hart

can you provide a link?

what theme are you using ? - has that been updated?

Peter Hart

I think you may have missed a bit off - changing the number of rows has more detail in this post:

http://www.themelocation.com/how-to-change-number-of-products-per-row-in-products-page/

Andrew Spackman

ASKER

Here is a link http://www.mariebarleyphotography.co.uk/shop/

I haven't updated the theme at all, although it's been a bespoke build based on a theme used for the main structure.

Andrew Spackman

ASKER

I used this code in my functions.php file but it didnt change anything

add_filter('loop_shop_columns', 'loop_columns');

if (!function_exists('loop_columns')) {

functionloop_columns() {

return 1; // 1 products per row

}

}

Peter Hart

any caching enabled?

Andrew Spackman

ASKER

No caching enabled

Peter Hart

thanks for the link
yes - that's weird!
looking at the code the product lists are set up to do 4 across,
but something has overridden or stop it.
have you tried disabling the pop up that you were having problems with? to see if that removes the problem?

also when you look at the screen on a small device it still displays the products in 2 per row (and I'm guessing when you fix it it will be 4 per row) which should be 1 per row on a smart phone.

now if you find this bit of code and in the style sheet and remove it it seems to work..

.woocommerce #content div.product .woocommerce-tabs, .woocommerce #content div.product .woocommerce-tabs ul.tabs:after, .woocommerce #content div.product div.thumbnails a.first, .woocommerce #content div.product div.thumbnails:after, .woocommerce .cart-collaterals:after, .woocommerce .col2-set:after, .woocommerce .woocommerce-pagination ul.page-numbers:after, .woocommerce div.product .woocommerce-tabs, .woocommerce div.product .woocommerce-tabs ul.tabs:after, .woocommerce div.product div.thumbnails a.first, .woocommerce div.product div.thumbnails:after, .woocommerce ul.products, .woocommerce ul.products li.first, .woocommerce ul.products:after, .woocommerce-page #content div.product .woocommerce-tabs, .woocommerce-page #content div.product .woocommerce-tabs ul.tabs:after, .woocommerce-page #content div.product div.thumbnails a.first, .woocommerce-page #content div.product div.thumbnails:after, .woocommerce-page .cart-collaterals:after, .woocommerce-page .col2-set:after, .woocommerce-page .woocommerce-pagination ul.page-numbers:after, .woocommerce-page div.product .woocommerce-tabs, .woocommerce-page div.product .woocommerce-tabs ul.tabs:after, .woocommerce-page div.product div.thumbnails a.first, .woocommerce-page div.product div.thumbnails:after, .woocommerce-page ul.products, .woocommerce-page ul.products li.first, .woocommerce-page ul.products:after {
     clear: both; 
}

Open in new window

the style sheet is here:
http://www.mariebarleyphotography.co.uk/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=2.6.1

i.e edit out the "clear: both;" and retest

ASKER CERTIFIED SOLUTION

eemit

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Andrew Spackman

ASKER

Hi Eemit,

The filter didnt work for me, it was still applying the .last class to the second column not the fourth.

chilternPC - I removed the clear:both and had to do some styling to remove the margin:0 from the .last as it was still appearing in the second column, although this looks ok now, its not ideal but im out of ideas.

Thanks Both

Peter Hart

the number of columns when people look on a portrait iPad or iPhone is still 4 columns on these small devices.
this would be in the style sheet where the @media queries are.
the woocommerce themes I used in the past have a max column setting but display in a responsive way.. Do the theme suppliers say its responsive?

Andrew Spackman

ASKER

Thanks for your help, i have settled with this solution