Patrick's Programming Blog

How to Add a Call to Order Button in WooCommerce

WooCommerce is a fully featured e-commerce solution and you can do just about anything with it. But just because you can doesn't mean you should. Many businesses aren't ready for run an e-commerce site. Maybe they can't increase inventory fast enough, they don't have a good fulfillment system setup, or they just aren't ready to take their business online.

When this happens WooCommerce can still be really useful to show off your products to your customers. There are categories, tags, filters, multiple tabs, video tabs360-degree images, and all sorts of other really useful features you can use to help customers browser your catalog. The only thing you have to do is disable that Add to Cart button and replace it with a Call to Order button. There are two good ways of doing this. The first is to use a plugin and the second is to code it yourself. I'll show you how to do both.

Using a Plugin

There's a handy plugin that gives WooCommerce all sorts of catalog functionality and it's (not surprisingly) called WooCommerce Catalog Visibility Options. Once you get the plugin installed go to the WordPress admin and then WooCommerce -> Settings -> Visibility Options.

You'll want to set:

WooCommerce Catalog Visibility Options – settings page.

Shop page with a Call to order button

Single product page with call to order text and phone number

Pretty easy huh? The Alternate Content field in the settings page is a visual editor meaning you can bold, italicize, add whole paragraphs, etc. So you could give any additional information users would need to be prepared for that call.

Using Code

If you're developing a custom theme you may want to have one product or maybe just one category be unavailable. Maybe it's prototype or the products are only available to your special customers but you still want to show them off to everyone online. In that case you may want a bit of custom code to do this instead.

The first thing you have to do is disable the regular add to cart button. You can't just change the text in the button because clicking it would still add the product to the cart. We need to remove it entirely and add another button that looks just like it in it's place. First: remove the button on the shop page & single product page.

Once we've removed the buttons we need to add a button on the shop page. This is a bit more complicated because we also need to get product data and use that to make the new button link to the product page.

We've updated 1/2 of the buttons. We just need to update the button on the single product. This snippet will add text after the product's short description. Above any sharing buttons you might have and above the product tabs.

And the end result is exactly like the results of the plugin above. It's a bit more of a pain to add code to your theme's functions.php or in a custom plugin. But the advantage is you can customize it however much you want. You could add if statements to restrict it to just one product or just one category or whatever you want.

Happy cataloging! 🙂

Exit mobile version