How to add two buttons to woocommerce product page

CMS & WordPress
1

Hey, anybody could guide how to add two buttons to woocommerce product page like one to show “Buy from Amazon” and another “Buy from Walmart”?

Here you can check which I want to make changes.

2

To add two buttons to a WooCommerce product page, follow these steps:

1. Add Buttons via Theme’s functions.php File

  • Go to Appearance > Theme File Editor in WordPress.
  • Open the functions.php file of your child theme (recommended).
  • Add the following code:

php

CopyEdit

add_action('woocommerce_single_product_summary', 'custom_buttons_on_product_page', 30);

function custom_buttons_on_product_page() {
    echo '<a href="#" class="button custom-button-1">Button 1</a>';
    echo '<a href="#" class="button custom-button-2">Button 2</a>';
}
  • Adjust the button text and links as needed.

2. Style Buttons Using CSS (Optional)

  • Go to Appearance > Customize > Additional CSS and add:

css

CopyEdit

.custom-button-1, .custom-button-2 {
    display: inline-block;
    margin: 10px;
    padding: 10px 20px;
    background-color: #ff6600;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}
.custom-button-2 {
    background-color: #0073aa;
}
  • Modify colors, padding, and spacing as per your design.

3. Alternative: Use a Plugin

  • Install Code Snippets plugin to avoid modifying functions.php.
  • Add the above PHP code as a new snippet and activate it.

4. Alternative: Modify Product Template (Advanced Users)

  • Copy single-product.php or content-single-product.php from woocommerce/templates to your theme folder (yourtheme/woocommerce/).
  • Insert the buttons inside the template where needed.
3

It didn’t work.

4

You can add two buttons to the WooCommerce product page using the woocommerce_single_product_summary action hook in your theme’s functions.php file. This enables you to alter the layout of the product page and add buttons where you need them.