Learn in this tutorial how to display an extra button next to the WooCommerce “add to cart” button on product pages without plugins.
One of the advantages of being an OsomCode subscriber is that you can propose tutorials.
The other day, one of them asked me how he could add an extra button that would link to a product demo right next to the “add to cart” button.
Luckily, WooCommerce has a hook that allows you to add content in this location, so let’s see how to do it.
This would be the default product page:
And this would be with the extra button:
Shall we go there?
Snippet to display an extra button next to the “add to cart” button on WooCommerce product pages
Add the following code at the end of functions.php or in your functionality plugin:
To see this and another 965 code snippets of this website, login or subscribe here.
In this case, the text of the new button will be “View demo” and the URL will be the web + /demo/ + the name of the product. That is, something like: yourweb.com/demo/product-2/.
Of course, you can change both the URL and the text to whatever you want.
Finally, to prevent the two buttons from being completely stuck together, add this code to the style.css file:
To see this and another 965 code snippets of this website, login or subscribe here.
There you have it.
Conclusion
As you can see, with a few lines of code you can display an extra button on WooCommerce product pages, right next to the add to cart button.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
