Return to previous page

Is there a way to line up shop page elements

This topic has 8 replies, 2 voices, and was last updated 6 days, 5 hours ago ago by Rose Tyler

Safe Desires

Participant

November 23, 2024 at 22:52

When a product does not have sizing or color variations, they line up completely differently. Is there a way to have all elements the same height so all buttons line up horizontally?

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#424873 Copied Theme version: 9.4.4

7 Answers

Safe Desires

Participant

November 24, 2024 at 04:08

Here is an example of how I believe it should look like. All rows are aligned horizontally.

Files is visible for topic creator and
support staff only.

#424878 Copied
Rose Tyler

Support staff

November 24, 2024 at 09:59
Hello,

Thank you for contacting us and for using XStore.

Custom CSS code can be used:
```
/* Make each product container take up the same height */
.etheme-product-grid  .product {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push content to top and bottom */
}
```
Additionally, please read this article – https://www.8theme.com/documentation/xstore/woocommerce/product-images/
It is recommended to use a graphics editor and prepare product images (make them the same size) before uploading images to your media gallery and for products. In other cases, images may have different heights on the frontend, and the Crop option can be useful in this case.

Warm Regards,
The 8Theme Team
#424915 Copied
Safe Desires

Participant

November 25, 2024 at 18:16

That did no seem to work. Please see attached.

Files is visible for topic creator and
support staff only.

#425186 Copied

Safe Desires

Participant

November 25, 2024 at 20:19

To add. The issue comes from the following:
1) Longer product names create a 2nd line:
Solution: Limit product names to one line and show “…” if the name is longer than one line.
2) If the size variations add up to more than one row, a +1 or +2 appears and the spacing under those numbers is too large (see attached image).
3) I went ahead and disabled the Add To Cart button to improve the layout look. Can the size swatches be removed from the home and shop page?

The customer should choose a color and click on the Shop icon, which opens up a sidebar, where the customer can see more details and choose the size. Is that within Xstore’s capabilities? If not, can the color swatches just serve as a way for a customer to see the different color variations but would need to go to the Single Product page to add the item to the cart?

Files is visible for topic creator and
support staff only.

#425202 Copied

Rose Tyler

Support staff

November 26, 2024 at 08:55

Hello,

The red color on your screenshot with the custom CSS code indicates that there was an error. We have identified (unclosed } ) and resolved it.

You can disable swatches via settings of element used to show products, for example – https://prnt.sc/HY1AdbF2_XYv , and additionally via Theme Options – https://prnt.sc/T8yvXB4-6Wx2 Limit for lines of product title can be found in the same way – https://prnt.sc/07sIZYlNKrr- https://prnt.sc/qRaXVdkbF0cD

We hope this information is helpful.

Best regards,
8Theme Team

#425252 Copied

Safe Desires

Participant

November 26, 2024 at 20:57

Can we only disable the size swatches? I don’t want people to be able to purchase a product without looking at details, but be able to see which colors are available.

I thought that if a customer clicks on the shopping bag icon, a flyout product detail would pop up on the right to allow the customer to see the details, such as sizes, before adding the product to the cart.

Also, in the attached screenshot, that shows the Shop vs. Homepage layout. The swatches are too big on the Shop Page. Can they be adjusted to the same size as on the home page?

Files is visible for topic creator and
support staff only.

#425372 Copied
Rose Tyler

Support staff

November 27, 2024 at 15:02
Hello, Safe Desires,

1/ You can disable swatches via settings of element used to show products, for example – https://prnt.sc/HY1AdbF2_XYv , and additionally via Theme Options – https://prnt.sc/T8yvXB4-6Wx2
Please find and test the mentioned settings before your next reply.

2/ There is quick-view option https://gyazo.com/b9186efbe352b56690f415005abf9cce
Type (Popup or Off-Canvas) of which can be selected via Theme Options > Woocommerce (Shop) > Shop elements > Quick view.

3/ By default they are the same size on all pages. Custom CSS code was used on your site https://prnt.sc/V5PMW32TS_g2 , we’ve removed the code:
```
selector .etheme-product-grid-item .st-swatch-size-normal li {
    width: 40px !important;
    height: 40px !important;    
}
selector .etheme-product-grid-item .type-label span {
    font-size: 15px !important;    
    padding: 5px !important;    
}
```
Please check the result https://prnt.sc/5CVC0DdYOdty

Best regards,
8Theme Team
#425515 Copied
Viewing 8 results - 1 through 8 (of 8 total)