[Resolved] Change niche product listing to boxes

Home Forums Support [Resolved] Change niche product listing to boxes

Home Forums Support Change niche product listing to boxes

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1553969
    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

    #1555057
    David
    Staff
    Customer Support

    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.

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

    #1560055
    David
    Staff
    Customer Support

    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.

    #1563349
    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

    #1563423
    David
    Staff
    Customer Support

    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.

    #1566155
    nik9

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

    #1567412
    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?

    #1567777
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1570971
    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?

    #1571344
    nik9

    Hi Tom,

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

    Is this a proper solution?

    #1571360
    David
    Staff
    Customer Support

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

    #1571361
    nik9

    Hi David,

    Perfect! Thanks 🙂

    #1571366
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.