Return to previous page

How to align the variations of different products in product category page

This topic has 6 replies, 3 voices, and was last updated 2 months, 1 weeks ago ago by Andrew Mitchell

Ve01

Participant

August 16, 2024 at 14:47

Hi

In the product category page , I use the variation swatches.
I want to align the variations of different products.
Now I use the title align CSS in the elementor as below, but it doesn’t work.
`/* Media Query for mobiles */
@media (min-width: 320px) and (max-width: 767px) {
h2.woocommerce-loop-product__title {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height:70px
}
}

Please find the details in attachment.

Thank you

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#410473 Copied Theme version: 9.3.17

5 Answers
Luca Rossi

Support staff

August 17, 2024 at 10:35
Hi @vera,

Please try adding this custom CSS under XStore > Theme Options > Theme Custom CSS > Global CSS:
```
@media (max-width: 600px){
    .st-swatch-in-loop {
        min-height: 73px;
    }
}
```
Hope it helps!
#410527 Copied
Ve01

Participant

August 17, 2024 at 11:59

Hi

Thanks for your response and sharing the CSS code.
The code dosen’t work and the variation swatches still can’t be aligned.

Please contact administrator
for this information.

#410536 Copied

Luca Rossi

Support staff

August 17, 2024 at 18:31

Hi @vera,

This is how it looks on our end: https://www.awesomescreenshot.com/image/50089946?key=33d64245279408e2ec8476dda6f091a3.

Did you also clear the caches?

Best Regards,
The 8Theme Team.

#410559 Copied

Ve01

Participant

August 17, 2024 at 19:24

Hi

I cleared the cathces and now it displays correctly.

Thanks for your help !

#410560 Copied

Andrew Mitchell

Support staff

August 17, 2024 at 19:24

Dear vera,

As we continue our mission to exceed expectations, your insights become increasingly valuable. Could we, with all due respect, request your thoughtful feedback by giving our theme a deserved 5-star rating on ThemeForest?

Click here to share your valuable perspective: https://themeforest.net/downloads

Your time and trust are highly appreciated!

Best Regards,
The 8Theme Team

#410561 Copied
Tagged: align variations woocommerce, product category page, product variation alignment, product variation tips, woocommerce templates, wordpress woocommerce
Viewing 6 results - 1 through 6 (of 6 total)

The issue related to '‘How to align the variations of different products in product category page’' has been successfully resolved, and the topic is now closed for further responses

How to align the variations of different products in product category page

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection