WordPress.org

Ready to get started?Download WordPress

Forums

WooCommerce - excelling eCommerce
[closed] Adding a downloads tab to physical products for tech specs (21 posts)

  1. jonny_w
    Member
    Posted 1 year ago #

    Hi,

    I know I've seen a plugin somewhere for this but cannot locate it.

    We need to be able to upload technical spec documents to product pages and a new tab is created called *downloads* which displays download links.

    Any help really appreciated.

    Thanks,

    Jon.

    http://wordpress.org/extend/plugins/woocommerce/

  2. bheadrick
    Member
    Posted 1 year ago #

    well, there's a couple ways you could do this. there's a custom tab plugin you can use

    What I did, which is a bit more seamless, is I registered a Downloads tab that displays a link to the manual if a pdf file is attached to the product. So, you don't have to manually add the link on each product.

    add_action('woocommerce_product_tab_panels', 'sd_downloads_product_panel');
    add_action( 'woocommerce_product_tabs', 'sd_downloads_product_tab', 10 );
    
    function sd_downloads_product_panel(){
        woocommerce_get_template( 'single-product/tabs/downloads.php' );
    }
    function sd_downloads_product_tab(){
        woocommerce_get_template( 'single-product/tabs/tab-downloads.php' );
    }

    Contents of the tab-downloads.php file:

    <?php
    /**
     * Downloads tab
     *
     * @author 		WooThemes
     * @package 	WooCommerce/Templates
     * @version     1.6.4
     */
    
    global $post;
    
    if ( get_product_attachments($post->ID) ) : ?>
    	<li class="downloads_tab"><a href="#tab-downloads"><?php _e('Downloads', 'woocommerce'); ?></a></li>
    <?php endif; ?>

    Contents of the Downloads tab:

    <?php
    /**
     * Downloads tab
     *
     * @author 		WooThemes
     * @package 	WooCommerce/Templates
     * @version     1.6.4
     */
    
    global $woocommerce, $post;
    
    if($attachments = get_product_attachments($post->ID)){
         ?>
    	<div class="panel entry-content" id="tab-downloads">
    
    		<?php $heading =  __('Product Downloads', 'woocommerce'); ?>
    
    		<h2><?php echo $heading; ?></h2>
    
    		<!--   add downloads content     -->
    <?php
    $manuals = $attachments['manual'];
    
    if($manuals){
        $count = 1;
    foreach($manuals as $manual){
    
        echo '<h2><a href="'.$manual->guid.'">Download Manual</a></h2>';
        $count++;
    }}
    echo '</div>';
    }
    ?>
    
    <?php //endif; ?>
  3. bheadrick
    Member
    Posted 1 year ago #

    the first box of code goes in your theme's functions.php

    the 2 files go in:
    <your-theme-folder>/woocommerce/single-product/tabs/

  4. jonny_w
    Member
    Posted 1 year ago #

    That's incredibly helpful, thank you! I'll give it a go tomorrow and let you know how I got on.

    Quick question for clarification:

    "I registered a Downloads tab that displays a link to the manual if a pdf file is attached to the product."

    Does that mean the downloads tab will only show if there is a pdf attached to the product? If so, that's even better!

    Thanks,

    Jon.

  5. bheadrick
    Member
    Posted 1 year ago #

    yup. I also had it display an html5 media player for any mp3's attached (but I figured that probably wasn't relevant for you, so I left that part out)

  6. jonny_w
    Member
    Posted 1 year ago #

    hi,

    apologies for taking so long to test this on the site and get back to you!

    I'm getting this error:

    Fatal error: Call to undefined function get_product_attachments() in /home/lemongra/public_html/gen/wp-content/plugins/woocommerce/templates/single-product/tabs/tab-downloads.php on line 12

    Do you have any ideas?

    Many thanks,

    Jon.

  7. chetan0412
    Member
    Posted 1 year ago #

  8. jonny_w
    Member
    Posted 1 year ago #

    Hi Chetan,

    Thanks for the link but with that solution, The client has to manually upload the file, copy the link, create a tab, paste in the link with the accompanying html code.

    With the above function (if we can get it working), all they have to do is upload the file to the product.

    Thanks,

    Jon.

  9. oregano
    Member
    Posted 1 year ago #

    Jon -

    Don't know if you still are trying to accomplish this, but I was today, and came up with the following solution:

    This works on WC 2.0.12 and WP 3.5.2

    I also included different file types - .xls and .doc files should also be able to be attached.

    The only change I made is I added custom icons to my theme directory in <themedirectory>/icons - the pdf one must be named pdf.png. Excel is vnd.ms-excel.png and Word is msword.png. These are all based on the MIME types of the files, FYI.

    I prefer a recognizable icon for those files to the default that WP provides.

    Only code needed is added to functions.php:

    // Add downloads tab if pdf attachment is present
    
    add_filter( 'woocommerce_product_tabs', 'cg_product_downloads_tab');
    
    function cg_product_downloads_content() {
    
      $args = array(
       'post_type' => 'attachment',
       'orderby' => 'menu_order',
       'numberposts' => -1,
       'post_status' => null,
       'post_parent' => $post->ID,
       'post_mime_type' => array( 'application/pdf','application/vnd.ms-excel','application/msword' )
      );
    
      $attachments = get_posts( $args );
    
         if ( $attachments ) {
    
            foreach ( $attachments as $attachment ) {
            // SETUP THE ATTACHMENT ICON
    		$attachment_icon = $attachment->post_mime_type;
    		$attachment_icon = explode( '/',$attachment_icon ); $attachment_icon = $attachment_icon[1];
    		$attachment_icon = '<img src="' .get_bloginfo('template_directory'). '/icons/' . $attachment_icon . '.png" alt="' . get_the_title($attachment->ID) . '" title="' . get_the_title($attachment->ID) . '" />';
    
               echo '<p><a href="';
               echo wp_get_attachment_url( $attachment->ID );
               echo '">';
               echo $attachment_icon;
               echo wp_get_attachment_image( $attachment->ID );
               echo '&nbsp;&nbsp;';
               echo apply_filters( 'the_title', $attachment->post_title );
               echo '</a>';
               echo '</p>';
              }
         }
    
    }
    
    function cg_product_downloads_tab($tabs) {
    
      $args = array(
       'post_type' => 'attachment',
       'numberposts' => -1,
       'post_status' => null,
       'post_parent' => $post->ID,
       'post_mime_type' => array( 'application/pdf','application/vnd.ms-excel','application/msword' )
      );
    
      $attachments = get_posts( $args );
    
    if ( $attachments ):
    
     $tabs['test_tab'] = array(
     'title' => __( 'Downloads', 'woocommerce' ),
     'priority' => 50,
     'callback' => 'cg_product_downloads_content'
     );
    
     endif;
    
     return $tabs;
    }

    Now you just upload a file to a product, and if it is one of the listed MIME types (pdf, word, excel) it will display on a Downloads tab in your product automagically! If there are no such attached files, the tab will not display.

    Enjoy!

  10. oregano
    Member
    Posted 1 year ago #

    Here's a version of the downloads tab that will NOT look for the custom icons - so if you just want the simple WP icon (which is the same for all 3 file types) use this version!

    // Add downloads tab if attachment is present (no custom icons)
    
    add_filter( 'woocommerce_product_tabs', 'cg_product_downloads_tab');
    
    function cg_product_downloads_content() {
    
      $args = array(
       'post_type' => 'attachment',
       'orderby' => 'menu_order',
       'numberposts' => -1,
       'post_status' => null,
       'post_parent' => $post->ID,
       'post_mime_type' => array( 'application/pdf','application/vnd.ms-excel','application/msword' )
      );
    
      $attachments = get_posts( $args );
    
         if ( $attachments ) {
    
            foreach ( $attachments as $attachment ) {
    
               echo '<p><a href="';
               echo wp_get_attachment_url( $attachment->ID );
               echo '">';
               echo wp_get_attachment_image( $attachment->ID, '', true );
               echo '&nbsp;&nbsp;';
               echo apply_filters( 'the_title', $attachment->post_title );
               echo '</a>';
               echo '</p>';
              }
         }
    
    }
    
    function cg_product_downloads_tab($tabs) {
    
      $args = array(
       'post_type' => 'attachment',
       'numberposts' => -1,
       'post_status' => null,
       'post_parent' => $post->ID,
       'post_mime_type' => array( 'application/pdf','application/vnd.ms-excel','application/msword' )
      );
    
      $attachments = get_posts( $args );
    
    if ( $attachments ):
    
     $tabs['test_tab'] = array(
     'title' => __( 'Downloads', 'woocommerce' ),
     'priority' => 50,
     'callback' => 'cg_product_downloads_content'
     );
    
     endif;
    
     return $tabs;
    }

    Hope that helps someone!

  11. hnzz
    Member
    Posted 11 months ago #

    Thnx a bunch... just what the doctor ordered!

  12. BennytheC
    Member
    Posted 10 months ago #

    Great start with the coding oregano - the big limitation I've noted from my use of it though, is that the function doesn't account for attachment relationships - it simply lists all the pdfs uploaded to your site.

    Even unattached elements show in this list - any ideas/tweaks as to how to make the function selective, e.g. check for a relationship/attachment to the post before adding the pdf to the array?

    FYI, I've tried changing the number of posts variable to 1 - doesn't list the attached pdf first unfortunately.

    Thanks in advance!

  13. OrdForm
    Member
    Posted 10 months ago #

    Hi Guys. Oreganos code works fine if you just add this line before the array:
    global $woocommerce, $product, $post;

    Now it collects only the file attached to this product.

  14. BennytheC
    Member
    Posted 10 months ago #

    Thanks for the tip OrdForm - I'll be back on this project tomorrow, so I'll give it a whirl and report back with a hopeful success story!

  15. rokfrd
    Member
    Posted 9 months ago #

    I'm trying to follow bheadrick's post above from 8 months ago with the three sections of code provided.

    Can someone please provide a more detailed step-by-step approach to using the provided code. Ultimately, I want to add PDF links to a woocommerce product and have those links automatically populate in a "File Downloads" tab.

    Sample Product Page I'm currently working with:
    http://mcintoshexperts.com/shop/processors/mx121-processor/
    My goal is to condense the Reviews and Awards tab with the Owner Resources tab into one "auto-generated" tab for this product and all future products.

    I use Dreamweaver, FileZilla, and have admin access to the site. I also have the WooCommerce Product Tab Manager Pro plugin installed. If there's an easier way to accomplish this task, your suggestions would be greatly appreciated.

    Thanks!

  16. bheadrick
    Member
    Posted 9 months ago #

    I could package it into a plugin if that makes it easier for you.

  17. rokfrd
    Member
    Posted 9 months ago #

    That'd be fantastic! When do you think you could make that available?

  18. bheadrick
    Member
    Posted 9 months ago #

    How about now?
    WooCommerce Downloads Tab

    I'm thinking about adding some options like whether to display the filetype icons and maybe even a player for audio attachments - a feature I did for another implementation.

  19. rokfrd
    Member
    Posted 9 months ago #

    I'm very excited to try this plugin. Much appreciated! If you're able to update it moving forward, I say filetype icons will be welcomed by many.

  20. rokfrd
    Member
    Posted 9 months ago #

    Just send a message via your support contact page. Please advise. Thanks

  21. rokfrd
    Member
    Posted 9 months ago #

    sent

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.