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:

  • Purchases to Disabled
  • Catalog Add to Cart Button Text should be something like “Call to order”
  • Alternate Content should be “Call to order: 123-456-7890”
WooCommerce Catalog Visibility Options Settings-page

WooCommerce Catalog Visibility Options – settings page.

Shop Page Call To Order

Shop page with a Call to order button

Single Product Call to Order

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! 🙂

2 thoughts on “How to Add a Call to Order Button in WooCommerce

  1. Great article, is there a way I can apply your code only to Backorder products and not all products?

    Some of my products are very big and bulky or are not located in my shop. I would like customer to call my store to order these specific items.

    Currently I use the back order feature to display a “call our shop” message, but the add to cart button is still displayed.

  2. Can this be edited to use the $url as a phone link?

    That way on each product *if there was a different Dept or Section for that product, it would dial the number (on mobiles) automatically, and on a desktop just show the number in the echo?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.