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.

7

If you want to create individual links to the corresponding product cards on Amazon and Walmart, then first you need to create two corresponding custom fields for the product. Here you can use the ACF plugin.
Then display these links in the product card template of your theme.

<?php
$amazon_link = get_field('amazon_link'); //  ACF for Amazon
$walmart_link = get_field('walmart_link'); // ACF for Walmart

if ($amazon_link || $walmart_link): ?>
    <div class="product-buttons">
        <?php if ($amazon_link): ?>
            <a href="<?php echo esc_url($amazon_link); ?>" class="buy-button amazon" target="_blank" rel="noopener noreferrer">
                Buy from Amazon
            </a>
        <?php endif; ?>
        <?php if ($walmart_link): ?>
            <a href="<?php echo esc_url($walmart_link); ?>" class="buy-button walmart" target="_blank" rel="noopener noreferrer">
                Buy from Walmart
            </a>
        <?php endif; ?>
    </div>
<?php endif; ?>

Then style the buttons in CSS

8

To add “Buy from Amazon” and “Buy from Walmart” buttons to your WooCommerce product page, you can use the Advanced Custom Fields (ACF) plugin or manually edit your theme’s functions.php file. A simple method is to add custom fields for the URLs and display them as buttons using a shortcode or custom HTML in the product template.

For a step-by-step guide, check out this tutorial: https://woocommerce.com/posts/how-to-add-a-custom-button-to-product-pages-in-woocommerce

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.