Moving upsell products in Woocommerce

  • Hello,

    Just trying to get a bit more organisation with my products on my website as the format is a bit all over the place on desktop.

    Currently my upsell products that we recommend aren’t in the the correct place they are all the way down the bottom and a fair way away from the section that says ‘You may also like’

    Just wondering if there’s an easy CSS option that I can’t seem to think of to make recommended products populate directly underneath and vertically stacked on one another.

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter jamos7

    (@jamos7)

    Example image

    • This reply was modified 4 years, 4 months ago by jamos7.
    Moderator bcworkz

    (@bcworkz)

    To get the “You may also like…” to be with the related products, do this:

    .up-sells.upsells.products {
    clear: both;
}

    You have several width rules with !important modifiers, which makes it difficult to manipulate elements within. You need to avoid these as much as possible, they just lead to trouble. You’ll see the above rule doesn’t fill in the white area below the presentation night image. This is because the center column elements occur before the “also like” stuff. The “also like” stuff thus ends up below the center column stuff.

    Ideally, alter the template so the “also like” elements occur before the center column stuff. Set the container width so “also likes” are forced to occur below the presentation night image, while leaving room for center column stuff to come afterwards to the right.

    If you can’t alter the template, maybe you can reorder elements with flex-box or grid CSS. Grid CSS may be your best option to get the layout you want, but I’ve little experience with it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Moving upsell products in Woocommerce’ is closed to new replies.

Tags