Always show cart button on list view on shop page – disable hover

Please send me a screen shot for the position that you want to display the cart button and Quick View button.
Regards,

Sure!

I’ll get something together but basically I’m looking to place it after the excerpt in the list view.

Like this:

http://postimg.org/image/w2fy4ksd3/


But I’d like to carry that through on all media sizes.

That’s where I am having a problem.

I can’t figure out the best positioning as the button isn’t being controlled by a template, but by CSS. So it’s hard to find the best place for all devices (phone, tablet, large, etc)

Thanks for the assistance!

To resolve this issue, you can log in to Dashboard > DW Store > Theme Settings then add the following code to the Custom CSS:

.woocommerce.columns-1 ul.products li.product .button {
    opacity: 1;
}

.woocommerce.columns-1 ul.products li.product:hover .button, .woocommerce.columns-1 ul.products li.product .button {
    transition: inherit;
    transform: inherit;
    margin-top: 0;
}
.woocommerce.columns-1 ul.products li.product .button {
    left: 50%;
    top: inherit;
    bottom: 40px;
}
.woocommerce.columns-1 ul.products li.product .button + .button, .woocommerce.columns-1 ul.products li.product .button + a + .button {
    float: right;
    transition-delay: 0.1s;
    margin-left: 180px !important;
}

.woocommerce.columns-1 ul.products li.product div[itemprop="description"] {
    margin-bottom: 40px;
}

See the screenshot: http://prntscr.com/8h9ogo
Hope this helps !

THANK YOU. That was a tremendous help!

Do you have a suggestion so the button does not go on top of the excerpt on mobile view? Some of my excerpts are too long for the new cart button position (especially on xs view).

I’d like to keep the short descriptions at the current total character count.

Please see my snapshot in the private post for an example.

Again, thanks for this help!

I’m not sure if this is the right solution, but I am trying this:

.woocommerce ul.products li.product a:first-child {
display: block;
background: #fff;
border-radius: 2px;
box-shadow: 0 0 1px rgba(0,0,0,0.15),0 1px 3px rgba(0,0,0,0.2);
padding: 50px; <– adding extra padding
margin: 0 0 30px;
}

Shrinking down the image max-width is helpful as well for longer titles:

.woocommerce ul.products li.product a img {
max-height: 300px;
width: auto !important;
margin: 0 auto 20px !important;
opacity: 1;
float: none;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
max-width: 150px; <—- playing here
}

I had to throw in the towel.

Without the product being bootstrap based, I’ll always be fighting the dynamic spacing of titles and short descriptions.

I don’t think it makes sense to modify the cover mouseover.