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.

Wrapping up

Following the process, you can add a download button on the WooCommerce product page. 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

If you like this article, please like our Facebook Page to stay connected.

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

Comments are closed.