Add to shopping bag button position in loop

[opus95448]

Hello!

I want to change the position of the ‘Add to shopping bag’ button on the product loop pages / category pages. Instead of sliding in from the botttom, I want the button to slide in from the top. I already tried some CSS adjustments but this breaks the product image (not clickable).

Can you provide CSS adjustments to achieve this? I really hope you can help me here. Thank You! <3

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.standard-browser ul.products li.product figure:hover figcaption {
    top: 0px !important;
}

.woocommerce ul.products li.product figure figcaption{
top:-80px !important;
}

Thanks
Mohammad

[opus95448]

This does not work, the product image is overlayed with a color and it’s not clickable. I had the same problem.

[Mohammad – SUPPORT]

Hi,
Please attach marked screenshot to indicate the issue.
Thanks
Mohammad

[opus95448]

The product image should be visible, instead there is a black overlay AND i can’t click the image to get to the product page.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please add this:

ul.products li.product figure.product-transition-fade > a > .product-image {
    z-index: 5!important;
}

Thanks.

[opus95448]

Sorry, but this makes the ‘add to cart’ button disappear.

[David Martin – Support]

I think you have add the CSS to hide that?:

/* WooCommerce - Add to Cart Button in der Produktübersicht ausblenden */
.add_to_cart_button {
display: none !important;
}

Thanks.
David.