Adding a New Product to a WooCommerce shop/catalogue

1. Introduction

WooCommerce is a highly customisable shop/cataloguing plug-in.  Details on usage are provided directly via the following references

https://docs.woocommerce.com/document/managing-products/

https://docs.woocommerce.com/document/variable-product/

https://docs.woocommerce.com/document/related-products-up-sells-and-cross-sells/

https://docs.woocommerce.com/document/linking-a-project-to-a-product/

The text below is an overview which may be helpful, however if in doubt, refer to the official WooCommerce documentation

Having logged into your WooCommerce enabled WordPress CMS site the Woocommerce features/options are found in the left hand menu.

  • The WooCommerce menu item covers overall configuration and available options.
  • The Products menu item covers the shop/catalogue content.

To add or edit the products, select Products to expand the available options, followed by the Add Products menu item.

WooCommerce add new product menu add product

  • select Products to see a list of all products currently loaded into the shop/catalogue
  • select Add Product to add an individual product to the shop/catalogue will be listed.
    • note:  WooCommerce does not include bulk import by default, however import plugins are available to  enable bulk import from csv.

2. Navigating the Add Product menu item

Having selected add product you are presented with a number of fields to add product information.

WooCommerce add new product: Add new product page view

  1. Content Area: This is the main content for the product description
  2. Hover over a product to show the possible actions: edit, quick edit and view

edit: takes you to the details page for the selected product, enabling you to update product details as required.

quick edit: takes you to a subset of fields such as price, product category, product availability to enable fast management of the list of products

view: provides a preview of how the product is listed in your shop/catalogue.

3. Adding a new Product

To add a new product either click on Add Product shown at the top of the image above, or click on Add Product from the menu. You are presented with a number of field options and menus:

  1. Product Data type drop down menu: enables the product to be defined as Simple, Grouped or Variable
    • Simple Product: a self contained, single item,
    • Grouped Product: whereby the individual product is detailed, but will be sold as part of a defined group.
    • Variable Product: enables a product to be defined with variations; for example a t-shirt having different colours, or shoes with different sizes.  The product data for a variable product will automatically become the umbrella data for 2 or more additional products – the variants. Selecting Variable product automatically adds a new tab “Variations”. The screen shot below shows the options available for variations – for example product colour.
      To add the variation product, select the attributes tag, adding your variations (for example different colours), then visit the variations tab to select the colour and add the variation, giving the colour variation a unique sku:WooCommerce add new product: variable product variations
  2. Product Data management tabs menu: enables product information to be added under a fixed set of categories:  General, Inventory, Shipping, details on Linked Products and Attributes (specific product details).
    • General: set the price which you will charge for the product.WooCommerce add new product: general
    • Inventory: Add a SKU (Stock Keeping Unit) reference entry to uniquely identify your product. The Stock Status entry may be used to indicate stock level, from  “in stock” to an actual number, using the Manage Stock option.
    • WooCommerce add new product: inventory
    • shipping: Package size for shipping. Leave alone unless you wish to define the shipping box of the product.
    • WooCommerce add new product: shipping
    • Linked Products:  Linked products allow other products to be shown according to the selected item – perhaps similar items or “often bought with” items.  Linked products works in 3 ways:
      • Up-sells – enabling a more expensive product to be highlighted as an alternative to the selected product.  To add up-sell products:
        • create your product as a simple product
        • then create a new product which will incorporate these
        • under product data select simple product and the linked products tab, add products into up-sells
      • Cross-sells – a chance to sell an additional product. Bought a phone – why not add a case?
      • Grouping – set this to group the product with other items.
    • WooCommerce add new product: linked prodcts
    • Attributes:  An option to define additional custom properties.  If you specialise in a particular range of products then additional details may be appropriate. For example a painting may warrant water colour, oils, width /height and canvas.
    • WooCommerce add new product: attributes
    • Advanced: Additional options to enable a note to be sent to the customer with the purchase, to set the menu order and to enable customers to review products.

WooCommerce add new product: advanced

3. Generic product details

Accessed from the right hand panel, the generic product details are important to categorise and display your product information in the shop/catalogue

Product Categories: Enable you to associate your product with a particular category(ies).  These categories are used when displaying products.

Product Tags: A way to add an extra level of categorisation. Tags can be a great way of promoting products/website pages.

Product Image: A single large image is shown to represent the product. The image is uploaded in the usual way, either my selecting from the media images already in the library or by adding a new image from the local computer.

Product Gallery: If you wish to show more than one image then add more here.

Product Short Description: Does what it says, provides a short summary description about the product on list pages. Shown prior to clicking through to the full product details.

END

Hide WooCommerce Category Page Title

A WordPress website with the popular WooCommerce plugin shows a page title, automatically generated according to the category page being viewed.

For a WordPress website I was looking to remove the page title from view.

Hide the Category page title using CSS or programmatically with WooCommerce filters?

Often, the simple approach to hiding website content is to set the enveloping DIV’s CSS display setting to none.

The changes are made within the theme’s skin.css file. The file can be accessed from the WordPress admin view. Click on Appearance in the left menu and then select Editor. Usually the file opened is the file we’re interested in skin.css. But do check. Make your changes and click on the blue Update File button.

Looking at the page source the WooCommerce category title is a simple header, with a class of page-title, which can be used.

<h1 class=”page-title>Apples</h1>

To hide this category title with CCS the class is added to the theme’s style.css file, with the setting for the display:

.page-title{display:none;}

Dependant upon how your WordPress theme has been defined, you may need to further expand on the class path, or add important! to ensure the extra setting over rides and I’d implemented.

.page-title{display:none important!;}

Historically there have been issues regards hiding page content, making it only visible to search engines.

Most notable was the era when keywords were stuffed into a page, with many invisible to the visitor, but visible and targeting the search engine indexing robots.

From this stems the idea that hiding content should be taken with care. But note, menu items are hidden until the parent is hovered over. There are also effects such as sliders and moving imagery. These are accepted as website feature and expectations.

Looking to the future, when the new website theme has been completed and is operational. With the WooCommerce category title hidden programmatically in the functions.php file it is as a clear action, alongside of which sits appropriate commentary. With the inclusion in the CSS file of the title hiding, there is more chance of it being undone and shown, by accident on the future.

An alternative is to edit the WooCommerce template files. This can be the original plugin files, or a copy placed within the theme. A better a approach one which won’t be overwritten the next time the plugin is updated. However, occasionally there are changes to the WooCommerce templates which.

Whilst the WooCommerce category title may be hidden using CSS, I think a better approach is to do it programmatically, interacting with the WooCommerce variable values and hooks.
To hide the WooCommerce category title programmatically let’s begin by looking at the file generating the title output. The file of interest is

 /wp-content/plugins/woocommerce/templates/archive-product.php

We wish to override the section:

<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>
<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>

by adding our override code in our functions.php located within the child theme being developed:

/wp-content/themes/child-theme/functions.php

As can be seen the header has a test to check whether woocommerce_show_page_title is true of false.

To hide the title set the value to false. I added the following line in the functions.php file:

add_filter(‘woocommerce_show_page_title’,false);

I would favour editing the functions.php file over changing the CSS.

Making the changes in the functions.php file is more repeatable. A single line within the functions.php file. But the CSS approach may require further adaptation to ensure its implemented, dependent upon the wrapping of the title on the page and CSS precedence.

If you are making the edit changes via the WordPress appearance editor menu option. Making the changes to the CSS style.css file is probably your safest option. An error in your spelling may have an effect on the appearance of the website but it won’t be catastrophic, it can be really edited and corrected. However, misspelling the addition of content to the functions.php file may render your website a white screen.

Show WooCommerce Product Categories in Admin Menu

After installing the WooCommerce plugin to a WordPress website. How to add the shop categories to the menu?

Navigating to the page Appearance > Menu I was anticipating the inclusion of additional sections associated with WooCommerce.

However, looking at the WordPress menu configuration I was seeing the plain ordinary menu options.

Show WooCommerce categories in admin menu plain

To add the additional WooCommerce menu configuration options expand the Screen Options section at the top of the screen.

 

Show WooCommerce categories admin menu screen options

Within the Screen Options select the additional sections which you wish to add. I chose to add Product Categories. clicking on the check box for the option adds it to the page. Once you have made your choices close the Screen Options tab.

Show WooCommerce categories in admin menu with categories

Expand the Product Categories section and select the categories which you wish to show in the menu. Add these as you have previously for pages.