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 tabs, 360-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.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function patricks_remove_loop_button(){ | |
| remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 ); // removes the add to cart button on the shop page | |
| remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 ); //removes the add to cart button on the single product page | |
| } | |
| add_action('init','patricks_remove_loop_button'); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function patricks_woocommerce_call_to_order_button(){ | |
| global $product; //get the product object | |
| if ( $product ) { // if there's a product proceed | |
| $url = esc_url( $product->get_permalink() ); //get the permalink to the product | |
| echo '<a rel="nofollow" href="' . $url . '" class="button add_to_cart_button ">Call to order!</a>'; //display a button that goes to the product page | |
| } | |
| } | |
| add_action('woocommerce_after_shop_loop_item','patricks_woocommerce_call_to_order_button', 10); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| function patricks_woocommerce_call_to_order_text() { | |
| echo '<p>Call to order this product. <strong>123-456-7890</strong>.</p>'; | |
| } | |
| add_action('woocommerce_single_product_summary','patricks_woocommerce_call_to_order_text', 30); |
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! 🙂
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.
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?
Call by Price in Woocommerce if you out of stock woocommerce product for need to get enquiry than you can be using call by price in woocommerce
Good idea. It help a lot when you run out of stock
Is there a way to set this up to place an order for pick up and you pay when pick up the items?
Hi
should i put the above codes in function.php file of my child-theme only ? I put the codes in function.php of my child-theme like this but it didn’t work 🙁
Please guide me.
get_permalink() ); //get the permalink to the product
echo ‘Call to order!‘; //display a button that goes to the product page
}
}
add_action(‘woocommerce_after_shop_loop_item’,’patricks_woocommerce_call_to_order_button’, 10);
function patricks_woocommerce_call_to_order_text() {
echo ‘Call to order this product. 123-456-7890.’;
}
add_action(‘woocommerce_single_product_summary’,’patricks_woocommerce_call_to_order_text’, 30);
?>