WordPress.org

Ready to get started?Download WordPress

Forums

Product item grid options for woothemes (6 posts)

  1. Perfect Circle
    Member
    Posted 1 year ago #

    Hi. Is there an option in the cms where I can change the number of columns in which my products are displayed. At the moment I have set the number of products to be display per page to 6, but I want a 3 col x 2 row grid. My theme (mystile) is forcing 4 items per row, (see http://www.essententopals.com). How can I change this to 3?

    (note I changed the size of the wrap so it would only fit 3, but now it only puts one item on the next line, then starts a new line).

    The HTML output look like this.

    <ul class="products">
         <li class="product first">
         <li class="product ">
         <li class="product ">
         <li class="product last">
         <li class="product first">
         <li class="product ">
    </ul>

    I can't edit the HTML directly as it is generated by a query, but I assume there is a way the get that last and first the position correcting.

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    From looking at that, you would probably need to modify the php so that the classes are assigned to 3 posts not 4. And then probably modify the CSS code as well.

    You'll likely need to contact WooThemes for specific help - as these forums only support themes from the repository here: http://wordpress.org/extend/themes/

  3. Perfect Circle
    Member
    Posted 1 year ago #

    Ok. Unfortunately I can't get help from woothemes as I am not a paying member. Thanks anyway.

  4. Perfect Circle
    Member
    Posted 1 year ago #

    Ok, worked it out after going through nearly every page of code.

    I assume this would work for any woocommerce theme.

    In the file theme-woocommerce.php, go down to the section commented "PRODUCTS"and look for the code:

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

    Change the number to whatever - in my case 3.

    Above this code, you can also change the number of rows per column.

    Note: you can update this in wp appearance/editor, but not sure if any changes might be overridden when updating, so might best to set up a child theme, if you haven't already.

    The theme-woocommerce.php file is in the includes folder.

  5. Perfect Circle
    Member
    Posted 1 year ago #

    Also note, this function doesn't carry over to widgets such as feature products - it doesn't insert any "last" class.

  6. Perfect Circle
    Member
    Posted 1 year ago #

    Ok, regarding previous post, it does work, but you need to put in the number of columns manually.

    For example, the code (also in theme-woocommerce.php) for feature products is:

    function mystile_featured_products() {
    	global $woo_options;
    	if (class_exists('woocommerce') && $woo_options[ 'woo_homepage_featured_products' ] == "true" ) {
    		echo '<h1>'.__('Featured Products', 'woothemes').'</h1>';
    		$featuredproductsperpage = $woo_options['woo_homepage_featured_products_perpage'];
    		echo do_shortcode('[featured_products per_page="'.$featuredproductsperpage.'"]');
    	} // End query to see if products should be displayed
    }

    Note the line echo do_shortcode. The shortcode, (as shown on the wootheme website: http://wcdocs.woothemes.com/user-guide/misc/shortcodes/), allows you to enter "columns" as such:

    [featured_products per_page="'.$featuredproductsperpage.'" columns="3"]');

    Columns need to be specified for the loop_columns funtion to work.

    Note, if you only wanted one row you could enter the '.$featuredproductsperpage.' variable instead of the specific number.

Topic Closed

This topic has been closed to new replies.

About this Topic