WooCommerce category column spacing

  • Resolved Bloke

    (@bloke)


    1 year, 9 months ago

    Trying to display 4 columns of categories with WooCommerce and style them like the product pages. I used the following shortcode.

    [product_categories ids=”1,2,3″ orderby=menu_order]

    Then to get them to display in even columns I had to add this CSS. I need to have space between the columns.

    .products.columns-4 > li {
    width: 25%;
    text-align: center;
    }

Viewing 9 replies - 1 through 9 (of 9 total)

  • Hi,

    Thanks for letting us know about this issue, we will fix the WooCommerce styling issue in a future release, until then you can use custom CSS in a child theme to fix it.

    Thanks!

    Thread Starter Bloke

    (@bloke)

    Thanks. I am trying and I got it to look similar with a child theme but just can’t get the spacing.

    How about trying this:

    .products.columns-4 {
    --card-gap: 24px;
}
    Thread Starter Bloke

    (@bloke)

    That puts 4 categories per row and a gap between the rows. But it does not put a margin on the left and right of each category like it does on the products.

    Hi,

    Can you provide a link to your page? Also, can you explain what “a margin on the left and right of each category” means using the screenshot?

    Thanks!

    Thread Starter Bloke

    (@bloke)

    In the list of products there is a gap vertically between each product and a gap below each product.

    In the grid of product categories there is no vertical gap.

    Hi, Link please.

    Thread Starter Bloke

    (@bloke)

    Another example of the spacing is how the related products appear. I don’t have a link yet its on my local host.

    • This reply was modified 1 year, 8 months ago by Bloke.

    Sorry, we can’t understand your problem very clearly as there is no online example, it needs more testing and we will try to fix it in the future.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘WooCommerce category column spacing’ is closed to new replies.