Docs

[Geert S]

On my main shop page I show nine products per page. Because their aspect ratios are widely different (and must remain so), and the images are mainly white, as my background (also: should remain so), this makes for a messy masonry view. I would like to get the (grey) field with title and price above the image instead of below it. Then at least, all those grey fields would line up neatly and that would surely be a more balanced view.
(Of course, telling Woocommerce to aline the bottom of the items would also do the trick)

It sounds more complicated than it is; please see here and you’ll understand what I mean -I hope: http://www.deconstructionart.com/shop/

If this is beyond the scope of support you offer, I totally understand. But I hope you can help!
I’ll post my login details below.

[Geert S]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in!

To resolve this issue, please do the following:

1] Please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($) {
  var product = $('.products .product');
  product.each(function(index){
    $(this).css({'opacity':'1'});
    $(this).find('.entry-wrap').insertBefore( $(this).find('.entry-featured') );
  });
})(jQuery);

2] Please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.archive.woocommerce li.product {
  opacity: 0;  
}

.woocommerce li.product .entry-header h3 {
    min-height: 50px;
}

We would loved to know if this has work for you. Thank you.

[Geert S]

What a nice surprise to wake up to, it definitely works and you’ve even made the changes for me -or were those the elves? 😉

Obe more thing: how can I integrate these in my childtheme? The bottom one looks like it has to go in style.css. The upper in functions.php?

[Christopher]

Hi there,

Before enabling child theme, export customizer setting under X addons page. After activating child theme, import customizer settings.

The script should be added in Customize > Custom > Javascript, even when you’re using child theme.
CSS could be added either in Customize > Custom > CSS or child theme’s style.css file.

Hope it helps.

[Geert S]

Great, thanks a million! It’s exactly what I was looking for. 🙂
Keep up the great work!

[Geert S]

PS: I just noticed that in the process, the ‘make selection’ pop-up when hovering has disappeared (magic!). Which I like very much! So even more thanks. 🙂

[Darshana]

Glad we were able to help 🙂

[Author]

Posts