Woocommerce Shop Page Template

admin 11/23/2021
89 Comments

WordPress themes for WooCommerce, your business, and your blog. Sign up for free Get access to customer-only benefits. Theme Store WooCommerce - the most customizable eCommerce platform for building your online business. Get Started 30 day money back guarantee; Support teams across the world. Go to WooCommerce Settings, open the Jet Woo Builder tab, and tick the Custom Shop Page and Custom Archive Product checkboxes; Go to the archive product template you created for the secondary layout and open it in the Elementor page builder. Click the “ Settings ” button at the bottom of the page and unfold the Template Settings submenu.

Setting Up Page Templates ↑ Back to top

To use a page template:

  1. Go to Pages > Add New. Or edit an existing page.
  2. Add a title to your page.
  3. Go to Page Attributes panel in the right sidebar.
  4. Select a Template


Our themes come bundled with unique page templates which add additional functionality and layouts to your pages. These are our standard page templates included in most themes:

  • Blog – Displays all your blog posts which is useful if your front page is a custom page and you want a “Blog” page.
  • Archives – Displays all categories, monthly archives, popular tags and the 30 latest posts
  • Sitemap – A sitemap that shows all your posts and pages.
  • Full Width – A full width page template without the sidebar.
  • Image Gallery– Displays your featured images and links to the post.
  • Contact Form – A page with a contact form.
  • Timeline – A page that has a clean timeline view of all your posts.

Additional page templates might be included in your theme. Read its documentation to see which ones it has.

Description

You can print out invoices and delivery notes for the WooCommerce orders. You can also edit the Company/Shop name, Company/Shop postal address and also add personal notes, conditions/policies (like a refund policy) and a footer imprint.

The plugin adds a new side panel on the order page to allow shop administrators to print out the invoice or delivery note. Registered customers can also print their order with a button that is added to the order screen.

Features

  • Print invoices and delivery notes via the side panel on the “Order Edit” page
  • Quickly print invoices and delivery notes on the “Orders” page
  • Bulk print invoices and delivery notes
  • Allow customers to print the order in the “My Account” page
  • Include a print link in customer E-Mails
  • Add a company address, a logo and many other information to the invoice and delivery note
  • Completely customize the invoice and delivery note template
  • Simple invoice numbering
  • Supports sequential order numbers
  • Supports the WooCommerce refund system
  • Intelligent invoice and delivery note template system with hooks and functions.php support

Support

Support can take place in the public support forums, where the community can help each other out.

Contributing

If you have a patch, or stumbled upon an issue with the source code that isn’t a WooCommerce issue, you can contribute this back on GitHub.

Translating

When your language is missing you can contribute a translation to the GitHub repository.

Some of our Pro plugins:

Some of our other free plugins:

Installation

Minimum Requirements

Woocommerce Shop Page Template Override

  • WooCommerce 2.2 or later
  • WordPress 4.0 or later

Automatic installation

Automatic installation is the easiest option as WordPress handles the file transfers itself and you don’t need to leave your web browser. To do an automatic install of WooCommerce, log in to your WordPress dashboard, navigate to the Plugins menu and click Add New.

In the search field type “WooCommerce Print Invoice” and click Search Plugins. Once you’ve found the plugin you can view details about it such as the the point release, rating and description. Most importantly of course, you can install it by simply clicking “Install Now”.

Manual installation

The manual installation method involves downloading the plugin and uploading it to your webserver via your favourite FTP application. The WordPress codex contains instructions on how to do this here.

FAQ

How to prevent that the Website URL and page numbers are printed?

You can find an option in the print window of your browser to hide those. This is a browser specific option that can’t be controlled by the plugin. Please read the browser help for more information.

Why are my bulk printed orders not splited to separate pages?

Your browser is to old to create the page breaks correctly. Try to update it to the latest version or use another browser.

Even though the shipping and billing address is the same, both are still shown, why?

It depends on your WooCommerce settings. Addresses are displayed the same way as on the WooCommerce account page. Only one address is printed in case you disabled alternative shipping addresses or the whole shipping. In all other cases both addresses are shown.

It prints the 404 page instead of the order, how to correct that?

Woocommerce Shop Page Template File

This is most probably due to the permalink settings. Go either to the WordPress Permalink or the WooCommerce Print Settings and save them again.

If that didn’t help, go to the WooCommerce ‘Accounts’ settings tab and make sure that for ‘My Account Page’ a page is selected.

How do I quickly change the font of the invoice and delivery note?

You can change the font with CSS. Use the wcdn_head hook and then write your own CSS code. It’s best to place the code in the functions.php file of your theme.

An example that changes the font and makes the addresses very large. Paste the code in the functions.php file of your theme:

Can I hide the prices on the delivery note?

Sure, the easiest way is to hide them with some CSS that is hooked in with wcdn_head.

An example that hides the whole price column and the totals. Paste the code in the functions.php file of your theme:

I use the receipt in my POS, can I style it?

Sure, you can style with CSS, very much the same way as the delivery note or invoice.

An example that hides the addresses. Paste the code in the functions.php file of your theme:

Is it possible to remove a field from the order info section?

Yes, use the wcdn_order_info_fields filter hook. It returns all the fields as array. Unset or rearrange the values as you like.

An example that removes the ‘Payment Method’ field. Paste the code in the functions.php file of your theme:

How can I add some more fields to the order info section?

Shop

Use the wcdn_order_info_fields filter hook. It returns all the fields as array. Read the WooCommerce documentation to learn how you get custom checkout and order fields. Tip: To get custom meta field values you will most probably need the get_post_meta( $order->id, 'your_meta_field_name', true); function and of course the your_meta_field_name.

An example that adds a ‘VAT’ and ‘Customer Number’ field to the end of the list. Paste the code in the functions.php file of your theme:

What about the product image, can I add it to the invoice and delivery note?

Yes, use the wcdn_order_item_before action hook. It allows you to add html content before the item name.

An example that adds a 40px large product image. Paste the code in the functions.php file of your theme:

How can I differentiate between invoice and delivery note through CSS?

The body tag contains a class that specifies the template type. The class can be invoice or delivery-note. You can prefix your style rules to only target one template. For example you could rise the font size for the addresses on the right side:

How do I customize the look of the invoice and delivery note?

You can use the techniques from the questions above. Or you consider the wcdn_head hook to enqueue your own stylesheet. Or for full control, copy the file style.css from woocommerce-delivery-notes/templates/print-order to yourtheme/woocommerce/print-order and start editing it.

Note: Create the woocommerce and print-order folders if they do not exist. This way your changes won’t be overridden on plugin updates.

I would like to move the logo to the bottom, put the products between the shipping and billing address and rotate it by 90 degrees, how can I do that?

Well, first try it with CSS and some filter/action hooks, maybe the questions above can help you. If this isn’t enough, you are free to edit the HTML and CSS of the template. Consider this solution only, if you really know some HTML, CSS and PHP! Most probably you want to edit the print-content.php and style.css. Copy the files from woocommerce-delivery-notes/templates/print-order to yourtheme/woocommerce/print-order and start editing them.

Note: Create the woocommerce and print-order folders if they do not exists. This way your changes won’t be overridden on plugin updates.

Is there a list of all action and filter hooks?

Unfortunately there isn’t yet. But you can look directly at the template files to see what is available.

Which template functions are available?

You can use the functions from WordPress, WooCommerce and every installed plugin or activated theme. You can find all plugin specific functions in the wcdn-template-functions.php file. In addition the $ordervariable in the template is just a normal WC_Order instance.

Can I download the order as PDF instead of printing it out?

Woocommerce shop page template download

No, this isn’t possible. Look for another plugin that can do this.

I need some more content on the order, how can I add it?

The plugin uses the exact same content as WooCommerce. If the content isn’t available in WooCommerce, then it will neither be in the delivery note and invoice. In case you have some special needs, you first have to enhance WooCommerce to solve your issue. Afterwards you can integrate the solution into the invoice and delivery note template via hooks.

How can I translate the plugin?

Upload your language file to /wp-content/languages/plugins/ (create this folder if it doesn’t exist). WordPress will then load the language. Make sure you use the same locale as in your configuration and the correct plugin locale i.e. woocommerce-delivery-notes-it_IT.mo/.po.

Please contribute your translation to include it in the distribution.

Reviews

Simple and precise, exactly what i needed for my customers. Thank you a lot. God Bless you.