How to change WooCommerce add to cart button in general webshop

Hi there,

I’m using the Sparkling theme for my site and use Woocommerce for the webshop. On the general shop page, there are buttons with ‘add to cart’ and which will add the products to the cart. However, I would like to chance these buttons in something like ‘read more’ and have them direct to the actual single product page - the customer most like want to read about the product first before adding it to the cart . So I need to change the text on the button and the link behind it. Do you have a solution for this?

And the general shop page looks messy; the products are not on the same height and they out not very well positioned either. Any tricks for this would be welcome as well. (see attachement)

Thank for your help, will be much appreciated!

Kind regards,
Rik

And i’ve got this already in my css:

.woocommerce #content div.product div.images, .woocommerce div.product div.images, .woocommerce-page #content div.product div.images, .woocommerce-page div.product div.images {
width: auto;
}

body.single-product #main div.product div.images {
width: auto;
}

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
width: 30%;
}

.woocommerce div.product div.images img{
width: 0;
}

Hey there,
Hope you’re doing well today

Replacing the Add to cart button with a read more button would require some customization from WooCommerce, unfortunately, we’re unable to do that from within the theme.

In order to get the products set properly, I believe you’ll need to move the width in the CSS above from 30% to about 28%.

Please try that and let me know how it turns out.

Best Regards,
Support

Hi there,

Thanks for the fast response! Changing the width does not seem to help, but it turned out i used different image sizes for each product and I expected WooCommerce to adjust them to the right size automatically, but it did not. In the meantime I did notice that there only seem to fit two products next to each other, no matter how small they are. Is there a fix for that?

It’s very unfortunate that you can’t change the ‘add to cart’ button easily. Is there perhaps a possibility to add a second button? So you’ll have one read more and one add to cart button? That would be the second-best-thing.

Thanks again!

Rik