Udemyにホームページをカンタンに変更できるElementorの講座を新しくリリースしました。

WooCommerce(WordPress)で納品書・領収書を自動的に作成したいならWooCommercePrintInvoice&DeliveryNote がおすすめです

SHARE

島村竜一

こんにちは 見込み客を集める予約システムの専門家の島村竜一です。
今回は「WooCommerce(WordPress)で納品書・領収書・請求書作成」に便利なPlugin WooCommercePrintInvoice&DeliveryNote のご紹介です。 自動的に納品書を作ってくれるのものですごく便利です。 今回はPluginのご紹介とカスマイズをご紹介します。

島村竜一

こんにちは 今日はトコトコと某大学に遊びにいってきました。 目的はランチと本を買いにいくことでした。 大学内部になる某チェーン店のうどん屋さんなどは定価ですが、それ以外は安い定食なので手っ取り早くお昼をすますときに大学に潜入しています。
この記事はこんな方におすすめです
  1. ホームページでお金のやりとりをしたあと別途領収書を作るのが億劫な方

なにげに領収書を作るのって手間ですよね

ホームページで売上があがるのはうれしいことですけど、 領収書作るといった事務作業はなにげにめんどくさいですよね。 そんな方におすすめしたいのがこのPlugin 「WooCommerce Print Invoice & Delivery Note」です。
WooCommerce Print Invoice & Delivery Note
「WooCommerce Print Invoice & Delivery Note」を今回カスマイズしたのでそのやり方をご紹介しますね。

WooCommerce Print Invoice & Delivery Noteだけで領収書・請求書・納品書ができます


今回ご紹介するPluginは「WooCommerce Print Invoice & Delivery Note」になります。 このPluginを入れるとホームページ上で買い物をされたお客様が自分で領収書の発行ができるようになります。

めんどくさい事務作業から開放されるのでおすすめのPluginの一つです。

Pluginをいれたままだとこのような納品書が出力されます。





Screenshot

ちょっとこのままだと寂しいので色々加工してこのような形にしました。

Screenshot

今回カスタマイズはこちらのサイトを参考にさせていただきました。 参考というよりはほぼコピーをさせていただきました。
WooCommerceで納品書・領収書を出力。本当に使える無料プラグインはこれ

島村竜一

「しめは八ヶ岳に住んでいます」さんに感謝です。 ありがとうございます。

領収書などのデザイン方法

WooCommerceをインストールしたフォルダー/wp-content/plugins/woocommerce-delivery-notes/templates

print-content.php
style.css
上記の2ファイルが領収書などの書類のレイアウトの設定方法になります。

これをデザインした後 WooCommerceをインストールしたフォルダー/themes/woocommerce/print-order にコピーします。

設定したCSSとphpの記述をこちらに掲載します。

島村竜一

「しめは八ヶ岳に住んでいます」さんに感謝です。 ありがとうございます。
参考 WooCommerceで納品書・領収書を出力。本当に使える無料プラグインはこれしめは八ヶ岳に住んでいます 

<?php
/**
 * Print order content. Copy this file to your themes
 * directory /woocommerce/print-order to customize it.
 *
 * @package WooCommerce Print Invoice & Delivery Note/Templates
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
?>

<div class="printdate"><p class="neko">発行日：<?php echo date("Y年m月d日"); ?></p></div>



<div class="document_title">
  <h1><?php wcdn_document_title(); ?></h1>
</div>



<div class="order-addresses<?php if( !wcdn_has_shipping_address( $order ) ) : ?> no-shipping-address<?php endif; ?>">
	<div class="billing-address">
		<h3><?php _e( 'Billing Address', 'woocommerce-delivery-notes' ); ?></h3>
		<address>
	<?php if( !$order->get_formatted_billing_address() ) _e( 'N/A', 'woocommerce-delivery-notes' ); else echo apply_filters( 'wcdn_address_billing', $order->get_formatted_billing_address(), $order ); ?>
		</address>
		</div>
		<div class="shipping-address">
			<h3><?php _e( 'Shipping Address', 'woocommerce-delivery-notes' ); ?></h3>
			<address>
			<?php if( !$order->get_formatted_shipping_address() ) _e( 'N/A', 'woocommerce-delivery-notes' ); else echo apply_filters( 'wcdn_address_shipping', $order->get_formatted_shipping_address(), $order ); ?>
			</address>
		</div>
		<?php do_action( 'wcdn_after_addresses', $order ); ?>
		<div class="order-branding">
			<div class="company-logo">
				<?php if( wcdn_get_company_logo_id() ) : ?><?php wcdn_company_logo(); ?><?php endif; ?>
			</div>
			<div class="company-info">
				<?php if( !wcdn_get_company_logo_id() ) : ?><h3 class="company-name"><?php wcdn_company_name(); ?></h><?php endif; ?>
				<div class="company-address"><?php wcdn_company_info(); ?></div>
			</div>
				<?php do_action( 'wcdn_after_branding', $order ); ?>
		</div><!-- .order-branding -->
		</div><!-- .order-addresses -->
		<div class="order-thanks">
			<?php wcdn_personal_notes(); ?>
			<?php do_action( 'wcdn_after_thanks', $order ); ?>
		</div><!-- .order-thanks -->
		<div class="section_title">
			<h2>お買い上げ明細</h2>
		</div>

		<div class="order-info">
		<h2><?php wcdn_document_title(); ?></h2>

		<ul class="info-list">
			<?php
			$fields = apply_filters( 'wcdn_order_info_fields', wcdn_get_order_info( $order ), $order );
			?>
			<?php foreach ( $fields as $field ) : ?>
				<li>
					<strong><?php echo wp_kses_post( apply_filters( 'wcdn_order_info_name', $field['label'], $field ) ); ?></strong>
					<span><?php echo wp_kses_post( apply_filters( 'wcdn_order_info_content', $field['value'], $field ) ); ?></span>
				</li>
			<?php endforeach; ?>
		</ul>

		<?php do_action( 'wcdn_after_info', $order ); ?>
		</div><!-- .order-info -->


		<div class="order-items">
		<table>
			<thead>
				<tr>
					<th class="head-name"><span><?php esc_attr_e( 'Product', 'woocommerce-delivery-notes' ); ?></span></th>
					<th class="head-item-price"><span><?php esc_attr_e( 'Price', 'woocommerce-delivery-notes' ); ?></span></th>
					<th class="head-quantity"><span><?php esc_attr_e( 'Quantity', 'woocommerce-delivery-notes' ); ?></span></th>
					<th class="head-price"><span><?php esc_attr_e( 'Total', 'woocommerce-delivery-notes' ); ?></span></th>
				</tr>
			</thead>

			<tbody>
				<?php

				if ( count( $order->get_items() ) > 0 ) :
					?>
					<?php foreach ( $order->get_items() as $item ) : ?>

						<?php
							$product = apply_filters( 'wcdn_order_item_product', $order->get_product_from_item( $item ), $item );

						if ( version_compare( get_option( 'woocommerce_version' ), '3.0.0', '>=' ) ) {
							$item_meta = new WC_Order_Item_Product( $item['item_meta'], $product );
						} else {
							$item_meta = new WC_Order_Item_Meta( $item['item_meta'], $product );
						}
						?>
						<tr>
							<td class="product-name">
								<?php do_action( 'wcdn_order_item_before', $product, $order ); ?>
								<span class="name">
								<?php

								$addon_name  = $item->get_meta( '_wc_pao_addon_name', true );
								$addon_value = $item->get_meta( '_wc_pao_addon_value', true );
								$is_addon    = ! empty( $addon_value );

								if ( $is_addon ) { // Displaying options of product addon.
									$addon_html = '<div class="wc-pao-order-item-name">' . esc_html( $addon_name ) . '</div><div class="wc-pao-order-item-value">' . esc_html( $addon_value ) . '</div>
									</div>';

									echo wp_kses_post( $addon_html );
								} else {

									$product_id   = $item['product_id'];
									$prod_name    = get_post( $product_id );
									$product_name = $prod_name->post_title;

									echo wp_kses_post( apply_filters( 'wcdn_order_item_name', $product_name, $item ) );
									?>
									</span>

									<?php

									if ( version_compare( get_option( 'woocommerce_version' ), '3.0.0', '>=' ) ) {
										if ( isset( $item['variation_id'] ) && 0 !== $item['variation_id'] ) {
											$variation = wc_get_product( $item['product_id'] );
											foreach ( $item['item_meta'] as $key => $value ) {
												if ( ! ( 0 === strpos( $key, '_' ) ) ) {
													if ( is_array( $value ) ) {
														continue;
													}
													$term_wp        = get_term_by( 'slug', $value, $key );
													$attribute_name = wc_attribute_label( $key, $variation );
													if ( isset( $term_wp->name ) ) {
														echo '<br>' . wp_kses_post( $attribute_name . ':' . $term_wp->name );
													} else {
														echo '<br>' . wp_kses_post( $attribute_name . ':' . $value );
													}
												}
											}
										} else {
											foreach ( $item['item_meta'] as $key => $value ) {
												if ( ! ( 0 === strpos( $key, '_' ) ) ) {
													if ( is_array( $value ) ) {
														continue;
													}
													echo '<br>' . wp_kses_post( $key . ':' . $value );
												}
											}
										}
									} else {
										$item_meta_new = new WC_Order_Item_Meta( $item['item_meta'], $product );
										$item_meta_new->display();

									}
									?>
									<br>
									<dl class="extras">
										<?php if ( $product && $product->exists() && $product->is_downloadable() && $order->is_download_permitted() ) : ?>

											<dt><?php esc_attr_e( 'Download:', 'woocommerce-delivery-notes' ); ?></dt>
											<dd>
											<?php
											// translators: files count.
											printf( esc_attr_e( '%s Files', 'woocommerce-delivery-notes' ), count( $item->get_item_downloads() ) );
											?>
											</dd>

										<?php endif; ?>

										<?php

											$fields = apply_filters( 'wcdn_order_item_fields', array(), $product, $order );

										foreach ( $fields as $field ) :
											?>

											<dt><?php echo esc_html( $field['label'] ); ?></dt>
											<dd><?php echo esc_html( $field['value'] ); ?></dd>

										<?php endforeach; ?>
									</dl>
								<?php } ?>
							</td>
							<td class="product-item-price">
								<span><?php echo wp_kses_post( wcdn_get_formatted_item_price( $order, $item ) ); ?></span>
							</td>
							<td class="product-quantity">
								<span><?php echo esc_attr( apply_filters( 'wcdn_order_item_quantity', $item['qty'], $item ) ); ?></span>
							</td>
							<td class="product-price">
								<span><?php echo wp_kses_post( $order->get_formatted_line_subtotal( $item ) ); ?></span>
							</td>
						</tr>
					<?php endforeach; ?>
				<?php endif; ?>
			</tbody>

			<tfoot>
				<?php
				$totals_arr = $order->get_order_item_totals();
				if ( $totals_arr ) :

					foreach ( $totals_arr as $total ) :
						?>
						<tr>
							<td class="total-name"><span><?php echo wp_kses_post( $total['label'] ); ?></span></td>
							<td class="total-item-price"></td>
							<td class="total-quantity"></td>
							<td class="total-price"><span><?php echo wp_kses_post( $total['value'] ); ?></span></td>
						</tr>
					<?php endforeach; ?>
				<?php endif; ?>
			</tfoot>
		</table>

		<?php do_action( 'wcdn_after_items', $order ); ?>
	</div><!-- .order-items -->

	<div class="order-notes">
		<?php if ( wcdn_has_customer_notes( $order ) ) : ?>
			<h4><?php esc_attr_e( 'Customer Note', 'woocommerce-delivery-notes' ); ?></h4>
			<?php wcdn_customer_notes( $order ); ?>
		<?php endif; ?>

		<?php do_action( 'wcdn_after_notes', $order ); ?>
	</div><!-- .order-notes -->

<div class="order-colophon">
<div class="colophon-policies">
<?php wcdn_policies_conditions(); ?>
</div>
<div class="colophon-imprint">
<?php wcdn_imprint(); ?>
</div>
<?php do_action( 'wcdn_after_colophon', $order ); ?>
</div><!-- .order-colophon -->

------------------------------------------*/
address {
	margin-bottom: 40px;
}


.printdate > p {
text-align:right;

}


.document_title {
display: block;
border-bottom: 1px solid #111;
margin-bottom: 30px;
}

.section_title {
display: block;
border-bottom: 1px solid #111;
margin-bottom: 3px;
}

.document_title > h1 {
margin-bottom: 20px;
letter-spacing: 0.5em;
font-size: 2em;
font-weight: 100;
}

.section_title > h2 {
margin-bottom: 20px;
letter-spacing: 0.2em;
font-size: 1.3em;
font-weight: 100;
}

.order-addresses{
margin-bottom: 2em;
}

.billing-address,
.shipping-address {
width: 60%;
}

.billing-address >h3 {
margin-bottom:5px;
}

.order-info ul {
border-top: none;
}
.order-info li {
padding: 0.2em;
}
.order-thanks {
text-align: center;
margin-left:0;
margin-bottom: 30px;
}
.colophon-policies {
text-align:right;
}

島村竜一

CSSとPHPの変更は本番環境ではいきなり行わず必ずテスト環境で検証してから行ってくださいね。

日本語の設定方法

もともとが英語のPluginですが日本語対応されています。
WooCommerceをインストールしたフォルダー/wp-content/plugins/woocommerce-delivery-notes/languages にあるwoocommerce-delivery-notes-ja.poが翻訳ファイルになります。

