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...

System Administration

Create virtual host on XAMPP

Some time for create custom project url there we need to give a name for the project and we want that project according to their name like abc is my project and I want it to run on abc.com so when the project will be hosted on live server it will not make any difference for abc.com domain. Virtual host on XAMPP is very easy process , Just follow bellow instruction to create virtual host on XAMPP

Read More...

Django

Create virtual environment and Install Django

First go to the project directory , if you are on mac open terminal and then drug and drop your folder after writing cd to terminal like cd then drug and drop the folder and then press enter. Check current working directory by the following command “pwd”. After that create virtual environment for specific project and run following command

Read More...

Front-end Development, HTML/CSS

All about HTML meta tags

The tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable and sometime its very important to use meta tag. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Read More...

System Administration

Easy way to install Tomcat server on Ubuntu for JAVA Spring

If you are going to start JAVA Spring development or want to run JAVA spring application on a production server then you must need to prepare the server so it can run your JAVA Spring application. There several articles online but I am writing the easy way so you can just copy and paste the command and get your server ready for JAVA Spring application.

Read More...