WooCommerce, WordPress

How to add download button on WooCommerce product page?

Some times 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 needs to have a unique PDF file. There I am going to show how we can add download button on WooCommerce product page.

To do that we need to know about wordPress metabox. We can add additional field to post or page or any post type using metabox functionality. You can do it easily by using metaboxio or CMB2 for creating single product meta field. Where you can upload pdf file for each product when creating or editing product.

Then you can use WooCommerce hook to show DownLoad button as per your requirement. I am writing sample code to show how we can do it in real example. Please take a note that I am using metabox.io plugin for this example code. You can use CMB2 but there code will be different based on 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 product or add new product you will see some additional field for PDF upload.  In the code I have enabled multiple file upload option , You can make it simple like single file upload option. Check metabox io documentation for that. Go to your products and now edit any products there you will have option to add PDF now. For more information how to get the uploaded file url check this documentation.

Use WooCommerce Single Product hook to publish 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 button at 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 tested on shop page. I only tested on 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 still confused where to write all those code 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 perfect.

Read More...