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 some of our WooCommerce related topics.

How to add “Terms and Conditions” to the Checkout page on Woocommerce

How to Setup Shipping Classes in WooCommerce

How to setup Woo-commerce Shipping Zones

You Might Also Like

8 Comments

  1. 1
  2. 4

    When I’m trying to click on the uploaded file, on my product page, it redirects me to a Forbidden page with the next message: You don’t have permission to access /wp-content/uploads/woocommerce_uploads/2020/02/Sample.csv on this server.

    I want access to the file to be public. Do you have any recommendations?

  3. 7

    Hi Niamul,
    Please how can I replace the default “Add to cart” button with a “Download Button” to Members upon login and show “Add to Cart” Button to non members and direct them to checkout

    • 8

      Hi,
      Thanks for reading my blog. If you want to do that you have to override the filter woocommerce_add_to_cart with conditions like if the user logged in then it will show download button which will have files uploaded from backend and if user not a registered member then show add to cart. Its not so easy but you need to be advance coder for that. You can send service request at https://pixelaar.com/contact-us/ and I think it will be very low cost for you or you can knock me directly with the following skype ID niamulhasan23.
      Thanks

Leave a Reply

Your email address will not be published. Required fields are marked *