Home › Forums › WoodMart support forum › Product Spacing on Grid and Carousel

Product Spacing on Grid and Carousel

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 6, 2022 at 8:29 pm #358009

    IanB
    Participant

    Is it possible to make the product grid and carousel images all show equal spacing even if there is reviews on the product or the product title is longer and drops to another line ?

    As show below the products are all misaligned ? How is equal spacing and consistency maintained ?

    What needs modifying ?

    Attachments:
    You must be logged in to view attached files.
    March 6, 2022 at 10:04 pm #358017

    IanB
    Participant

    I see setting product title line limit to (one line) helps with consitency but a product review throws this out, also setting product title to (two lines) causes problems also..

    Another store I viewed using a different cart solution, just leaves a space between products that don’t have reviews or single lines, and the double line titles remain consistent

    Is this possible ?

    March 7, 2022 at 12:43 am #358050

    Elise Noromit
    Member

    Hello,

    Please check this manual to find detailed instructions on how to do that: https://xtemos.com/docs-topic/image-size-and-content-alignment-in-a-product-grid/

    If you have any questions please feel free to contact us.

    Best Regards

    March 7, 2022 at 10:27 am #358261

    IanB
    Participant

    I already know this, what is stated in the manual ?

    I’m asking if there is a way to make it show equally aligned, when the review star rating is shown also.

    Some other grids show a space when there is no review to keep the alignment even on the grid view..

    March 7, 2022 at 4:00 pm #358398

    Elise Noromit
    Member

    Hello,

    Unfortunately, it is not possible. It is not possible to correct with CSS.

    Best Regards

    March 8, 2022 at 7:41 am #358595

    IanB
    Participant

    See the example below..

    The top image is how it currently is

    The middle image is shown with the add to cart equally spaced regardless if a review is present on the product ( i have edited this in photoshop to show the layout, other ecommerce stores use this format to retain consistency on products and prevent misalignment)

    The Third image shows how it should be ideally with the buttons equally spaced and the review stars in the centre if present .

    How would I go about getting this done to improve layout, is this something xtemos could do ?

    Image attached to show above examples..

    • This reply was modified 3 years, 2 months ago by IanB.
    Attachments:
    You must be logged in to view attached files.
    March 9, 2022 at 1:19 am #358906

    Elise Noromit
    Member

    Hello,

    Some of the products have review stars, and this block shifts the button. As a way out you can hide the reviews in the grid.
    If you have any questions please feel free to contact us.

    Best Regards

    March 9, 2022 at 10:44 am #359115

    IanB
    Participant

    Ultimately I would prefer to to place the review star rating under the price …

    BUT if this is not achievable with woodmart, how do I go about disabling the review on the product list and grid view ?

    Also do you have any plugin or developer recommendation that could help with this without disabling this..

    March 9, 2022 at 3:03 pm #359227

    Artem Temos
    Keymaster

    Hello,

    Try to add the following code snippet to the Custom CSS area in Theme Settings.

    .products.align-items-start {
    align-items: stretch!important;
}

.website-wrapper .wd-hover-standard {
    display: flex;
    flex-direction: column;
		align-items: center;
}

.website-wrapper .wd-hover-standard .price {
	margin-bottom: 5px;
	margin-top: auto;
}

.website-wrapper .wd-hover-standard .star-rating {
margin-top: auto;
}

.website-wrapper .wd-hover-standard .star-rating + .price {
margin-top: 0;
}

.slider-type-product .owl-stage {
    display: flex;
    align-items: stretch;
}

.slider-type-product .owl-stage .owl-carousel-item,
.slider-type-product .wd-hover-standard {
	height: 100%;
}

    Regards.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)