I have the same requirement from the client, add a popup form before the user downloads the pdf file So I search and don’t find any properly documented post regarding this problem even the developer of “WooCommerce Cart PDF” notice this point but not implemented any option yet till today when I posted this post. Now come to the point.
Download plugin https://wordpress.org/plugins/wc-cart-pdf/
This will give you the functionality to generate cart pdf.
Customize Woocomerce Cart Plugin
We are going to edit two files given below:
- Woocomerce main plugin file cart.php where we add code for popup form and place download pdf custom button. (File path: Woocomerce -> cart –> cart.php )
- Woocomerce cart pdf plugin file cart-table.php where we add new fields to display in a pdf file that user download. (File Path: wc-cart-pdf -> templates -> cart-table.php)
First, copy the PDF template from the plugin folder wc-cart-pdf/templates/cart-table.php into your child theme folder child-theme/woocommerce/wc-cart-pdf/cart-table.php
<div class=”pdf-form”>
<div class=”modal-overlay modal-toggle”></div>
<div class=”modal-wrapper modal-transition”>
<div class=”modal-header”>
<button class=”modal-close modal-toggle”><span class=”ast-icon astra-icon-close”></span></button>
<h4 class=”modal-heading”><?php esc_html_e( ‘Enter your details below:’, ‘pdf-form’ ); ?></h4>
</div>
<div class=”modal-body”>
<div class=”modal-content”>
<form action=”<?php echo esc_url( wc_get_cart_url() );?>” method=”get” role=”form” target=”_blank”>
<div class=”form-control”>
<input type=”text” name=”quote_name” id=”quote_name” placeholder=”<?php esc_html_e( ‘Name’, ‘pdf-form’ ); ?>” required>
</div>
<div class=”form-control”>
<input type=”text” name=”quote_phone” id=”quote_phone” placeholder=”<?php esc_html_e( ‘Phone’, ‘pdf-form’ ); ?>” required>
</div>
<div class=”form-control”>
<input type=”email” name=”quote_email” id=”quote_email” placeholder=”<?php esc_html_e( ‘Email Address’, ‘pdf-form’ ); ?>” required>
</div>
<input type=”hidden” name=”cart-pdf” value=”1″ />
<?php wp_nonce_field( ‘cart-pdf’ ); ?>
<button type=”submit” class=”button”><?php esc_html_e( ‘Generate Quote’ ); ?></button>
</form>
</div>
</div>
</div>
</div>
// Button code.
<a href=”#” class=”modal-toggle cart-pdf-button button”><?php echo esc_html( get_option( ‘wc_cart_pdf_button_label’, __( ‘Download Cart as PDF’, ‘wc-cart-pdf’ ) ) ); ?></a>
So in the popup form, there are two things that are important. form action and wp_nonce_field(cart-pdf) which was added with a hidden field just above submit button. it works the same as the download pdf plugin default button link which is
https://www.sitedomain.com.br/cart/?cart-pdf=1&_wpnonce=0cb20d36d2
our form will pass field value with this URL something like this
https://www.sitedomain.com.br/cart/?quote_name=nameq"e_phone=55588888"e_email=gweb%40gmail.com&cart-pdf=1&_wpnonce=0cb20d36d2&_wp_http_referer=%2Fcarrinho%2F
this will send our custom field values to a pdf file which cart-table.php and show the field there. screenshot below
Now we are going to customize the pdf template so the new field which we get from the user after filling the popup will show on cart pdf. Yes you can customize the cart pdf by editing the cart-table.php file which I stated above.
You can show new custom fields name, phone and email by using php $_GET() function please check code below which i added inside cart-table.php
<p style=”text-align: left;float: left; width: 45%;”>
<span style=”font-weight:bold;”><?php echo $_GET[‘quote_name’]; ?></span><br>
<span style=”margin-right: 30px;”><?php echo $_GET[‘quote_phone’]; ?></span><br>
<?php echo $_GET[‘quote_email’]; ?><br>
</p>
Make sure you have added the right name attribute here. this will work perfectly, you can check live working example here
https://www.mobiloc.com.br/carrinho/
please comment for any questions.
Thanks.
Abhishek Bhandari, Full Stack Developer and Entrepreneur 