WooCommerce columns

Home Forums Monument Valley WooCommerce columns

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #16842

    WikidCool
    Participant

    WooCommerce columns

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hi,

    How can I get WooCommerce to display product listings/categories in 3 columns?

    #16843

    Oliver Juhas
    Keymaster

    Hi WikidCool,

    When shop sidebar is displayed, the products take 2 columns, if no sidebar is displayed the products are layed out into 4 columns. So, you can just remove widgets from your shop sidebar to display 4 products columns.

    If you provide the affected page URL, I can provide you with custom CSS forcing the shop products columns to 3.

    Regards,

    Oliver

    #16844

    WikidCool
    Participant

    This is a private reply!

    This reply has been marked as private.
    #16845

    Oliver Juhas
    Keymaster

    Hi Steve,

    Please apply this custom CSS, it should work just fine:

    @media only screen and (min-width: 80em) {
    	.single-product ul.products .product,
    	.woocommerce.archive.no-widgets-sidebar ul.products .product {
    		width: 31.33333%;
    	}
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #16846

    WikidCool
    Participant

    Thank you, that worked perfectly :)

    #16940

    WikidCool
    Participant

    Hi Oliver,

    Now that I’ve set products to display in 3 columns, the related products needs to show 3 posts/items only, not 4, as this causes it to wrap the 4th item to a new line which does not look good).

    Any help would be greatly appreciated.

    Regards,
    Steve

    • This reply was modified 1 year ago by  Oliver Juhas. Reason: Making the reply public as there is no sensitive information
    #16942

    Oliver Juhas
    Keymaster

    Hi Steve,

    You can use this code in your child theme‘s functions.php file:

    function child_theme_woocommerce_helpers_return_number( $numbers ) {
      $numbers['shop_columns'] = 3;
      return $numbers;
    }
    add_filter( 'wmhook_monument_valley_woocommerce_helpers_return_number', 'child_theme_woocommerce_helpers_return_number' );

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.