Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Change number of columns in MNM grid layout
<?php
/**
* Change number of columns in grid layout
* @param int $columns
* @param obj $product
* @return int
*/
function kia_change_mnm_columns( $columns, $product ) {
return 4;
}
add_filter( 'woocommerce_mnm_grid_layout_columns', 'kia_change_mnm_columns', 10, 2 );
@maddinq
Copy link

maddinq commented Jan 14, 2019

looks like this snipped isn't working anymore. The Grid view show always all in one row

@theloader
Copy link

theloader commented Apr 7, 2020

Hi.- this code don't work anymore as it should, one row it get 4 product, on the next row it gets 5 product and so on, 4 and 5.

@helgatheviking
Copy link
Author

helgatheviking commented Apr 7, 2020

This code appears to still work with TwentyTwenty. It adds a columns-4 class to the <ul> that determines the grid sizes, then a first class to the first item in the row and a last class to the last item. The woocommerce/assets/css/woocommerce-layout.css then handles all the layout.

.woocommerce ul.products li.last, .woocommerce-page ul.products li.last {
    margin-right: 0;
}

Especially important is the 0 margin on the .last item of the row. However, if your theme has overridden woocommerce-layout.css stylesheet then the styles may not work. Specifically without it, you're almost guaranteed to get the alternating 4/5/4/5 situation as some rows will have the width for 4 and some for 5 depending on where the theme is putting the 0 margin item.

Additionally, if your theme is interfering in the WooCommerce loop somehow or if your theme has a custom grid layout... it may also not work for those reasons.

If you have a license please submit a support ticket and while I can't support individual themes, I could probably at least diagnose the issue for you: https://woocommerce.com/my-account/create-a-ticket/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment