🚀 Is building a website too difficult? Let me guide you step by step—Learn about the 「Naibabiji WordPress Website Building Coaching Service」 →

How to add an inquiry button below the WooCommerce add to cart button?

Many friends building Foreign Trade Independent Websites use the WooCommerce Plugin for their product system. Some B2B websites wish to add a contact button or inquiry button on the product page. Previously, I introducedSeveral Inquiry Button Plugins, this article shares with youHow to Add a Custom Button Below the WooCommerce Cart Button Using CodeWooCommerce页面新增按钮The effect is as shown above, adding a button below the cart button where the button text and link can be customized.Usage method:Copy the code below and paste it into your Theme's functions.php file
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
  global $product;
  echo 'Contact us immediately';
}
After saving, you will see a „Contact us immediately“ button on your website„s Frontend. However, it doesn“t have any styles yet. You can customize the style of `.naibabutton` in your Theme„s CSS. If you don“t know how, just copy and paste the following code snippet.
.naibabutton {
    color: #111;
    background-color: rgba(0,0,0,0.1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #009688;
    padding: 10px;
}
Don't want to figure it out? Pay to have it solved.Contact Me

Add an Amazon Redirect Button

Many foreign trade enterprises have Amazon stores, so they want to add a button on their independent website's product page that redirects to their Amazon store. There are three methods to achieve this function. 1. Insert a button when filling in the product short description. 2. Add a piece of code using a method similar to the inquiry button shared above. 3. Use a Plugin.Code Method:Here I use the Custom Field method to add it. First, add a Custom Field on the WooCommerce product page, for example, `amazon_link`, and then fill in the Amazon URL in the value of `amazon_link`. Next, add the code below to the Theme files, and it can be used directly.Code SnippetsAdd via Plugin.
add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 );

function my_extra_button_on_product_page() {
global $product;
if ( get_post_meta(get_the_ID(), 'amazon_link', true) ){
echo 'Buy on Amazon';
}

}
add_action( 'wp_head', function () { ?>

After saving, products that have an Amazon URL filled in will display an Amazon button on the Frontend; those without will not show it.Plugin Method:[vk-content] Install aQuick Buy Now Button for WooCommercePlugin, and then a corresponding settings box will appear when editing WooCommerce products.Fill in "buy on amazon" yourself, then choose a custom page for the redirect, enter the URL below, and an Amazon redirect button will appear after publishing the product. If you don't change the link yourself, it just adds a quick buy button. [/vk-content]

🚀 Still feeling confused after reading the tutorial? Let me guide you step-by-step instead.

「Naibabiji WordPress Website Building Coaching」 — From selecting a domain and purchasing hosting to installing themes and publishing posts, I「ll guide you through every step, helping you avoid detours and reach your goals directly.

👉 Learn about Website Building Coaching Service
🔒

Comments are closed

The comment function for this article is closed. If you have any questions, please feel free to contact us through other channels.

×
二维码

Scan to Follow