[Resolved] WooCommerce elements not working

[Author]

Posts

[maiS]

I am trying to:
Hi there,
I am creating a homepage using Glutenberg Editor and the Toolset builder. I added some WooCommerce blocks from the options. I added
"Newest products" and "best rated products". Even though my row is set to full width and it is working, the products are not showing properly. See attached screenshots. I tried different number of columns and products but nothing works.

Can you please help? Thanks.

[maiS]

In the backend it looks nice though - see screenshot

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Hello and thank you for contacting the Toolset support.

I will need to know more about your website before being able to help. Can you please paste your Toolset Debug information in the Debug information field?
- https://toolset.com/faq/provide-debug-information-faster-support/

Can you also share a URL where I can see this issue?

If I can access your admin area, it will help me to understand the issue fastly. Your next reply will be private to let you share credentials safely. ** Make a database backup before sharing credentials. **

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

Hello and my apologies for the late reply, I do not work on Mondays.

I also confirm that the credentials are working for me. But, I'll need your help to understand the issue. I assume you are talking about this page hidden link
Correct me if I am wrong.
Right now, I am not sure which editor you are using, blocks or WPBakery?

Can you provide the URL where we can see the issue?
Can you explain which Toolset Elements are involved in the issue and how?

[maiS]

Hi,
yes, that is the page. I am using the WordPress Glutenberg Editor together with Toolset.

You can just look at the URL you pasted in yourself, where you see the visual display of the 2 products sections aren't working.

hidden link

If you look at the page in the backend, you'll see a perfect result, but in the front end it looks like when you press the URL now - please see the attached screenshots from earlier. I also added 2 new screenshots here.

I am using a Toolset container. Within the container I use the WooCommerce block "Newest products". If you scroll down it's the same setup but this time in the Toolset Container I use the WooCommerce "Best rated" products.

I set the WooCommerce blocks to show 4 products including title, price and "add to cart" button. I set the Toolset row/container block to be full width. But on the frontend the products are not showing correctly and it looks like there's not enough space. This happens wether I chose 2-3-4- or 5 products to be shown.

[Jamal Supporter Languages: English (English ) French (Français ) Timezone: Africa/Casablanca (GMT+00:00)]

It seems that the theme is adding a style that makes the image take the whole width of the screen(100% vw: Viewport Width). Check this screenshot hidden link
Check this article hidden link

I'll suggest to try on a default theme(Storefront) and adapt your theme CSS to Gutenberg usage.

Please consider that this is not an issue caused by Toolset, hence out of the scope of this support forum. You may try general support forums such as StackOverflow or you may contact the theme support.