Ed Crotty
asked 4 years ago

When using list mode on your Woocommerce shop page, how can I always have the cart button visible after the excerpt for a product?

I’d like to disable the hover-to-show-the-cart-button feature and always have the cart button visible.

Also, if I do that, I’d like to disable the fade as well on hover of the product div.

Thanks!

5 Answers
DominicStaff
answered 4 years ago

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

Ed Crotty
answered 4 years ago

Sure!

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

Ed Crotty
answered 4 years ago

Like this:

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

![enter image description here](http://postimg.org/image/w2fy4ksd3/ "enter image title here")

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!

DominicStaff
answered 4 years ago

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 !

Ed Crotty
answered 4 years ago

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!

Ed Crotty
answered 4 years ago

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

Ed Crotty
answered 4 years ago

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
}

Ed Crotty
answered 4 years ago

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.

dominic Staff
replied 4 years ago

In the DW Store, we have removed the cart button when view on the mobile, if you want to resolve this issue, please send me username & password of your site ( via private answer) I will help you.

dominic Staff
replied 4 years ago

PS: You can try the following code:

@media (max-width: 480px) {
.woocommerce.columns-1 ul.products li.product .button {
    left: 30px;
  }
}

@media (max-width: 768px) {
.woocommerce.columns-1 ul.products li.product .button {
       display: block;
       width: 120px;
       left: 54px;
  }
.woocommerce.columns-1 ul.products li.product .button + .button, .woocommerce.columns-1 ul.products li.product .button + a + .button {
    margin-left: 140px !important;
  }
.woocommerce.columns-1 ul.products li.product a img {
    margin: 0 40px 56px 0 !important;
  }
}

Hope this helps !

Powered by DW Question & Answer Pro