Change niche product listing to boxes

Hi there,

do you have a site setup with the card styling so i can take a look at what changes need to be made.

Hi David

There is the link with the current status. But i'm not happy with the UI and the CSS is a hack.. haha..

The Niche Hover effect uses the CSS transform translate property - which means the button, whether it be visible or not will always occupy 'space' on the page. So getting rid of the extra gap is tricky.

However, to make the card style effect easier and something you can then tweak you can wrap the Shop items content so you effectively have a div for the image, and a div containing all other content including the button. This PHP Snippet will do that:

add_action('woocommerce_shop_loop_item_title', 'woo_shop_loop_item_open_wrapper',9);
add_action('woocommerce_after_shop_loop_item', 'woo_shop_loop_item_close_wrapper',100);

function woo_shop_loop_item_open_wrapper() {
    echo '<div class="woo-content-wrap">';
}
function woo_shop_loop_item_close_wrapper() {
    echo '</div>';
}

Now you can add padding and a background color to the woo-content-wrap element. And the Button will be included inside that.

Hi David, thanks.

Yes this makes it a lot easier. But to get rid of the extra gap is not possible? What about when the transformation is not from bottom to top but instead left to right?

Cheers

Doesn't matter which direction, the element still occupies the same space in the DOM.
The only way around that is to transform the other elements to fill that space. And have them 'move' on hover as well.

Maybe we can add a margin-top: -200px to the row space between or is that a hack? :)

I found this here.. https://kindpreneurs.com/department/accessories/

Maybe to push everything to top will work and would be look nice. What you think david?

Hi there,

Give this a shot:

.woo-content-wrap {
    padding: 15px;
    background: #efefef;
    position: relative;
}

.woocommerce ul.products li.product .button.add_to_cart_button {
    position: absolute;
    left: 10px;
    right: 10px;
    width: auto;
}

Hey Tom,

Yes, this looks good. But now we have some other CSS issues.

- Now some old CSS does not work after activate the new wrap. Now it's not possible to give the class SellerDetailsProductThumbnail a margin-top and margin-bottom. Why?

Hi Tom,

I was able to solve this via give the class span.SellerDetailsProductThumbnail the setting display: block.

Is this a proper solution?

That simply makes the CSS more specific - which is the way to fix a specificity issue :) So it looks good to me!

Hi David,

Perfect! Thanks :)

You're welcome