Products are too close in wooCommerce with 2013 WordPress theme

Question

I have installed wooCommerce plugin in WordPress, then activated the "Twenty Thirteen" theme and have added 4 products.

Does anybody please know how to fix the problem, that the products are show too close and their "Add to basket" labels overlap (at least in Russian language, here fullscreen)?

I have tried different widget configurations, like removing the basket from the right side - this doesn't help.

If needed, I'm comfortable with editing JS, CSS and PHP files - but don't know WordPress well.

Answer 1

There are many ways that you could fix this layout issue, but here's a quick fix for you.

Add this to your css:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    min-width: 220px;
}

This isn't a perfect solution, and a look at your actual image sizes and desired output would help to make this work better, but this will fix your issue.

Another possible solution is to use the shortcode in the template file for your shop and limit the output to 3 columns.

<?php echo do_shortcode('[products ids="1, 2, 3, 4, 5" columns="3"]');?>

As mentioned in another answer, to directly change the number of columns without creating a custom template for the shop page:

add_filter( 'loop_shop_columns', function() { return 3; } );

Add this to your functions.php file within your theme.

Answer 2

To change the number of products per row use loop_shop_columns filter.

/* functions.php */

add_filter( 'loop_shop_columns', function() { return 3; } );

But that still will not solve the problem, you will probably have to override WooCommerce styles for button and product list elements ( note that first and last elements in the row have specific CSS classes 'first' and 'last' ).

Answer 3

This is what I did to move the products apart. Add this to your css:

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
padding: 15px;

}