PDF download

Hello, just a follow up?

Hello @gooddane,

You could use the following code to achieve this you’d just need to add the link to your pdf and it will work. You will also need to enqueue this code to work on the single product page and target your product tab by slug.

Replace the download url with the url of your pdf. Replace the “selector-goes-here” with the selector of the <li> element that is wrapping your link. You can find this by right clicking, choosing inspect and then copying the ID of the li element. Make sure that you include the # in front of the ID like in the example as that is how you target an element by id.

If you don’t know how to implement custom javascript there are plugins that you could use to implement this however inserting Javascript through a plugin brings security vulnerabilities. I would do research before implementing either way so you know the pros and cons of however you choose to implement this code.
jQuery( document ).ready(function( $ ){
let tabsFunction = function( e ) {

$( ‘#tab-SELECTOR-GOES-HERE’ ).children(‘a’).attr(‘href’, ‘PDF URL GOES HERE’).attr(‘download’, true)

var $tab = $( this );

if ( $tab.attr(‘download’) ) {
return;
}
e.preventDefault();

var $tabs_wrapper = $tab.closest( ‘.wc-tabs-wrapper, .woocommerce-tabs’ );
var $tabs = $tabs_wrapper.find( ‘.wc-tabs, ul.tabs’ );

$tabs.find( ‘li’ ).removeClass( ‘active’ );
$tabs_wrapper.find( ‘.wc-tab, .panel:not(.panel .panel)’ ).hide();

$tab.closest( ‘li’ ).addClass( ‘active’ );
$tabs_wrapper.find( $tab.attr( ‘href’ ) ).show();
};
let allClickEvents = $._data( $(“body”)[0], “events” ).click;

allClickEvents.forEach( function(clicking) {
if ( typeof clicking.selector !== ‘undefined’ && clicking.selector === ‘.wc-tabs li a, ul.tabs li a’ ) {
clicking.handler = tabsFunction
}
} );
});

Hello! Thank you so much for your reply.

I am a bit lost with what to do and where exactly to do it.

I have added the javascript, but not sure what to do next. Is the selected tab supposed to look different on the backend then?

Here’s the website I’m trying to implement it on:
https://sirenebathware.com/product/gracelynn-basin/

Hi @gooddane,

The tab will not look different in the backend.

#tab-SELECTOR-GOES-HERE = The class of the li you want to make a link.
PDF URL GOES HERE = The link to your PDF.

$( ‘#tab-SELECTOR-GOES-HERE’ ).children(‘a’).attr(‘href’, ‘PDF URL GOES HERE’).attr(‘download’, true)

This will make 1 tab to link to 1 pdf, it won’t allow you to add PDFs as you like in the backend.

IMO, I don’t think this will be great UI/UX-wise, because when a user clicks on a tab they expect more information, not a file to start downloading. I think it would be much better if you made a saved tab with more infomation about the PDF itself and the download they can choose to download if they want to.

Stay well,
-Tracy

Hi Tracy,

Hope you are well. Thank you for the reply, however, I am still struggling trying to add/fix this. All products have different download URL’s and these different URL’s need to be added to the different products.

Although I agree with you re UX/UI, I have been requested to update the site to do this.

Keep well ??

Hey @gooddane,

If you need to have dynamic urls for each product you could create a meta field for it on your product.

You can follow this tutorial to add custom fields to your products:
https://pluginrepublic.com/add-custom-fields-woocommerce-product/

Then using the code above you would enqueue your javascript and localize it with the current posts post meta.

add_action( 'wp_enqueue_scripts', 'enqueue_custom_product_downloads' );

function enqueue_custom_product_downloads() {
    $current_post_type = get_post_type();

    if ( 'product' !== $current_post_type ) {
        return;
    }

    // Setup script attributes.
    $handle         = 'yikes-custom-download-js';
    $path           = get_template_directory_uri() . '/js/yikes-custom-download-pdf.js';
    $dependencies   = array( 'jQuery' );
    $version        = '1.0.0';
    $show_in_footer = true;

    // Adds script to the page.
    wp_enqueue_script(
        $handle,
        $path,
        $dependencies,
        $version,
        $show_in_footer
    );
    // Adds dynamic variables.
    global $post;

    $download_url = get_post_meta( $post->ID, 'yikes_pdf_download', true );

    wp_localize_script(
        $handle,
        'yikesCustomDownload',
        array(
            'downloadUrl' => $download_url,
         )
    );
}

This is hinging on naming your meta field ‘yikes_pdf_download’ so make sure you name it that or the code won’t work.

The Javascript should be updated like so:

jQuery( document ).ready(function( $ ){
    let tabsFunction = function( e ) {
    let downloadUrl = window.yikesCustomDownload.downloadUrl;

       $( ‘#tab-download-spec-sheet’ ).children(‘a’).attr(‘href’, downloadUrl ).attr(‘download’, true)

       var $tab = $( this );

       if ( $tab.attr(‘download’) ) {
           return;
       }
       e.preventDefault();

       var $tabs_wrapper = $tab.closest( ‘.wc-tabs-wrapper, .woocommerce-tabs’ );
       var $tabs = $tabs_wrapper.find( ‘.wc-tabs, ul.tabs’ );

       $tabs.find( ‘li’ ).removeClass( ‘active’ );
       $tabs_wrapper.find( ‘.wc-tab, .panel:not(.panel .panel)’ ).hide();

        $tab.closest( ‘li’ ).addClass( ‘active’ );
        $tabs_wrapper.find( $tab.attr( ‘href’ ) ).show();
    };
    let allClickEvents = $._data( $(“body”)[0], “events” ).click;

    allClickEvents.forEach( function(clicking) {
        if ( typeof clicking.selector !== ‘undefined’ && clicking.selector === ‘.wc-tabs li a, ul.tabs li a’ ) {
            clicking.handler = tabsFunction
        }
    } );
});

You’ll need to put this JS in your theme, inside a folder named ‘js’. If you look at this line from the first code:
$path = get_template_directory_uri() . '/js/yikes-custom-download-pdf.js';

That’s how I’m telling WordPress where the file is, the first part is just a function that locates the current theme. So as long as you put it in your theme you can update the second part with whatever the location is. The JS can be copy and pasted into a file named yikes-custom-download-pdf.js.

I hope this helps!

Cheers,
Freddie

I should also mention that the first code snippet with php should be added to your theme or child themes functions.php file.