WooCommerce, WordPress

How to add download button on WooCommerce product page?

Sometimes you may require to add a button on the WooCommerce product page that allows users to download a PDF file for free without having to enter to product single page. Also, all products need to have a unique PDF file. There I am going to show how we can add a download button on the WooCommerce product page.

To do that we need to know about the wordPress meta box. We can add additional fields to posts or pages or any post type using meta box functionality. You can do it easily by using metaboxio or CMB2 for creating a single product meta field. Where you can upload pdf files for each product when creating or editing a product.

Then you can use the WooCommerce hook to show the DownLoad button as per your requirement. I am writing sample code to show how we can do it in a real example. Please take note that I am using metabox.io plugin for this example code. You can use CMB2 but their code will be different based on a plugin and you have to read their documentation from their site.

function rox-pdf-button( $meta_boxes ) {
    $prefix = 'rox-';

    $meta_boxes[] = array(
        'id' => 'pdf-btn',
        'title' => esc_html__( 'Upload PDF', 'pluginrox' ),
        'post_types' => array('product' ),
        'context' => 'advanced',
        'priority' => 'default',
        'autosave' => 'true',
        'fields' => array(
            array(
                'id' => $prefix . 'product-pdf',
                'type' => 'file_advanced',
                'name' => esc_html__( 'Upload PDF File', 'pluginrox' ),
                'desc' => esc_html__( 'Here you can upload your pdf file to show on single product page', 'pluginrox' ),
                'mime_type' => 'application/pdf',
                'max_file_uploads' => 5,
                'max_status' => 'true',
                'size' => 5,
            ),
        ),
    );

    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'rox-pdf-button' );

Make sure you have installed and activated the metabox.io plugin. Now if you go to edit a product or add a new product you will see some additional fields for PDF upload. In the code I have enabled multiple file upload options, You can make it simple like the single file upload option. Check meta box io documentation for that. Go to your products and now edit any products there you will have the option to add PDF now. For more information on how to get the uploaded file URL check this documentation.

Use the WooCommerce Single Product hook to publish the download button at your product.

Sample Coding To Show Download Button :

add_action( 'woocommerce_after_add_to_cart_form', 'rox_single_download_button', 5 );
     function rox_single_download_button() {
        $files = rwmb_meta( 'rox-product-pdf' );
        foreach ( $files as $file ) {?>
            <a href="<?php echo $file['url']; ?>"><?php echo $file['name']; ?></a>
        <?php }
}

If you want to add a button on the product archive page / WooCommerce shop page then you have to apply on product shop or loop hook. You can try the bellow code, Let me know if it works or not as I did not test it on the shop page. I only tested on a single page but it should work.

add_action('woocommerce_after_shop_loop_item', 'rox_loop_download_button', 5);
function rox_loop_download_button() {
global $product;
$product_id = $product->get_id();
$files = rwmb_meta('rox-product-pdf', '', $product_id);
foreach ($files

as $file) { ?>
        <a href="<?php echo $file['url']; ?>"><?php echo $file['name']; ?></a>
<?php }
}

If you are still confused about where to write all those codes please go to your WordPress root directory then wp-content/themes and go to your active theme directory, there you will find a file named functions.php. Go to the bottom and copy-paste all the code above. If the plugin is activated and all is good then it will be working perfectly.