Tagged: , ,

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • August 24, 2015 at 9:07 pm #492497
    CharlieTh

    On a localhost WooCommerce Products Archives or Shop Page, I am trying to make columns the same height.

    Each product has rather LONG excerpts (short descriptions). But the descriptions aren’t all the same height, which looks a little ragged on the Shop Page.

    I would like to set an arbitrary “same height” (using the longest of the excerpts as my “ruler”) for ALL the boxes, so they look more tidy.

    .inner_product_header doesn’t seem to do the trick. Depending on height set, it potentially removes the Add to Cart and Show Details buttons.

    Can you direct me to the proper CSS for this one?

    Thanks in advance…

    August 24, 2015 at 9:23 pm #492498
    Basilis

    Hi CharlieTh!

    We can do that but the images will be distorted. have you tried to crop the images from woocommerce settings?

    Cheers!
    Basilis

    August 24, 2015 at 11:39 pm #492537
    CharlieTh

    I don’t want the image changed…it’s fine…featured images are same height.

    It’s the content that varies in height.

    I’m talking about the area with Conent wording and then under them, at the bottom of the “box” are Add to Cart and Show Details buttons.

    Is this doable, do you think?

    Thanks!

    August 26, 2015 at 10:37 am #493409
    Josue

    Hey!

    We would need to see the website live for this kind of requests, a mockup of what you want to achieve would be helpful too.

    Regards,
    Josue

    August 27, 2015 at 5:39 pm #494360
    CharlieTh

    Info for team…

    August 27, 2015 at 8:50 pm #494439
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    #top .inner_product_header {
    min-height: 650px;
}

    Cheers! 
    Josue

    August 27, 2015 at 9:50 pm #494466
    CharlieTh

    Yep! That was EXACTLY what I needed.

    Thank you so much! To you, it might have seemed simple…to me, a mountain!

    August 27, 2015 at 9:55 pm #494472
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

    March 19, 2018 at 1:17 pm #929038
    philthebass

    Hi,

    I’ve been trying to achieve something similar so that the product divs remain the same height even if the product titles warp across multiple line and so that the prices align.

    I’m using the following:

    /* woocommerce category font sizes */

    .inner_product_header_cell h2 {
    font-size: 20px !important;
    line-height: 1.4em !important;
    font-weight: normal !important;
    }

    #top .inner_product_header {
    min-height: 120px;
    }

    #top .price span {
    font-size: 22px !important;
    line-height: 1.4em !important;
    font-weight: bold !important;
    position: absolute !important;
    bottom: 0px !important;
    }

    So far so good, but the <span class=”woocommerce-Price-currencySymbol”>£</span> isn’t behaving

    https://screencast.com/t/YkoVMyFVP

    Any suggestions would be greatly appreciated.

    Thanks

    Phil

    March 20, 2018 at 11:41 am #929745
    Victoria

    Hi philthebass,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    March 20, 2018 at 11:44 am #929749
    philthebass

    Hi Victoria,

    Details posted.

    With thanks

    Regards

    Phil

    March 21, 2018 at 4:57 am #930250
    Victoria

    Hi Phil,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top.home .price span.woocommerce-Price-currencySymbol,
#top.home .price span.woocommerce-Price-amount.amount
 {
   font-size: 16px !important;
 }

#top.home .price span.woocommerce-Price-currencySymbol {
  margin-left: -15px;
}
#top.home .price span.woocommerce-Price-amount.amount {
  padding-left: 15px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 21, 2018 at 10:18 am #930462
    philthebass

    Thanks Victoria, but that wasn’t working for me so I’ve used the following

    /* WooCommerce set min height in grid cells to allow space for text wrapping */
    #top .inner_product_header {
    min-height: 120px;
    }

    /* then align price to bottom of cell */
    #top .price, div .stock {
    color: #7E9A47;
    position: absolute;
    bottom: 0px;
    }

    however

    This affects all prices on all pages so pushes the price down on individual product pages etc.

    Is there a way I can target only product grids/tables?

    Thanks

    Phil

    March 22, 2018 at 12:53 pm #931220
    Victoria

    Hi Phil,

    Can you point me exactly to the pages and elements that need to be adjusted? I do not see the issue.

    Best regards,
    Victoria

    March 22, 2018 at 4:11 pm #931413
    philthebass

    Hi Victoria,

    So I’ve added the following CSS to the site to get 80% of the way there

    /* WooCommerce set min height in grid cells to allow space for text wrapping */
    #top .inner_product_header {
    min-height: 120px;
    }

    So now all I need to do is to get the price/currency symbol to align at the bottom
    2018-03-22_1407

    But only in any grid/table view.

    https://www.baysixty6.com/shop/

    Thanks

    Phil

    March 23, 2018 at 10:40 am #931880
    Victoria

    Hi Phil,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
.inner_product_header_cell .price {
  position: absolute;
  bottom: 10px;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    March 23, 2018 at 11:27 am #931914
    philthebass

    Thanks Victoria, that works great :-)

    March 24, 2018 at 6:04 pm #932427
    Basilis

    Hi,

    Thank you for the update.

    Best regards,
    Basilis

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Make Woocommerce Shop Columns Same Height’ is closed to new replies.