Return to previous page

Products of different types (simple and variable) do not have the same height.

This topic has 10 replies, 3 voices, and was last updated 8 months, 2 weeks ago ago by Rose Tyler

Liva

Participant

August 11, 2023 at 15:36

Hi,

I have different types of products to be shown on both home page and shop page. The problem is that these products are not staying at the same level. I am adding a screenshot to show the problem. Is there any way to solve this issue? Thanks in advance for your efforts.

Screenshot: https://prnt.sc/fjq3xD0eGCMl

#364354 Copied Theme version: 9.1.13 WooCommerce version: 8.0.1

9 Answers

Rose Tyler

Support staff

August 11, 2023 at 15:51

Hello, Liva,

Thank you for getting in touch with us.

Your site is under maintenance mode, so we can’t check it without access.
Could you provide temporary wp-admin access?

Kind Regards,
8theme team

Please contact administrator
for this information.

#364356 Copied

Liva

Participant

August 11, 2023 at 16:56

Sure, you can see the info below.

Please contact administrator
for this information.

#364358 Copied

Tony Rodriguez

Support staff

August 12, 2023 at 05:53

Hello, @Liva,

Thank you for the login details. We are pleased to inform you that the issue you reported has been successfully resolved. We kindly request you to revisit your site after clearing your browser cache.

we have successfully added Custom CSS code in the following location: XStore > Theme Options > Theme Custom CSS > Global CSS. This action has effectively resolved the issue you were experiencing.

Please refer to the image provided at the following link for further reference in the private content area.

If you have any additional questions or concerns, please do not hesitate to reach out to us. Our support team is always available to assist you.

Kind Regards,
8theme team.

Please contact administrator
for this information.

#364372 Copied

Liva

Participant

August 12, 2023 at 09:10

Hi, thanks for the solution but this solution has led to another issue. Now, the product names and images are not on the same level (please see the screenshot 1 in the private content area). Is there a solution method that puts all related elements on the same level. In other words, names should be on the same level, variation swatches and the prices should be on the same level, and finally add to cart buttons should be on the same level.

One possible way that comes to my mind is to adjust the height of the vertical space between the name, the price, and the add to cart button. Is it possible to apply this solution?

Also, I have another issue with variable products having only one variation. For this product group, it shows both the price and the variation swatch (please see the screenshot 2 in the private content area). Is there a way to eliminate the price and to show only the variation swatch? Also, the “From:” text in the variation swatch is unnecessary. So, it will be perfect if we remove it and only write the price.
If we can apply this, I can convert the simple products to variable products with one variation and all of them will be on the same level, which will automatically solve my first problem.

Thanks in advance for your efforts.

Please contact administrator
for this information.

#364374 Copied

Rose Tyler

Support staff

August 14, 2023 at 08:00

Hello, @Liva,

Thank you for your response.

We’ve changed the code to https://prnt.sc/BQOYAKlD-OTK , please check now.

Kind Regards,
8theme team

#364451 Copied

Liva

Participant

August 15, 2023 at 08:15

Hi,

I think we are having a miscommunication about the problem. In the screenshot https://prnt.sc/NK-raA1h_Xh1, you can see the problem as the names are not on the same level. But, this is not the view I desired.
You can see the problematic points of the current situation below:
1. The names of the products should be on the same level.
2. Price of simple products and the variation swatch of variable products should be on the same level. (it is already done thanks to your solution)
3. Add to cart buttons should be on the same level. (it is already done thanks to your solution)

I’d appreciate if you can solve my problem fulfilling all of the points. Thanks in advance for your efforts. Have a great day!

#364569 Copied
Rose Tyler

Support staff

August 15, 2023 at 09:37
Hello, Liva,

Thank you for your response.

We added the next code https://prnt.sc/BQOYAKlD-OTK the result is – https://prnt.sc/gSlPaXu0soT0 , but now we do not see this part of the code in Theme Custom CSS – https://prnt.sc/4zEwyK-bufT6
Have you deleted it?

Please add this code:
```
.content-product .price {
    display: none;
}
```
or
```
.hide-product-price .et-content-inner>.price, .hide-product-price .product-details>.price {
    display: block;
}
```
and check results in both cases.

Kind Regards,
8theme team
#364582 Copied
Liva

Participant

August 16, 2023 at 09:41

Hi,

I really appreciate your efforts. Unfortunately, the final CSS is not working properly. I didn’t change the code you write; but, this is how I see the products: https://prnt.sc/oaBwU1RQJqm3, which is not similar to the screenshot you sent in the last reply.

I created an image using Photoshop to show you how it is supposed to be. Please see the image here: https://prnt.sc/fLE3C08PcMAQ

Your screenshot looked quite similar to the one I want but the website does not look like the screenshot. I’d really appreciate if you could apply CSS and the settings to achieve the view of my screenshot: https://prnt.sc/fLE3C08PcMAQ

I am looking forward to hearing from you soon. Thanks for your efforts.

#364695 Copied

Rose Tyler

Support staff

August 16, 2023 at 14:44

Hello, Liva,

We have attempted various methods, but we are unable to find a universal solution due to the diverse types of products and content displayed on your site (the positions of prices/buttons are constantly different). At present, achieving the result you described is not possible through a simple method. You may consider reaching out to an additional customization service https://www.codeable.io/?ref=qGTdX or adjust all products to a roughly similar type.

Kind Regards,
8theme team

#364715 Copied
Tagged: best selling themes, height adjustment, product display, simple products, variable products, woocommerce themes
Viewing 10 results - 1 through 10 (of 10 total)

The issue related to '‘Products of different types (simple and variable) do not have the same height.’' has been successfully resolved, and the topic is now closed for further responses

Products of different types (simple and variable) do not have the same height.

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection