woocommerce 3.3.0

  • Resolved eagleview

    (@eagleview)


    7 years, 1 month ago

    Hi,

    I have just upgraded to woocommerce 3.3.0
    The product images in the shop home page now do not display evenly – the image display is different heights, different lengths, different spacing.
    The existing default css that manages the images display appears to be:
    .woocommerce ul.products li.product a img {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 0 1em;
    box-shadow: none;
    border: #50ce61 1px solid;
    }
    I am not sure what 3.3.0 has done to affect the images display, but would appreciate any assistance to resolve this item.
    Thank you ??

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Caleb Burks

    (@icaleb)

    Automattic Happiness Engineer

    Go to the Appearance > Customize > WooCommerce tab and make sure the image settings are configured to your liking.

    Thread Starter eagleview

    (@eagleview)

    Hi Caleb,
    Thank you for your assistance!
    I have made adjustments but do not seem to be able to resolve the padding between product images in the second row i.e. the first and second images on the second row have no space between them.
    I would appreciate any ideas on how to resolve this?
    Thank you.
    Tim ??

    Plugin Contributor Gerhard Potgieter

    (@kloon)

    You have a line somewhere in your theme’s stylesheet that is causing this.

    
.woocommerce .upsells.products ul li.product:nth-child(4), .woocommerce-page ul.products li.product:nth-child(4) {
    margin-right: 0;
}

    You need to remove the .woocommerce-page ul.products li.product:nth-child(4) part otherwise it will take effect on all product images that are displayed 4th.

    Thread Starter eagleview

    (@eagleview)

    Hi Gerhard,

    Thank you for your expertise. I forwarded your comments to Themeisle. Below is their response:

    Hi Tim,
    Thank you for contacting us! The latest WooCommerce version added some new options, like the option to select the number of products per row on the shop page https://prnt.sc/i85n6n .And the default value for that is 3. Zerif Lite was designed for a number of 4 products per row, and at this moment the code we added for that, makes it not look the best with 3 products per row. But we’ll work on fixing this compatibility issue in the next days. Until then, the best solution would be to try to select the 4 products per row option, to be sure everything looks ok on all devices.
    And I’ll let you know when everything is ready for every option in WooCommerce.
    Thank you for understanding.

    ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘woocommerce 3.3.0’ is closed to new replies.