Woocommerce Hack: Make ‘Add to Cart’ Button Permanently Visible

While building a Wordpress site using Woocommerce, I realised that it’s usually essential to have the ‘Add to Cart’ button permanently visible on the products catalog page.

I can think of couple of reasons for having this functionality, the most important being it can increase sales. Having an ‘Add to Cart’ on the product catalog page allows the customer to quickly add the product to the cart instead of opening the product description page and then adding it. This is an irritable step if the customer is not interested in reading the description. For some reason Woocommerce doesn’t make it permanently visible by default. It adds a hover jQuery event to it, which makes it visible only upon hovering over the product area.

To make it permanently visible, an easy hack is to directly modify the CSS class of the button.

Let’s say the class name of the ‘Add to Cart’ button is cartbutton. You will have to add the following CSS style to the stylesheet.css in the Wordpress admin panel.

.cartbutton {
opacity: 1;}

That's it. The job is done.

Interestingly even Flipkart doesn't support this functionality.

Though it’s just a hypothesis, I’m pretty sure having a direct ‘Add to Cart’ will result in more products being added to the cart.

Show your support

Clapping shows how much you appreciated Prateek Agarwal ’s story.