[Resolved] Change niche product listing to boxes

[nik9]

Hello,

We want to show our product listing like cards.. like this example here. https://demos.kadencewp.com/blocks-store/product-category/clothing/tshirts/

We know that is just CSS. We are using niche theme. So the question is, in niche the „add to cart“ flys in on hover. But when we try to give the current niche boxes such a card look. It takes so much space because of the hidden „add to cart“ when no hover.

How can we adjust this?

Cheers

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

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..

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

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

[nik9]

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?

[Tom]

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;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[nik9]

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?

[nik9]

Hi Tom,

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

Is this a proper solution?

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nik9]

Hi David,

Perfect! Thanks 🙂

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts