Product grids, images sizes and Add to Cart button

[kenny-6412]

Guys.
I have normal product grid on main shop page and it works well with product options.

When I try to have same effect on ‘Best Sellers’ & ‘Promotion grid’ I get differing image sizes and add to cart problem.
Most our product have option (2 sizes) and a few with 3-4 options.

Q1. If I get different images sizes is this a setting I have set incorrectly OR size of original image?
Best Sellers widget is an example ?

The Popular grid suffers from when selecting options the the ‘add cart’ button slips away.
See HOME page ‘Most popular’ .

If you can check our site any advice is gratefully received.
Kenny.

• This topic was modified 1 week, 6 days ago by kenny-6412.

Added link to site.

Hello,

Thank you for contacting WoodMart Support. We’ll be happy to assist you with your request.

Before we continue, we have one quick question for you:

Where did you first hear about WoodMart?

We really appreciate your help with this. It takes just one click, but your answer is extremely valuable to us and helps us understand how customers discover WoodMart:
https://tally.so/r/rj8qWl

Now, let’s get back to your request.

Unfortunately, I am unable to visit your site at the moment due to WooCommerce maintenance mode. Please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards

hello.
I thought the URL in private would work I assume not.
I have removed maintenance mode so site should be visible.
Kenny.

Hello,

01. Navigate to Pages > Edit home page with elementor > Edit Products Grid or Carousel Widget and in the style tab open the products design settings and change the image size to https://postimg.cc/PNWM0RZv

02. Regarding the Add to Cart button, this is expected because after selecting the product options, the variation information and Add to Cart button require additional vertical space in the Quick Shop area. Therefore, on some products, you need to scroll slightly to see the button.

You can try this code in Theme Settings > Custom CSS:

.quick-shop-wrapper .quick-shop-form {
    padding-top: 20px;
    padding-bottom: 10px;
}

.quick-shop-wrapper .woocommerce-variation > div {
    margin-bottom: 5px;
}

Best Regards

Thank you for advice.
My Best Sellers now works because I amended image to Thumbnail.

The Popular products did not work. Having customers to scroll to button is just not good. I have now made my section very small images to avoid options being added to cart on quick view. I played about with the CSS padding & margins and there is not enough room for ‘add to cart’ button to remain fully shown and ‘close’ button to position ok.

I have aslo inserted a blank ‘Bordered Products grid’ so you can see how it looks with suggested CSS. I had to add “!important” to override normal.

Q. If you can find a solution for the Test Products section then please do. Would be nice to have!
(can give you admin if needed BUT If it cannot be solved as style is bad then I shall leave it with small images).
Kenny.

[kenny-6412]

Hi.
I have tested my product template and decided to drop 5 products per row to 4. That makes images larger so room for Add to Cart button to show when vertical size moves.

I think a lot of your inbuilt templates for products need revisit for design.
If products with options can be added to cart from quick view there must be extra room for the Add button espcially if images are not large.
Thanks for help.
Kenny..

• This reply was modified 6 days, 21 hours ago by kenny-6412.

Hello,

I have checked the Popular Products section and found that the layout is working as expected.

For the test section, the left sidebar is occupied by a banner, while the products are displayed in the remaining space on the right. Because the available width for the product grid is reduced, the product items become narrower, which also limits the available vertical space in the Quick Shop when product options are selected.

When you reduce the number of products per row, each grid item becomes wider and provides more space for the product information, variation options, and Add to Cart button. This is why the layout displays correctly when using fewer products per row.

Therefore, I recommend keeping 4 products per row for this particular section, as it provides sufficient space for the variable products and allows it to remain properly visible.

Best Regards

Thanks. I shall go with bigger images on the product template grids. That solves the vertical space problems
I’m unsure how to close this Ticket but it can be closed now. Kenny.

Hello,

You’re Most Welcome!

Thanks for your understanding.

If you have a minute, we’d truly appreciate your feedback — it helps us improve the product and shape future updates more effectively. We’d love your feedback on our theme: https://www.trustpilot.com/review/xtemos.com

Thanks for contacting us.
Have a great day.

Topic Closed.
Best Regards.

[Author]

Posts