日本語訳を直した場合はwoocommerce-delivery-notes-ja.poを修正してください。
こちらのファイルを修正するためにpoeditが必要になります。
poeditは下記のサイトからダウンロードできます。
参考 poeditpoedit

WooCommerceの設定方法

設定画面は「WooCommerce」⇒「設定」⇒「Print Receipt」の場所になります。 注意：キャプチャーの画面は「領収書印刷」となっていますがこれは翻訳ファイルに「Print Receipt」を「領収書印刷」と翻訳するという設定にしているためです。 Screenshot Screenshot この画面に入力された情報が領収書などの書類に自動的に入力されるものになります。
「Shop Logo」にはショップのロゴの画像をいれるか、ハンコの画像をいれるといいです。

「店舗名」は会社名を入力してください。

「店舗住所」には、住所、メールアドレスなど領収書を発行する側の連絡先を入力してください。

Screenshot 「結びの言葉」は振込先情報を入力します。

「ポリシー」には、プライバシーポリシーの情報を入力します。

「フッター」は出力される書類の下部に表示されるので好きなものを入力してくださいね。

Screenshot
Show “Print Invoice” buttonのチェックボタンを外しました。
Invoiceとは請求書のことなので今回は不要なのでチェックしませんでした。
「注文の表示」のページに印刷ボタンを表示 Show print buttons on the “My Account” page

上記はチェックをいれて使えるようにいたしました。 ただここは注意が必要になります。入金前にも使えるようになるためここは仕様を検討するようにしてください。

まとめ：WooCommerce(WordPress)で領収書・請求書・納品書作成ならWooCommerce Print Invoice & Delivery Note一択です

WooCommerceには様々な領収書・請求書・納品書Pluginがありますが文字化けせずに使えるPluginはこれ一択です。

しかもデザインがhtmlとCSSだけで変更ができるのがいいですよね。

島村竜一

予約システムに組み込んでみましたが問題なく動いたのでホッとしています。 明日はリマインダーメールPlugin の検証をします。

島村竜一

リマインダーメールPluginというのはカートに入れたけど買わなかった人、買った後にある一定期間後にメールを送る事ができる機能です。詳しくは次回のブログにて書きますね。
ここまで読んでくださってありがとうございました。 ではまた次のブログでお逢いしましょう

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）

前の記事

今こんな予約システムを作っています。もうすぐリリース予定

次の記事

最初のメール送信時に反応がなくてもあきらめてはいけない。メルマ…