Add custom “Booking” button to WooCommerce Product

2019-01-27 00:54发布

Having trouble with this issue, any help is appreciated!

I want each of my woocommerce single product pages to have a button "Book Now" that links to a page that I created on WordPress titled "Booking Appointments".

That "Booking Appointments" page contains a "Easy Appointment" Plug in Form (that clients will fill out) that I installed which I also want to have it auto populate the product's SKU or values into one of the form inputs (from the pervious page) so that I do not have to enter it each time.

I tried a variety of methods online but its not working at all.

2条回答
趁早两清
2楼-- · 2019-01-27 00:55

Updated

This will add in single product pages a "Book Now" button linked to your "Booking Appointments" page passing through the URL the product ID, the product sku…

So the code will be:

// Add a custom button in Single product pages
add_action( 'woocommerce_single_product_summary', 'replacing_template_single_add_to_cart', 31, 0 );
function replacing_template_single_add_to_cart() {
    global $product;

    $product_id = $product->get_id();
    $sku = $product->get_sku();

    // Set below the page ID, your button text and link parameters to pass in url
    $page_id = 124;
    $button_text = __('Book Now', 'woocommerce');
    $link = get_permalink( $page_id ) . '?id=' . $product_id . '&sku=' . $sku;

    // Output your custom text
    echo '<a href="'.$link.'" class="book-now button">'.$button_text.'</a>';

}

Code goes in function.php file of your active child theme (or theme) or also in any plugin file.

In your your "Booking Appointments" page form you will be able to get the values from the URL with $_GET to populate necessary fields with an additional scripts in which you will use:

$product_id = $_GET['id'];
$sku = $_GET['sku'];

Tested and works in WooCommerce 3+.

查看更多
何必那么认真
3楼-- · 2019-01-27 01:15

At the very end of content-single-product.php you can add

<a class="button-link" href="<?php 
get_page_by_path(booking-appointments); 
?>">Booking Appointments</a>

then use .button-link to style the link to look like a button.

查看更多
登录 后发表回答