Okay
  Public Ticket #2787992
WooCommerce products
Closed

Comments

  •  3
    Greg started the conversation
    May 27, 2021 at 1:09pm

    Hi!

    I've an issue when using the "WooCommerce products" element.

    When the screen resolution is under 1000px (ie. on mobile), displayed products are not correctly displayed. (see screenshot 1).

    Tahir already sent me previously a CSS patch, but this is creating an other display bug (see screenshot 2)

    I tried on a whole new wordpress setup, the problem is here too.

    Could you fix this please?

    Best regards,

    Greg


    Here's the CSS patch sent previously:

    @media only screen and (min-width: 1px) and (max-width: 999px) {     .woocommerce.columns-3 ul.products.columns-3 li.classic:nth-child(3n+3) {         margin-right: 4% !important;     } } .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product h3, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h2, .woocommerce-page ul.products li.product h2 {     line-height: 1.2em; }

  •  8,847
    Tahir replied
    May 27, 2021 at 1:47pm

    Hey Again,

    I can't seem to recreate the issue in the screenshot on my end in chrome: 

    7150544058.pngClick To Open Larger Image

    Thanks 

    ThemeNectar Support Team 

  •  3
    Greg replied
    May 27, 2021 at 1:54pm

    It seems ok on mobile since I just set the number of column to "dynamic" instead of 3, but it still broken on the deskptop version under 1000px.

  •  8,847
    Tahir replied
    May 27, 2021 at 1:56pm
    9563418183.pngClick To Open Larger Image.

    Thanks

    ThemeNectar Support Team 

  •  3
    Greg replied
    May 27, 2021 at 6:47pm

    Sorry, my bad, I actually still had a tab on the french version of the website (WPML translated page: https://galeriejais.com/?lang=fr ).

    My customer would like to keep only 3 columns as agreed on the project design. We want to display only 6 featured products, here we have a first line with 4 products, and a second one with 2...
    Is there a way to make this element work normally, without a CSS patch that work in a single specific setup only?

    Thanks

  •  8,847
    Tahir replied
    May 28, 2021 at 1:04pm

    Hey Again,

    Please remove all Custom CSS and adjust these settings to check:  

    1409046891.pngClick To Open Larger Image.

    Thanks 

    ThemeNectar Support Team 

  •  3
    Greg replied
    June 6, 2021 at 7:25am

    Hi!

    Unfortunately, I still have a display bug.
    I've created a new test page with just this element, removed all custom CSS and setup all archive page columns to "default"

    https://galeriejais.com/test/

    On the second line, there's no spacing between the two prodcuts.
    The bug is the same on desktop under 1000px and on a random mobile I just picked up to try.


  •  3
    Greg replied
    June 6, 2021 at 7:26am

    Here's a screenshot

  •  1,878
    Judith replied
    June 6, 2021 at 12:13pm

    Hi Greg,

    Please try this css:

    @media only screen and (max-width: 999px) and (min-width: 1px){
.woocommerce .span_9 ul.products li.product:nth-child(2n+2), .woocommerce-page .span_9 ul.products li.product:nth-child(2n+2), body .woocommerce ul.products li.product:nth-child(2n+2), body .woocommerce-page ul.products li.product:nth-child(2n+2), body.woocommerce ul.products li:nth-child(2n+2), body.woocommerce .main-content > .row > ul.products[data-n-tablet-columns="default"][data-n-phone-columns="default"][data-product-style="text_on_hover"] li:nth-child(2n+2), body.woocommerce .main-content > .row > ul.products[data-n-tablet-columns="default"][data-n-phone-columns="default"][data-product-style="classic"] li:nth-child(2n+2) {
    padding: 0px 0px 0px 28px;
}
}
@media only screen and (max-width: 999px) and (min-width: 1px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product, .woocommerce ul.products[class*=columns-] li.product, .woocommerce .related ul.products li.product, .woocommerce .related ul li.product, .woocommerce .upsells.products ul.products li.product, .woocommerce .upsells.products ul li.product, .woocommerce-page .related ul.products li.product, .woocommerce-page .related ul li.product, .woocommerce-page .upsells.products ul.products li.product, .woocommerce-page .upsells.products ul li.product, body.woocommerce .span_9 ul.products li.product, body.woocommerce-page .span_9 ul.products li.product, body .woocommerce ul.products li.product, body .woocommerce-page ul.products li.product, .woocommerce .products.related .product, .woocommerce .products.upsells .product, .woocommerce-page.columns-3 ul.products li.product, .woocommerce.columns-3 ul.products li.product {      margin: 0px 16px 26px 0px;    padding: 0 16px 0px 20px;
}
}

    Thanks.

  •  3
    Greg replied
    June 6, 2021 at 5:40pm

    Thank you.

    I added the CSS but unfortunately it don't work on mobile as you can see on attached screenshot.

    (One column and not aligned)

  •  1,878
    Judith replied
    June 6, 2021 at 6:37pm

    Hi There,

    Please send in your admin login credentials so that we may look into this further.

    Thanks.

  •   Greg replied privately
  •  8,847
    Tahir replied
    June 8, 2021 at 7:48am

    Hey Again,

    Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets. 

    I can't seem to recreate the issue on my end in Chrome and on my Android Mobile. Are you still able to see the issue on the Test Page: https://galeriejais.com/test/ ?. 

    If yes, please provide the Screen Resolution and which Browser you are testing in?. 

    Also try using the Mobile Emulator instead of changing the browser window as it does not give accurate results.

    Thanks

    ThemeNectar Support Team 

  •  3
    Greg replied
    June 8, 2021 at 9:35am

    Hi Tahir,

    Yes, actually it's still effecetive on every single device on wich I'm testing :

    Chrome desktop (91.0.4472.77) W10  1920*1080

    Chrome mobile (91.0.4472.88) Android 11 on a Pixel 3a

    I tried yesterday on two random mobile who never been on the website before, it was 1)Honor Play on Chrome and 2)iPhone XR on Safari

    I created this new page to be sure there is no specific settings on it and the custom CSS is currently removed.

  •  8,847
    Tahir replied
    June 8, 2021 at 9:57am

    Thanks for the additional information. Escalating this to the developer for further response.


    ThemeNectar Support Team 

  •  3
    Greg replied
    June 8, 2021 at 9:58am

    Thanks Tahir
    Have a great day!

  •  1,071
    ThemeNectar replied
    June 9, 2021 at 2:06am

    Hey Gregsmile.png

    I've just added in a snippet which should correct it - can you try testing agin from your end to confirm? The snippet for reference is listed below:

    @media only screen and (max-width: 999px) {
  .vc_column-inner .wpb_wrapper .woocommerce.columns-3 ul.products > li:nth-child(2n+1) {
      margin-right: 3.3%;
  }
}
    Kind regards,
  •  3
    Greg replied
    June 10, 2021 at 5:30am

    Hi guys,

    Seems to be good now.

    Thank you and have a great day!

    Greg