Docs

[sosmond]

On the shop page is there a way to have the product title all bottom aligned?

http://jeff-dillon.com/portfolio/

[Friech]

Hi There,

Thank you for writing in! We can do that by adding the Custom CSS below on your Customizer. However, that will stretch those landscape oriented images.

.woocommerce li.product .entry-featured img {
	    min-height: 230px;
}

Hope it helps, Cheers!

[sosmond]

Thank you for providing a solution however this code stretches and skews the images. I would like to leave the image size alone and align only the product titles.

[Jade]

Hi there,

Please try this:

.woocommerce li.product .entry-featured {
    min-height: 230px;
}

[sosmond]

Thank you for the response. This works okay but still has some issues with taller products as well as the more details hover button. http://jeff-dillon.com/portfolio/

Would it be easier to put the title above the product image? Can that be done with css?

[Rue Nel]

Hello There,

Thanks for updating in! To resolve your issue, please have the given css code updated and use this instead:

.woocommerce li.product .entry-featured {
    min-height: 230px;
    max-height: 230px;
    overflow: hidden;
}

Hope this helps. Kindly let us know.

[sosmond]

That code aligns things nicely however it crops the images which is not acceptable to the artist.

What is involved in moving the title above the image?

[Rue Nel]

Hello There,

Since the css is not the perfect solution because the images should be be cut off, we can just transfer the title above the images. To do so, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.archive .products .entry-product').each(function(index, element){
    var el = $(this);
    el.find('.entry-wrap').insertBefore( el.find('.entry-featured') );
  });
})(jQuery);

And please do not forget to remove the custom css we gave from the previous reply.

Hope this helps.

[Author]

Posts