Problem with columns (# products per row) in product catalog view w/ shortcod

  • Resolved rusticmodern

    (@rusticmodern)


    7 years, 4 months ago

    Hello,
    I am using WooCommerce and have the shortcode [products] on my homepage to display products. However, products are only showing up 2 per row and half the page, rather than going across the page (demonstrated below w/ X for product)

    X X
X X

    I have the sidebar disabled.
    I tried using [products columns=”3″] which does change it, but to this with alternating 1 and 2 columns, where the 2 are stuck closely together.

    X
XX
X
XX

    Please help me figure out how to allow the products to go across nicely. I can provide any code or other info from my site you need.
    Thanks

    The page I need help with: [log in to see the link]

Viewing 16 replies (of 16 total)
  • Thread Starter rusticmodern

    (@rusticmodern)

    Great. So for anyone who was wondering, what code to add to themes that do not have styling for product rows, here it is (where 3n is the number of products per row)

    .woocommerce ul.products li.first,
.woocommerce-page ul.products li.first {
  clear: none;
}
.woocommerce ul.products li.last,
.woocommerce-page ul.products li.last {
  margin-right: 3% !important;
}
.woocommerce ul.products li:nth-child(3n),
.woocommerce-page ul.products li:nth-child(3n) {
  margin-right: 0% !important;
}

    Thanks lorro, and I hope this helps someone else as well.

Viewing 16 replies (of 16 total)
  • The topic ‘Problem with columns (# products per row) in product catalog view w/ shortcod’ is closed to new replies.

Tags