Display the wishlist items in a list or grid

This article only applies to the pro version of the plugin.

The wishlist items are displayed by default as a list of items in a table. In the pro version, you can toggle the display between the list and grid modes as shown in the screenshots below.

List view
Grid view

The toggling is only set up by default on the wishlist page as this is where most store owners want the wishlists to be toggled between the list and grid modes. In the wishlist account area and in the admin, the wishlist items remain displayed in the default list table mode.

On the frontend however, this default setup can be changed to match your needs.

For example if you want all wishlist items be displayed in the grid mode, you can set this up using the filter below:

add_filter( 'nmgr_items_display', 'set_nmgr_items_display' );

function set_nmgr_items_display( $display ) {
	if ( is_nmgr_wishlist() ) {
		$display[ 'mode' ] = 'grid';
		$display[ 'toggle_mode' ] = false;
	}
	return $display;
}

We have targetted the filter to run only on the wishlist page using is_nmgr_wishlist() as it runs throughout the frontend by default. We have also set $display[ 'toggle_mode' ] = false because we don’t want users toggling the grid mode after we have set it.

Column and row gaps for grid mode

When the items are displayed in the grid mode, the default number of items to be shown in a row is 3. The default gaps that exist between the items in the row and the row of items on the page are both 25px. These values can also be changed using the same filter. So for example, to set the default number of items in a row to be 4 and to increase both the column and row gaps between the items to 40px, you would use the code below:

add_filter( 'nmgr_items_display', 'set_nmgr_items_display_gaps' );

function set_nmgr_items_display_gaps( $display ) {
	$display[ 'columns' ] = 4;
	$display[ 'column-gap' ] = '40px';
	$display[ 'row-gap' ] = '40px';
	return $display;
}

Summing up

In summary, the above code and the previous one can be combined into one since they use the same filter, as shown below:

add_filter( 'nmgr_items_display', 'set_nmgr_items_display' );

function set_nmgr_items_display( $display ) {
	if ( is_nmgr_wishlist() ) {
		$display[ 'mode' ] = 'grid';
		$display[ 'toggle_mode' ] = false;
		$display[ 'columns' ] = 4;
		$display[ 'column-gap' ] = '40px';
		$display[ 'row-gap' ] = '40px';
	}
	return $display;
}