WordPress Storefront Theme Customisation

0
votes

I'm trying to find out if it is possible to customise the WordPress Storefront theme so that on product grids each item in the grid takes up exactly the same amount of space on screen even if there is some variation in image size and the length of titling text.

I'm envisaging a structure like Area for Image - Fixed height - just over the height set in WooCommerce Area of Title - Fixed Heigh - enough for 2 lines of text. Add to cart button.

My first thought is that this should in the template CSS however it is proving hard to pin down. Does anyone have experience with this theme?

1
wordpresswoocommercestorefront
Hey Rob - I think what you may be looking for are the list-items styled with .site-main .columns-3 ul.products li.product - and also some of the interior elements to those. These are actually not styled in the theme, but in the WooCommerce plugin CSS. Take a look in there. It's fairly easy to override them with fixed heights in your theme's custom CSS file. - Josh LaBau

1 Answers

0
votes

Thanks for your reply it put me on the right track and I have what I want. Between what you said and some other storefront code I picked up from various places we were able to create some code that kept people happy. The basic desktop code for it turned out to be 

a.added_to_cart.wc-forward {
    bottom: 0;
    position: absolute;
    display: block;
    bottom: 0px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    height:500px;
    min-height: 295px !important;
    margin-bottom:10px;
}

a.button.add_to_cart_button,
a.button.product_type_simple {
    bottom: 50px;
    left: 60px;
    position: absolute;
}