CODEWITHSUNDEEP
wordpresswordpress-themingwoocommerce
Alexander Farber
Alexander Farber

Reputation: 22978

Products are too close in wooCommerce with 2013 WordPress theme

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)?

website screenshot

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.

Upvotes: 1

Views: 899

Answers (3)

lonnie
lonnie

Reputation: 21

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;

}

Upvotes: 2

codescribblr
codescribblr

Reputation: 1176

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.

Upvotes: 2

Danijel
Danijel

Reputation: 12689

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' ).

Upvotes: 2

Related Questions