Return to previous page

Products aligning issue in woocommerce products view

This topic has 16 replies, 2 voices, and was last updated 3 months, 2 weeks ago ago by Luca Rossi

zaid

Participant

July 30, 2024 at 08:19

Products aligning issue in woocommerce products view

Please, contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#407750 Copied Theme version: 9.3.16

15 Answers

zaid

Participant

July 30, 2024 at 09:45

empty space within categories

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#407771 Copied
Luca Rossi

Support staff

July 30, 2024 at 10:26
Hi @zaid,

The custom CSS code is only a good solution for now.

Here is the simple CSS code for you:
```
.content-product .product-content-image img,
.category-grid img{
    object-fit: cover; /* Ensures the image covers the container, cropping if necessary */
    aspect-ratio: 1 / 1; /* Forces a 1:1 aspect ratio */
    width: 100%; /* Makes sure the width is 100% of the container */
    height: auto; /* Resets the height to auto to maintain aspect ratio */

    max-height: 190px;
}
```
For the spacing issue on categories archive, please add this:
```
.row.products.products-loop.products-grid .ajax-content.clearfix {
    display: flex;
    flex-wrap: wrap;
}
```
Hope it helps!
#407790 Copied
zaid

Participant

July 30, 2024 at 10:36

loading new products issue

Please contact administrator
for this information.

Files is visible for topic creator and
support staff only.

#407794 Copied
Luca Rossi

Support staff

July 30, 2024 at 10:56
Hi @zaid,

For the messed up issue of products, please try adding this custom CSS:
```
@media only screen and (max-width: 767px) {
    .products-grid .product {
        position: static !important;
    }
}
```
Hope it helps!
#407799 Copied
zaid

Participant

July 30, 2024 at 11:28

almost done ……

Please contact administrator
for this information.

#407812 Copied

Luca Rossi

Support staff

July 30, 2024 at 13:25

Hi @zaid,

We’ve disabled the Mansonry setting of Shop page under XStore > Theme Options > WooCommerce(Shop) > Shop Page Layout: https://prnt.sc/EYXC_wKFVqCB.

Could you please check again?

Thank you!

#407853 Copied

zaid

Participant

August 3, 2024 at 16:30

hello, so far working with no issue, i wanna ask if you can provide me a custom css to change the mobile panel radius

i tried this with no chance
/* Change the border radius of mobile panel elements */
.mobile-panel-element-class {
border-radius: 20px; /* Adjust the value as needed */
}

#408652 Copied

zaid

Participant

August 3, 2024 at 17:21

I also would like to know how to change the style of searching ? currently when the search icon clicked then the searchbar locates down, i need to choose different style such as up and without transparency background

Files is visible for topic creator and
support staff only.

#408654 Copied

zaid

Participant

August 3, 2024 at 17:55

im editing this in elementor but as you can see they are not aligned well due to title occuping different lines everytime, im trying to force the title to take up exactly 3 lines regardless of the actual text length so that they all align correctly and clean. can you please provide me the custom css for that

Files is visible for topic creator and
support staff only.

#408656 Copied
Luca Rossi

Support staff

August 5, 2024 at 09:38
Hi @zaid,

hello, so far working with no issue, i wanna ask if you can provide me a custom css to change the mobile panel radius

Please try with this custom CSS codes instead:
```
.et-mobile-panel-wrapper {
    border-radius: 20px !important;
    overflow: hidden;
}
```
https://prnt.sc/sKPhGufi3t95

I also would like to know how to change the style of searching ? currently when the search icon clicked then the searchbar locates down, i need to choose different style such as up and without transparency background

What you mean down? The searchbar is showing above the mobile panel: https://prnt.sc/bUd8djAJ5VK4

im editing this in elementor but as you can see they are not aligned well due to title occuping different lines everytime, im trying to force the title to take up exactly 3 lines regardless of the actual text length so that they all align correctly and clean. can you please provide me the custom css for that

Please try adding this custom CSS code:
```
@media (max-width: 480px){
    .etheme-product-grid-categories {
        min-height: 35px;
    }
    .etheme-product-grid-title {
        min-height: 51px;
    }
}
```
https://prnt.sc/s97hNuS9wGP3

Hope it helps!
#408810 Copied
zaid

Participant

August 5, 2024 at 12:14

thanks, all the custom css got the job done and I appreciate your efforts.

regarding the search bar :
I also would like to know how to change the style of searching ? currently when the search icon clicked then the searchbar locates down, i need to choose different style such as up and without transparency background

What you mean down? The searchbar is showing above the mobile panel: https://prnt.sc/bUd8djAJ5VK4

i will clarify that when I click search, then a searchbar pops up in the bottom on the screen and the background gets a bit white dull,
I just need to change the bachground to be blurred to some level i can adjust later, so that the viewer will focus on the searchbar and its results.

#408834 Copied
Luca Rossi

Support staff

August 6, 2024 at 04:48
Hi @zaid,

Please also add this custom CSS code:
```
.et-mobile-panel .et_b_mobile-panel-search .et-mini-content {
    background-color: #fff;
}
```
The result: https://prnt.sc/ehZxDGVMGyY2

Hope it helps!
#408894 Copied
zaid

Participant

August 6, 2024 at 10:27

hello,
@media (max-width: 480px){
.etheme-product-grid-categories {
min-height: 35px;
}
.etheme-product-grid-title {
min-height: 51px;
}
}

a quick update for this , it is actually just working on mobile interface , i tried to get to work for the pc webpage without any luck, could you please include the pc too

#408951 Copied

zaid

Participant

August 6, 2024 at 10:33

.et-mobile-panel .et_b_mobile-panel-search .et-mini-content {
background-color: #fff;
}

i got it to work with more attractive background this way with this new code. thanks for your help 🙂

.et-mobile-panel .et_b_mobile-panel-search .et-mini-content {
background-color: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);

#408958 Copied

Luca Rossi

Support staff

August 6, 2024 at 10:50

Hi @zaid,

In the spirit of gratitude, we want to express our appreciation for your trust in our products. As a valued customer, your experience matters greatly. Would you consider sharing it by giving our theme a deserving 5-star rating on ThemeForest?

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

Being part of our community means a lot, and your feedback contributes immensely.

Best Regards,
The 8Theme Team

#408993 Copied
Tagged: best selling woocommerce, fix woocommerce issues, improve woocommerce layout, products aligning issue, woocommerce products view, woocommerce themes
Viewing 16 results - 1 through 16 (of 16 total)

The issue related to '‘Products aligning issue in woocommerce products view’' has been successfully resolved, and the topic is now closed for further responses

Products aligning issue in woocommerce products view

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection