Even the product grid has no effect on the carousel on the Cart page in desktop

Hello,

On the Cart page on desktop, the “Even product grid” option has no effect on the carousel layout. On phone it works.

The carousel on the homepage works on both desktop and phone.

So there is an issue with the “Even product grid” option in the carousel layout ONLY on the Cart page in desktop view.

While the page is loading, the “Add to cart” buttons appear fine, but after the page finishes loading, the “Even product grid” effect disappears.

How can this problem be solved?

Thank you!

Attachments:

You must be logged in to view attached files.

Hi berendetcm,

Thanks for reaching to us.

You are using a Custom Single Product layout, which is built with WoodMart WooCommerce builderNavigate to Layouts > edit the layout > select Products (grid or carousel) widget > Style tab > and enable Auto height option https://ibb.co/XxR5CZGN

Further, you can read more about the Layout Builder here: https://xtemos.com/docs-topic/woodmart-woocommerce-layout-builder/

Regards,

Hello Hung Pham,

I had those settings set up.
I should mention that I am using the theme in the Gutenberg blocks version.

So, I did some more research and I saw exactly what the problem is. It’s not a problem with the carousel only on the Cart page.

The problem appears with the Carousel on any page when we have this setting: Products Block > General > Data source > Recently viewed products

It should be noted that it only appears on DESKTOP view. There are no problems on the phone.
If the Data source is changed, the placement of the products in the carousel is perfect.

I also attached a video:
https://drive.google.com/file/d/1KMAXqRxeB6u2dFZ8Jt1zzvC5dYiq6BQm/view?usp=drive_link

Is there a solution to this problem?

Thank you!

Hi berendetcm,

To assist you in the best possible manner, I kindly ask that you please provide me temporary wp-admin info (wp-admin URL, username, password) to the Private Content area, this will allow me to thoroughly investigate and address your concerns more efficiently.

Best Regards,

Hello Hung Pham,

Your login details are below.

Thank you.

Hi berendetcm,

Thanks for details.

Please add below Custom CSS code to Theme Settings > Custom CSS > Desktop CSS:

.woocommerce-cart .wd-products.wd-stretch-cont-md .product-wrapper {
        height: 100%;
}

Regards,

Hello Hung Pham,

The code is good, now the buttons are aligned.
But it’s not just about the Cart page. The carousel with “Data source > Recently viewed products” does not have the buttons aligned on any page.

I saw that the problem is that for carousel with “Data source > Recently viewed products”, the class “wd-stretch-cont-MD .product-wrapper” appears and for the other sources the class that appears is “wd-stretch-cont-LG .product-wrapper” and this class already has the height: 100% setting for -Desktop view- included in the theme.

Maybe the “wd-stretch-cont-MD .product-wrapper {height: 100%}” for Desktop view setting should also be introduced in the theme.

Thanks for the help!

Hi berendetcm,

Please provide URL of the mentioned page, so I can take a closer look.

Regards.

Hello Hung Pham,

I added a carousel to the top of the About Us and Contact Us pages. This is the same as the one on the Cart page, meaning it has “Data source > Recently viewed products” and does not have the CSS setting you gave me.

1. https://blog.workstage.site/cos/
Cart page – where the carousel now has the CSS setting and the “Add to cart” buttons are aligned.

2. https://blog.workstage.site/about-us-3/
About Us page – where the carousel does not have the CSS setting and the “Add to cart” buttons are not aligned.

3. https://blog.workstage.site/contact-us/
Contact Us page – where the carousel does not have the CSS setting and the “Add to cart” buttons are not aligned.

That’s why I said it’s not a problem with the carousel only on the Cart page, but it’s a problem with the selector “wd-stretch-cont-MD .product-wrapper” which is assigned to the carousel ONLY when “Data source > Recently viewed products” and this selector does not have “height: 100%” set for desktop view.

In the case of the other Data sources there are no problems because the carousel is assigned the selector “wd-stretch-cont LG .product-wrapper” and this already has “height: 100%” set for desktop view.

Thank you.

Hi berendetcm,

First of all, I am appreciate your patience.

Please let me explain in details: Even product grid option helps you to align each container are aligned, not inside details https://ibb.co/fdymsTfW

You can try below Custom CSS:

.wd-products.wd-stretch-cont-md .product-wrapper {
        height: 100%;
}

Regards,

[berendetcm]

Hello Hung Pham,

I don’t understand what you are saying here: Even product grid option helps you to align each container are aligned

Anyway, what I mean is: why do I need a CSS code to align the “Add to Cart” buttons when displaying Recently Viewed Products and for the other sources: Sale Products, Top Rated Products, etc. I don’t need this CSS code because the buttons align perfectly just with the block settings, as is normal.

I see this as a bug of the Products block as it works for all Data Sources but for Recently Viewed Products it doesn’t work.

Thank you!

• This reply was modified 4 weeks ago by berendetcm.
• This reply was modified 4 weeks ago by berendetcm.

Hi berendetcm,

Please see recorded video for better understanding https://go.screenpal.com/watch/cTn6lsnh2hU

Regards,

Hello,

It works for me too in the edit page, show me that it works for you in the front page.

After all the discussion here, you send me this video?
It makes me think that I don’t always talk to the same person.
Otherwise I don’t understand how after so many discussions and videos sent by me, you give me this. Unbelievable!

Look at this video and do the same! Send me a video with the front page too. Not just edit page!
https://drive.google.com/file/d/1ZR77ZDHC865Z3u45kX37QXI44AC-SXtC/view?usp=sharing

Hi berendetcm,

You didn’t add Custom CSS I provided above https://xtemos.com/forums/topic/even-the-product-grid-has-no-effect-on-the-carousel-on-the-cart-page-in-desktop/#post-636721

Please try to add it and double check.

Regards,

[Author]

Posts