Woocommerce and ethos stack

[deranaloge]

hi there,

i styled the shop page to my design but have a problem with one product. i added follwoign code, so the product title can now have 2 lines. for some products this is still not enough, can the visible part/height before hover be changed?

.woocommerce li.product .entry-header h3 {
   text-overflow: inherit;
   white-space: pre-line;
}

but now when you hover on the product fresh & easy there is a back line on the bottom.
is there a way to fix this?

my second question:
is it possible to add my filter (i made it with product filter) on the single product page? so the user can jump back to category or all wines?
or if not is it possible to add a simple navigation in top of the shop and single product page?

and now my last question:
is it possible on the single product page to change the icon (left top) to go back to the shop? i would have a text there.

thanks in advance for your help

[rad]

Hi Harald,

Thanks for reaching out.

It’s the reason it needs fixed height on that type of design, if you push the title up for the 3 lines headline, it will have the same effect on 1 line headline, but instead, it displays the price earlier. The solution is, make sure all headline has the same height as 3 lines headline even if the text is few. Please add this

.woocommerce li.product .entry-wrap {
    top: calc(100% - 6em);
}
.woocommerce li.product:hover .entry-wrap {
    top: calc(100% - 12em);
}
.woocommerce li.product .entry-wrap h3 {
    height: 84px;
    overflow: hidden;
}

For the second question, it’s not currently possible. The theme only provides simple design integration with Woocommerce. But the customization is solely related to Woocommerce. So please check this https://stackoverflow.com/questions/49718323/how-to-add-a-link-on-woocommerce-product-page-as-per-the-product-category

As for the last question, it’s already pointing to your shop page. Or perhaps a different shop page? In that case, you will have to add this to your child theme’s functions.php with your custom shop URL.

  function x_ethos_entry_top_navigation() {

    if ( x_is_portfolio_item() ) {
      $link = x_get_parent_portfolio_link();
    } elseif ( x_is_product() ) {
      $link = 'http://example.com/my-awesome-shop'; //<<<<<< change it here
    }

    $title = esc_attr( __( 'See All Posts', '__x__' ) );

    ?>

      <div class="entry-top-navigation">
        <a href="<?php echo $link; ?>" class="entry-parent" title="<?php $title; ?>"><i class="x-icon-th" data-x-icon-s="&#xf00a;"></i></a>
        <?php x_entry_navigation(); ?>
      </div>

    <?php

  }

Thanks!

[deranaloge]

hi,

thanks point 1 worked like it should!
i have two questions about that:
is it possible to make the hover under the product image? so nothing from the image is covered? when i then mous over the product it pulls to top.
second: i tried to find the right selector to 1.: define the background color before hover and 2: the background color when mouse over?

for 2 and 3:
sometimes it is really easy: i made a extra header for woocommerce, assigned it to the products and shop page. i there made a navigation for the product categories. thanks to the header builder in pro it was really easy to archive.
i wish i had this idea yesterday… (ofcourse i deactivated all woocommerce filters and page navigation via css)

thanks again for your help.

cheers

[ruenel]

Hello Harald,

is it possible to make the hover under the product image

• It is not possible because when have it that way, the grid items in the second row will be push down or get overlapped with the product info. Please be advised that the whole featured image is the container and the other product details were hidden away outside of bounds of this container. As you hover it, the product info is revealed as it moved up to the top.
  

To add a background color, you will need to use this code:

.woocommerce li.product .entry-wrap header {
    background-color: red;
}

.woocommerce li.product:hover .entry-wrap header {
    background-color: green;
}

Do not forget to replace the colors because I used red and green so that you can easily see the changes when you apply this code.

Regards.

[deranaloge]

hi,

thanks again for your help. because i didn´t like that the product image is cutted, i switched to icon stack and customized it.
looks good atm.
one tiny question. is it possible to make the image bigger (higher)? or is this a behaviour from woocommerce?

thanks

[friech]

Hi Harald,

It is possible, however, the images are responsive to its container, so if you increase the size of the images you might mess up the layout of your columns.

Thanks,