WooCommerce Shop page images not displaying properly (3 posts)

  1. Lynn
    Posted 3 years ago #

    On the pages where WooCommerce displays multiple products —i.e., the Shop page, top level product category pages— the product images jump around when I hover over them. There are 4 products in a row, and when I hover over any of the first three, the last one in the row jumps down to the next row. If I hover over the last image in the row it is jittery. I looked in the CSS for WooCommerce and disabled a bunch of webkit stuff for product lists, but that didn't help.

    This happens in Chrome, Firefox, Internet Explorer, and Safari.

    When I disable WooCommerce CSS the problem disappears, but then there are only two products per row and that looks awkward.

    Also, on top-level category pages, the first row has just one product image in it, and the rest have the appropriate 4 in a row.

    ANY IDEAS on how to get rid of this?

  2. kmessinger
    Volunteer Moderator
    Posted 3 years ago #

  3. Mike Jolley
    Posted 3 years ago #

    This will be a combination of your theme css + woocommerce css causing the issue.

    It could be padding, margins, or borders. Without a link to your site I can't tell, but it will be solvable through extra CSS rules.

    Inspect the styles using Chrome inspector or firebug to see the rules being applied.

Topic Closed

This topic has been closed to new replies.

About this Topic