给WooCommerce结算回执页面添加打印按钮

在WooCommerce订单吸收页面和查看订单页面添加打印按钮功效,这会将”打印页面”链接添加到WooCommerce”已收到订单”页面(收条页面)。还可将链接也添加到”查看订单”页面。客户可以在”帐户”区域的”最近订单”列表中看到”查看订单”页面。

示例1

这会在两个页面(”已收到订单”页面和客户的”查看订单”页面)的”订单详细信息”部门的正右上方添加”打印收条”链接按钮,将以下代码粘贴到functions.php文件。

  1. /**
  2.  * Add "Print receipt" link to Order Received page and View Order page
  3.  */
  4. function isa_woo_thankyou() {
  5.     echo '<a href="javascript:window.print()" rel="external nofollow"  rel="external nofollow"  id="wc-print-button">打印页面</a>';
  6. }
  7. add_action( 'woocommerce_thankyou', 'isa_woo_thankyou', 1);
  8. add_action( 'woocommerce_view_order', 'isa_woo_thankyou', 8 );

示例2

注重:示例1在”谢谢,你的订单已收到”之后和”订单详细信息”之前语句添加了打印链接按钮。在”收到的订单”页面上,可以选择将”打印收条”按钮链接移到”谢谢”上方的顶部。要将你的按钮移到那里,请使用该按钮取代上面的代码(这仍会将打印链接添加到与上面的代码相同的位置的”查看订单”页面上):

  1. function isa_get_wc_print_receipt_link() {
  2.     return '<a href="javascript:window.print()" rel="external nofollow"  rel="external nofollow"  id="wc-print-button">打印页面</a>';
  3. }
  4.  
  5. /**
  6.  * 将"打印页面"链接添加到WooCommerce查看订单页面
  7.  */
  8. function isa_woo_view_order_print_receipt() {
  9.     echo isa_get_wc_print_receipt_link();
  10. }
  11. add_action( 'woocommerce_view_order', 'isa_woo_view_order_print_receipt', 8 );
  12.  
  13. /**
  14.  * 将"打印页面"链接添加到WooCommerce收到的订单页面顶部
  15.  */
  16. function isa_woo_order_print_receipt_top( $text, $order ) {
  17.     $out = isa_get_wc_print_receipt_link();
  18.     return $out . ' ' . $text;
  19. }
  20. add_filter( 'woocommerce_thankyou_order_received_text', 'isa_woo_order_print_receipt_top', 999, 2);

设置打印收条链接的样式,使其看起来像一个按钮,添加此CSS来设置”打印回执”链接按钮的样式,使其看起来像一个通例的主题自带的功效按钮。

  1. #wc-print-button {
  2.     display: inline-block;
  3.     text-decoration:none;
  4.     margin: 8px 10px 8px 0;
  5.     padding: 5px 15px;
  6.     border:0;
  7.     color: #fff;
  8.     background-color: #6496c8;
  9.     border-radius: 17px;
  10.     box-shadow: 1px 1px 1px #888;
  11.     float: right;
  12. }
  13. #wc-print-button:hover {
  14.     opacity: .7;
  15.     color: #fff;
  16. }

通过添加针对打印版面的CSS媒体查询,可以使打印的收条看起来更悦目。以下CSS示例特定于WordPress Twenty Seventeen主题。若是使用”Twenty Seventeen主题”,此CSS将使WooCommerce打印的收条看起来更好。通过减小字体巨细,削减空缺和换行符,它可以完全适合页面。在使用这些CSS样式之前和之后,打印后的收条的前后图像请参见下文。

  1. @media print {
  2.  
  3.     body{
  4.         font-size: 11px;
  5.     }
  6.  
  7.     .site-title,
  8.     .site-description,
  9.     h2,
  10.     h3{
  11.         font-size: 12pt;
  12.     }
  13.  
  14.     .custom-header-media,
  15.     .entry-title,
  16.     #wc-print-button,
  17.     .site-description{
  18.         display: none !important;
  19.     }
  20.  
  21.     .site-branding,
  22.     .custom-header,
  23.     .page:not(.home) #content,
  24.     #content .site-content  {
  25.         margin:0 !important;
  26.         padding:0 !important;
  27.     }
  28.  
  29. }

WooCommerce订单(Twenty Seventeen主题)的印刷收条长2页。
给WooCommerce结算回执页面添加打印按钮
添加CSS @print media query后,相同WooCommerce订单的打印收条。请注重,现在收条已最小化以适合一页。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 给WooCommerce结算回执页面添加打印按钮 https://zhutizhen.com/14839.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章