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

Many foreign trade website building friends use WooCommerce as a plug-in to build product systems, while some 2b websites want to add a contact button or inquiry button on the product interface, which has been introduced to you before Several inquiry button plug-ins , this article will share with you How to add a custom button under the shopping cart button of WooCommerce with code 。

The effect picture is as above. Add a button below the shopping cart button to customize the button text and links.

usage method:

Copy the following code and paste it into the function file functions.php of your theme

 add_action( 'woocommerce_single_product_summary', 'my_extra_button_on_product_page', 30 ); function my_extra_button_on_product_page() { global $product; echo '<a class="naibabutton" href=" https://blog.naibabiji.com ">Contact us immediately</a>'; }

After saving, you can see a "Contact us immediately" button in the foreground of your website. But there is no style yet.

You can customize the style of. naibabutton in the theme's CSS. If you can't, just copy the following code and add it.

 .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; }

Too lazy to study? Pay to help you solve the problem. Contact me

Add an Amazon jump button

Many foreign trade enterprises have Amazon stores, so they hope to add a button to jump to Amazon stores on the product introduction page of their own independent station. There are three ways to achieve this function.

1. Insert a button when filling in the short description of the product.

2. Add a code similar to the inquiry button shared above.

3. Through plug-ins.

Code method:

Here I use the custom field method to add. First, add a custom field on the product page of woocommerce, such as amazon_link, and then fill in the Amazon URL in the value of amazon_link.

Then add the following code to the theme file, which can be used directly Code Snippets Add plug-ins.

 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 '<a class="amazon-button" href="'.get_post_meta(get_the_ID(), 'amazon_link', true).'" target="_blank">Buy on Amazon</a>'; } } add_action( 'wp_head', function () { ?> <style> .product-desc li:before { content: "\f112"; font: normal normal normal 16px/1 LineAwesome; color: #f0494c; } .product-desc li { list-style: none; padding-bottom: 7px; } .product-desc ul { padding-left: 0px; } </style> <? php } );

After saving, when you fill in the Amazon URL product, an Amazon button will be added to the foreground, and the product that is not added will not be displayed.

Plug in mode:

[vk-content]

Install one Quick Buy Now Button for WooCommerce The corresponding settings box will appear when you edit the woocommerce product.

Fill in buy on Amazon yourself, then jump to the customized page, enter the website below, and a button will appear to jump to Amazon after the product is released. If you don't change the link yourself, you add a quick purchase button.

[/vk-content]