New to the community? Start here

Make woo commerce products fit across page

http://www.johnsroberts.com/shop/

Hi,

I need to make the products fit 4 across the page as there appears to be room?

Thanks in advance for your great work!

[attachments are only viewable by logged-in members]

Sun, 27 Mar 2016 9:59:47
  • Sajid
    • DEV MAN’s Sidekick

    Hi @Studio3creative,

    Hope you are doing good today :slight_smile:

    You are using 3 items in one row option. If you have items per row settings in your theme somewhere then please change the items from 3 to 4.

    If no then try adding following code in functions.php file of your child theme or use mu-plugin.

    // Change number or products per row to 3
    
add_filter('loop_shop_columns', 'loop_columns');
    
if (!function_exists('loop_columns')) {
    
function loop_columns() {
    
return 4; // 4 products per row
    
}
    
}

    Alternatively you can also use this free plugin to customize the products archives pages.

    https://wordpress.org/plugins/woocommerce-product-archive-customiser/

    Hope that helps! Feel free to post a reply if you need further assistance :slight_smile:

    Cheers, Sajid

  • Panos
    • SLS

    Hello @Studio3creative,

    Hope you had a great weekend :slight_smile:

    Thank you for granting us access! I logged in and went to WC settings under the Products tab and despite setting the option “Product Columns” to 4 it still displayed 3. I suppose this has to do with the theme.

    As the theme is premium I guess you could ask for advice from the theme developer. I can only provide a quick fix for this with CSS only, it will not offer any additional options in the WC plugin or your theme. You can paste the following CSS code in your theme’s Custom CSS field :

    .has-sidebar .product.four{
    
width: 22%;
    
margin-right: 3%;
    
height: auto;
    
}
    

    
.has-sidebar .product.four:nth-of-type(3n){
    
margin-right: 3%;
    
}
    

    
.has-sidebar .product.four img{
    
height: auto;
    
}

    This should allow 4 products to be displayed in your products list page :slight_smile:

    Hope this helps!

    Kind regards,

    Panos