How to Add a WooCommerce Custom Button

Sometimes you need a WooCommerce custom button next to the add to cart on the shop or product page. Why? To link to a demo of the product or anything else.

Table of Contents

Add Codes to the Child Theme’s functions.php

Below is the final code, which I will explain in a moment. You should add it or your edited customized version to your child theme’s functions.php file. If you do not have a child theme, see How to Create a WordPress Child Theme Easily post.

/* Add a custom button next to add to cart button in WooCommerce */
// In single product pages
function alvand_demo_button_cart()
{
    $product = wc_get_product(get_the_id());
    $url_demo = $product->get_attribute('url_demo');
    if ($url_demo != "") {
        echo '<a class="wp-block-button__link wp-element-button" style="/*Your inline CSS styles*/" href="' . $url_demo . '">View Demo</a>';
    }
}
add_action('woocommerce_after_add_to_cart_button', 'alvand_demo_button_cart', 20);
// In shop pages
function alvand_demo_button_shop()
{
    $product = wc_get_product(get_the_id());
    $url_demo = $product->get_attribute('url_demo');
    if ($url_demo != "") {
        echo '<a class="wp-block-button__link wp-element-button" style="/*Your inline CSS styles*/" href="' . $url_demo . '">View Demo</a>';
    }
}
add_action('woocommerce_after_shop_loop_item', 'alvand_demo_button_shop', 20);

If you have trouble adding the above codes to the functions.php file, look at how to edit functions.php on the WordPress themes article.

I added a theme demo button in the above codes. You can tweak this example for your case.

Edit Your Products to Add a WooCommerce Custom Button

Go to your website’s WordPress admin area > Products > All Products > Click Edit on the product you want to add a demo button.

Scroll down to the Product data section and click on the Attributes tab. Click on Add new. For the Name field, enter url_demo and for the Value(s) enter your demo URL. Uncheck Visible on the product page and click on Save attributes.

Then Update (Save) the product from the top.

We add a button with a custom link for each WooCommerce product. But it needs customization to fit your website theme. Next, let’s take a look at some customizations to the button.

Customize Your WooCommerce Custom Button

First, if you need a custom button only on the product page, remove the codes // In shop pages until the end of the above codes. Now you know which part of the codes is for what.

We have this line of code both in single page and shop page codes:

echo '<a class="wp-block-button__link wp-element-button" style="/*Your inline CSS styles*/" href="'.$url_demo.'">View Demo</a>';

You can add your buttons’ custom CSS class after these two classes by one space in between: wp-block-button__link wp-element-button. These two classes are default WordPress classes for buttons.

Maybe you also want some inline CSS styles. In this case, you can write your codes in place of /*Your inline CSS styles*/ in the code.

After that, we have View Demo the button’s text. You can change it to any text that you prefer.

Conclusion

That’s it. I hope it helps you add a custom button to WooCommerce. You may also like this article: How to Change the WooCommerce Placeholder Image