如何为WordPress WooCommerce产品页元框按钮关联功能？

Got it, let's work through this step by step since you're new to coding. First off, I notice you're using a button field type in your Meta Box code—this won't handle file uploads on its own. Meta Box has a dedicated file field for this purpose, which will let you upload, store, and retrieve the PDF files properly. Let's adjust your code first:

Step 1: Correct the Meta Box Backend Code #

Replace your existing add_pdf_btn function with this updated version. It swaps the button type for a file field (configured specifically for PDFs) while keeping all your original settings:

function add_pdf_btn( $meta_boxes ) {
    $prefix = 'mcc-';
    $meta_boxes[] = array(
        'id' => 'uploadpdf',
        'title' => esc_html__( 'Upload PDF', 'mcc-online-generator' ),
        'post_types' => array('product' ),
        'context' => 'after_editor',
        'priority' => 'default',
        'autosave' => 'false',
        'fields' => array(
            array(
                'id' => $prefix . 'product_pdf',
                'type' => 'file', // Changed from 'button' to proper file upload field
                'name' => esc_html__( 'Upload PDF file', 'mcc-online-generator' ),
                'desc' => esc_html__( 'Upload any PDF file associated with the product here', 'mcc-online-generator' ),
                'mime_type' => 'application/pdf', // Restrict uploads to PDFs only
                'max_file_uploads' => 5, // Allow up to 5 PDFs per product
                'max_status' => 'true',
                'size' => 5, // 5MB file size limit
            ),
        ),
    );
    return $meta_boxes;
}
add_filter( 'rwmb_meta_boxes', 'add_pdf_btn' );

This will create a functional upload field in your product edit screen. You'll be able to select and upload PDFs, which will be stored in your WordPress media library, and their URLs will be saved to the meta field mcc-product_pdf.

Step 2: Display PDF Buttons on the Product Frontend #

Now we need to add code to show the PDF download buttons next to or below your "Contact Us" button on the product page. We'll use a WooCommerce hook that targets the area after the add-to-cart button (a common spot for secondary buttons like "Contact Us").

Add this code to your theme's functions.php file (or a custom plugin—custom plugins are safer for avoiding lost code during theme updates):

function display_product_pdf_buttons() {
    // Retrieve the uploaded PDF files from the meta field
    $pdfs = rwmb_meta( 'mcc-product_pdf', array( 'size' => 'full' ) );
    
    // Only show buttons if there are PDFs uploaded
    if ( ! empty( $pdfs ) ) {
        echo '<div class="product-pdf-buttons">';
        foreach ( $pdfs as $pdf ) {
            // Output a download button for each PDF
            echo '<a href="' . esc_url( $pdf['url'] ) . '" target="_blank" class="button">Download ' . esc_html( $pdf['name'] ) . '</a>';
        }
        echo '</div>';
    }
}
// Hook into the area after add-to-cart button (adjust priority if needed)
add_action( 'woocommerce_after_add_to_cart_button', 'display_product_pdf_buttons', 20 );

Quick Adjustments: #

• If your "Contact Us" button is in a different location, swap the hook for one that matches. Common alternatives include:
  • woocommerce_single_product_summary (tweak the priority number to move buttons up/down)
  • woocommerce_product_meta_end
• Match your site's button styling by adding custom CSS to your theme's custom CSS panel:

  .product-pdf-buttons .button {
      margin-left: 10px;
      /* Add your site's button colors/padding here */
  }
  

How It All Works: #

1. The updated Meta Box code creates a proper file upload field restricted to PDFs, letting you upload up to 5 files per product.
2. The frontend code pulls the stored PDF URLs using Meta Box's rwmb_meta() function, then outputs a download button for each PDF.
3. The hook places these buttons right after the add-to-cart button, which should align perfectly next to your "Contact Us" button.

内容的提问来源于stack exchange，提问作者MCC_Max