Also…
How do I align Buttons to Bottom of Row?
Hi @btcjon,
welcome to the forum!
You can change the image size inside of the products element fields like so:
{featured_image:shop_catalog:link}
Doing so, all images have the WooCommerce shop catalog image size (300x300 by default). Probably it’s best to think about and edit your images before you upload them to make sure that no important things get cropped (depends on the image and your preferred image size).
You can check all available image sizes easily by inserting a single image and selecting the image size dropdown. Available sizes are for example medium, thumbnail, large, woocommerce_thumbnail, woocommerce_single, shop_thumbnail, and so on.
In my example, all images have an aspect ratio of 1 (even before they were uploaded), except for the boy with the beanie, which is actually a portrait image.
Best regards,
timmse
1 Like
And for the button, there are two possibilities:
-
Add the following custom CSS to your products element under style > custom CSS:
.bricks-element-woocommerce-products .product {
justify-content: space-between;
} -
If only the button should be aligned to the bottom: Go to frontend, inspect your button (right click > inspect element) and copy the data-ID. After that, add this custom CSS to your products element under style > custom CSS:
.dynamic[data-field-id=“your-data-field-id”] {
margin-top: auto;
}
Best regards,
timmse
1 Like
Thank You!!! I really appreciate your help with this!!
The trick for the images didn’t work in my case.
But I managed to fix it with:
{featured_image:woocommerce_thumbnail:link}