Woodmart – category grid layout layout issue

Dear Woodmart support

I have stuck with the featured category grid layout on the frontend page.
You can find it right under the big slider.

We try to achieve similar to the demo site frontpage. (attached images) My concern: how to set the measurements properly to not to be collapsed/shrinked at the end? (but maintaining the proper given image sizes. I have uploaded the desired size of images (586, 283px just as on demo site).
Now trying to eliminate settings that makes this shrink and brake.

Thank you,
Wiktor Boritas

Attachments:

You must be logged in to view attached files.

Going further, i try to narrow down this problem: now i identified that the problem is (partly) that the Woo Product Categories – module/element in WP Bakery sets its css as col-md-4 (above 769px screen width), that shrinks it on desktop.

flex: 0 0 33.333333%;
max-width: 33.333333%;

Is there a way to overwrite this setting(s) natively by Woodmart theme settings?
Or what is your suggestion?
Also more detailed info on how is this block exactly made in the demo site, would be much apprecited. >>> https://woodmart.xtemos.com/

Cheers,
Wiktor

Hello,

Thank you very much for choosing our theme and for contacting us.

If you mean the Masonry grid for Product categories, the width of an element depends on the image size. You will have to take time and try different image sizes to configure the grid you want.

If you do not mean the Masonry grid, the width of the image would depend on the number of items in the row.

If you want to repeat the grid, check the image sizes used and replicate the same with Masonry grid (with first wide)

Best Regards

Hi Elise,

Well, i can’t see or access the ‘Masonry grid for Product categories’ element. Is that maybe a more recent WP Bakery element? (We have version 5.4.5 now..)
I tried to recreate the demo site category grid example by using ‘Woo Product Categories’ elements, one by one, (so 5 in a block)
This is sort of works, but with problems, for example i can’t find, where to adjust the spacing between these category elements. More precisely i’m searching for exactly what is outputting this class “woodmart-spacing-20” (in /wp-content/themes/woodmart/style.min.css?ver=4.6.0 ? That causes the spacing that tweaks the layout. (please see this effect in the screenshots attached).

Question 2:
How did you managed to have a proper resolution on the bigger square image (the ‘Furniture’ featured category in the masonry grid). Thats a 860px img, while the small ones are 430px as i see. (https://woodmart.xtemos.com/) How can you make these differing from each other?
This ‘Masonry grid for Product’ does handle it?
These Woo Product Categories what i am using now, are grabbing the 300×300 px product category thumbnails., so it complicates it, because i should set that prod category thumbnal a bigger size, but it’s not worth to do so just for these 1-2 bigger square pictures on the front page (global site load-speed wise). So i’m searching for proper solution to avoid this step but still having nice featured categories block on the front page.

Thank you!
Wiktor

Attachments:

You must be logged in to view attached files.

Hello,

Here is how you add a Product category element https://gyazo.com/88ae782bc07ad858b7a7523fed17465a

Set the Masonry Grid layout https://prnt.sc/snuzi4

Then check the image size on the demo, and upload yours in the same size.

Best Regards

Hi Elisa,

Thanks, firstly, i have no “Theme Elements” tab in WPBakery. Any idea, how can i apply it?
Thank you!
Wiktor

Hello,

Please make sure you have installed and activated all the plugins in Appearance > Install plugins.

Please provide site admin access to the private area.

Best Regards

Hello,

I updated everything to latest versions, now found the PRoduct Cat.. WPBakery element., and set the same settings as on your screenshot. Images are the same height still. The “wide” image html witdth output is still “300”. Any ideas?
Thank you,

Hello,

Please provide the site admin access to the private area as well as the product page URL.

Best Regards

Hi,

Update, the 300px problem solved, —> after i updated from old version WPBakery, i needed to re save the specific page and then it outputted the element correctly..

My question is: how is it possible to make this ‘Product Categories’ masonry grid (wide first) make to be “wide last” ? as on the demo frontpage?
Cheers,
Wiktor

Hello,

Use the same image sizes but in the revert order: the first four categories should have small images and the last category big one.

Best Regards

HEllo,

I’m trying. Yet it still scales up the first image. Shall i leave all settings the same (Masonry with first wide)?
Or what else to change?
Extra info: now in product image setting its set to non-crop (and image height is 430).
Cheers,
Wiktor

Hello,

Some of our demos used the Promo banner element link to a category. You need to create the grid using rows and columns, and insert the banners, lin the banners.

Best Regards

Hi ELise,

So you mean, you built the “Right picture wide” variation of that featured category grid by this (promo banner) way? So the same look but 2 completely different approach and elements used? Oh my god.
In case if this is true, this means, it’s really not possible to do simply by using the same ‘Product Categories’ element with minor tweaks?
Other question arise then: is it possible/difficult to develop the ‘right side image wide’ version for this element?

I’m trying the Promo Banner element now, trying to reproduce the Product Category grid layout, but yet have troubles with padding and proper spacing of the smaller squares beside the big one. Can you please help me to give the ‘recipe’ for it too?
Tho it seems to be a non-dynamic approach, so if we change anything with a category later, it need to be adjusted manually in these grids, am i right?

Thank you,
Wiktor

Hello,

You need to create the grid with rows and columns like this: https://prnt.sc/srrszi make as per your needs using inner row https://wpbakery.com/video-academy/insert-inner-row-wpbakery-page-builder-wordpress/?v=9025a1ae8c64

Then insert the Promo banners and link them to the categories accordingly. Yes, this is not a dynamic way.

The dynamic way is the Product category element.

Best Regards

Hello,

Im getting closer bu following your steps. Now only 1 step i can’t figure: how to make the small squares to have equal spacings vertically as well? Please see the “Promo Banners in separate columns” titled section here: http://kilincstar-hu.teszt.elin.hu/

cheers,
Wiktor

Hello,

Make sure these four images https://prnt.sc/ssaolh are of equal size. I see they have a different gap due to the difference in size.

Best Regards

Hi ELise,

In the “Promo Banners in separate columns” block
The small square pics all set to same size inside the Promo Banner element with “image size” parameter (283×283). So that sounds to work, but still, what best solution do you recommend for setting up the proper, equal spacings for that grid? –> I want it like at the 2 PRoduct Category elements above them. There spacing works.
Thank you,
W

Hello,

Try bigger image size. You will have to try different until you achieve what you want.

Best Regards

[Author]

Posts