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 15 replies - 1 through 15 (of 16 total)
  • Thread Starter rusticmodern

    (@rusticmodern)

    FIY the https://www.rusticmodern.net/shop page does seem to display nicely, however I do not use that page on my site.

    Thread Starter rusticmodern

    (@rusticmodern)

    Another update: products display well on the home page when i switch back to the default woocommerce theme (“Storefront”). Maybe there is some code from there I can add to my custom theme?

    Thread Starter rusticmodern

    (@rusticmodern)

    One other thing I notice is that the default sorting (custom order) does not work on the shop or homepage(shortcoded) with my theme, but does work with the default theme. Is there something from the default theme I can include to make that work as well?

    Plugin Contributor Gerhard Potgieter

    (@kloon)

    From what you describe it sounds like your theme might just be missing some styling to handle the different row layouts.

    Try this custom css:

    .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(3),
.woocommerce-page ul.products li:nth-child(3) {
  margin-right: 0% !important;
}
    Thread Starter rusticmodern

    (@rusticmodern)

    Thank you so much lorro! That worked perfectly.

    Any idea what code I can add to allow custom sorting? I believe my theme is missing that as well.

    Greatly appreciate the help!

    Please expand, what did you want to sort, in what way and on which page?

    Thread Starter rusticmodern

    (@rusticmodern)

    I have my products listed on home page as:
    [products orderby=”menu_order”]

    When i use woocommerce > products > sort option and drag and drop to re-arrange the order of products, it DOES update the menu order field, however the changes do not appear on the front end page until I go in and edit the product then click update (not making any changes to the product or the menu order). Then the product WILL appear in its new position.

    In short, rearranging (graphical sort) DOES change menu order number, but not on front end. Manually editing a product or menu order number does change order on front end.
    However rearranging through the graphical sort does not automatically update front end.

    So I guess I just need to tell wordpress to “refresh” the updates to the product somehow.

    • This reply was modified 7 years, 4 months ago by rusticmodern.
    • This reply was modified 7 years, 4 months ago by rusticmodern.
    • This reply was modified 7 years, 4 months ago by rusticmodern.
    • This reply was modified 7 years, 4 months ago by rusticmodern.
    • This reply was modified 7 years, 4 months ago by rusticmodern.
    Thread Starter rusticmodern

    (@rusticmodern)

    No caching on the site, and using Chrome incognito, so no browser caching as well.

    Thread Starter rusticmodern

    (@rusticmodern)

    Example: the yellow centered bowl is position 4 on the Products>All products>sort page (you can see it is position #1 on the front end). If i were to go in and edit the product, I would see that it’s menu order field is higher than the 3 above it.

    However, if I go in and edit the product (make NO changes) and click update, that yellow bowl will move to position 4 on the front end.

    Thread Starter rusticmodern

    (@rusticmodern)

    Ok, i figured out that editing and updating any 1 product will fix the whole sort order, regardless if that product moved. So that will be my workaround for now. Just editing & updating one product (making no changes) after sorting…

    Thread Starter rusticmodern

    (@rusticmodern)

    Hey lorro,
    Your code for doing 3 products per row worked fine on the first row, but after adding more products I see that the 2nd and 3rd lines are only doing 2 products. Any idea what to change to fix this?
    rusticmodern.net

    Thread Starter rusticmodern

    (@rusticmodern)

    Made kind of a workaround (inelegant) by replicating the last section of code w/ multiples of 3:

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

.woocommerce ul.products li:nth-child(6),
.woocommerce-page ul.products li:nth-child(6) {
  margin-right: 0% !important;
}

.woocommerce ul.products li:nth-child(9),
.woocommerce-page ul.products li:nth-child(9) {
  margin-right: 0% !important;
}

    Maybe there is some way to do n=3, then n=n+3

    I can see 3, 3 and 2 products here so looks ok. What browser and viewport size are you using?

    I’ve probably seen it after you applied that fix.

    Yes it looks like the 3 is only the 3rd item and not multiples of 3, but there is a multiple syntax, see:
    https://www.w3schools.com/cssref/sel_nth-child.asp
    “Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.”
    so you would use nth-child(3n + 3)

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

Tags