Different Grid sizes

Hello,

please check the URL attached to privat content section.
You will see the add to cart button it not in same position at all.
Check also attached screenshot.

In other themes the equal height option will make all buttons in same position, no matter if there is a single line title and in other column of product grid there is a two line title and if one column contains a review or the other one not.

They solve that equal height option by using this logic:
The add to cart position follows the button which have the lowest position. All other buttons für add to cart will follow this line. Like my red line in screenshot.

Do you have a idea how to fix it?
And do you have plans to improve that flow of equal height in your theme soon?
Also some free elementor themes doing this job better. Now we using your great woodmart theme which is paid but stuck in “ugly” stair effect in grid.

We give you permission to disabe all plugins. We already disabled all plugins, this doe not help.

BR
Tommy

Hello,

First, please disable the Masonry grid option in Theme Settings – https://prnt.sc/QrzpuR8zoauo, then check how it works and let me know.

Kind Regards

[thomas-8605]

Product Archive -> Products Grid -> Masonry grid is set to OFF and still not working.
And “Even product grid for desktop” is already enabled.

Result here:
https://cleanie.at/kategorie/arbeitsschutz/ -> working fine.

But if a product show more elements (like first product have and show an SKU and the second product in grid do not have and do not show SKU) it will ends again in different positions.

Why other themes can handle “same position” for add to cart so much better and yours ends in messy looking product grif if one element is in first product present and in second not?!

Look here please:
https://cleanie.at/kategorie/abfall/

BR
Tommy

• This reply was modified 1 month ago by thomas-8605.
• This reply was modified 1 month ago by thomas-8605.

Hello,

Our “Even product grid for desktop” option is designed to align product elements on the product grid as evenly as possible. However, it does not use any JavaScript scripts for “automatic calculations,” as such scripts would significantly degrade site performance and lower the overall Google Page Speed score.
Since this option does not rely on scripts, it cannot account for all possible combinations, especially considering external plugins and the fact that our theme includes 11 different product grid designs.
The “Even product grid for desktop” feature works by adding a margin-top to one of the product design elements, so all lower content aligns at the bottom of the row. The specific element that receives the margin depends on the chosen product design. For the “Full width button” design, the margin is applied to the price (see video: https://monosnap.com/file/M66bHuUvbY7RJFI2Rjqlmn5lNNblCD), pushing the price, button, and SKU to the bottom of the row.
Since the plugin adds its content after the add to cart button and the height of this content varies across products, the button’s position becomes inconsistent. To resolve this, we suggest the following:

1. If using SKUs, ensure they are added for all products.

2. Add the following custom code to the Global Custom CSS area in Theme Settings to move the plugin’s content above the “Add to Cart” button and ensure the SKU and button always remain aligned, regardless of the plugin’s content height:

.wd-hover-fw-button .wd-add-btn,
.wd-hover-fw-button .wd-product-sku {
	order: 1;
}

Kind Regards

[Author]

Posts