Adding Product Images and Galleries

Adding Product Images and Galleries

Adding Product Images and Galleries

Images are measured and set in pixels, for example, 800 x 800 pixels. Note that the first number is the width and the second is height.

We recommend organizing your images in a folder offline and keeping a backup in case you need them in the future or mistakenly alter one and wish to revert to the original.

Types of images

WooCommerce uses three types of Product Images for different locations and purposes:

  • Single Product Image is the largest image and refers to the main/featured image on your individual product details page.
  • Catalog Images are medium-sized images appearing in product loops, such as the Shop page, Product Category pages, Related Products, Up-sells, and Cross-sells.
  • Product thumbnails are the smallest images used in the Cart, Widgets, and (optional) Gallery thumbnails underneath the Single Product Image.
Adding Product Images and Galleries

Adding product images and galleries are options available on the right-hand side when adding or editing a product in your store from WooCommerce > Products.

Product image

The Product Image is the main image for your product and is reused in different sizes across your store.

Select Set Product Image.

Select an existing image in your Media Library or Upload a new one.

Remove and Edit the product image if you’d like to change it, as needed.

Adding, removing and editing a product image is done in the same way as featured images for posts and pages.

Product Galleries

Add images to the Product Gallery

Product galleries display all images attached to a product through the Product Gallery meta box.

Create a Product Gallery using the same method as adding a Product Image, but using the Product Gallery meta box.

Reorder images in the product gallery

Images in the product gallery can be re-ordered easily via drag and drop. Simply reorder your images by moving them around.

Remove images from the product gallery

To remove an image from the product gallery, hover over the image and click on the red “x.”

Adding Product Images and Galleries

Managing Product Categories and Tags

Managing Product Categories and Tags

Product categories

Product categories are the primary way to group products with similar features. You can also add subcategories if desired.

For example, if you sell clothing, you might have “t-shirts”, “hoodies” and “pants” as categories.

How to add/edit product categories

Categories are managed from the Products > Categories screen.

Similar to categories on your posts in WordPress, you can add, delete, and edit product categories.

  • Add a Name.
  • Add a Slug (optional); this is the URL-friendly version of the name.
  • Choose a Parent if this is a subcategory.
  • Enter a Description (optional); some themes display this.
  • Choose the Display type. Decide what is shown on the category’s landing page. “Standard” uses your theme’s default. “Subcategories” will display only the subcategories. “Products” only displays products. “Both” will display subcategories and products below that.
  • Upload/Add Image (optional);  Some themes have pages where product category images are displayed, so this is a good idea.

Storefront by default displays product category images on the homepage template.

Categories can also be reordered by dragging and dropping – this order is used by default on the front end whenever the categories are listed. This includes both widgets and the category/subcategory views on product pages.

Since WooCommerce 3.3, there will be a default category. Every product must be assigned to a category, so the default category will be automatically assigned if the product is not assigned to any other category. By default, this category will be named “Uncategorized” and can not be deleted. However, you can rename the category. You can also switch the default category using the row actions underneath the category name, then the “Uncategorized” category can be deleted as it is no longer the default.

Make default category

When you add a new product via Products > Add Product, you can select this new product category from the list.

Alternatively, you can go to Products > Add Product directly, and select Add New Product Category.

Product tags

What are product tags?

Product tags are another way to relate products to each other, next to product categories. Contrary to categories, there is no hierarchy in tags; so there are no “subtags.”

For example, if you sell clothing, and you have a lot of cat prints, you could make a tag for “cat.” Then add that tag to the menu or sidebar so cat lovers can easily find all t-shirts, hoodies, and pants with cat prints.

How to add/edit product tags

Tags can be added similarly to adding product categories and work in exactly the same way as post tags. See the WordPress.org Codex for more information.

The taxonomy is product_tag.

Adding Product Images and Galleries

Adding and Managing Products

Adding and Managing Products

Adding a product

Before adding your first product, let’s get familiar with how product categories, tags, and attributes work.

Product Categories

Product categories and tags work in much the same way as normal categories and tags you have when writing posts in WordPress. They can be created, edited, and selected at any time. This can be done when you first create a product or come back and edit it or the category/tag specifically.

Product Types

With attributes and categories set up and stock management configured, we can begin adding products. When adding a product, the first thing to decide is what type of product it is.

  • Simple – covers the vast majority of any products you may sell. Simple products are shipped and have no options. For example, a book.
  • Grouped – a collection of related products that can be purchased individually and only consist of simple products. For example, a set of six drinking glasses.
  • Virtual – one that doesn’t require shipping. For example, a service. Enabling this, disables all shipping related fields such as shipping dimensions. A virtual product will also not trigger the shipping calculator in cart and checkout.
  • Downloadable – activates additional fields where you can provide a downloadable file. After a successful purchase, customers are given a downloadable file as a link in the order notification email. This is suitable, for example, for a digital album, PDF magazine, or photo.
  • External or Affiliate – one that you list and describe on your website but is sold elsewhere.
  • Variable – a product with variations, each of which may have a different SKU, price, stock option, etc. For example, a t-shirt available in different colors and/or sizes.
  • Other types are often added by extensions. For example, WooCommerce Subscriptions adds new product types as does WooCommerce Bookings.
Adding a simple product

Adding a Simple product is similar to writing a post in WordPress.

  1. Go to WooCommerce > Products > Add Product. You then have a familiar interface and should immediately feel at home.
  2. Enter a product Title and Description.
  3. Go to the Product Data panel, and select downloadable (digital) or virtual (service) if applicable.
WooCommerce Add Product - Familiar Interface

Note: Virtual products don’t require shipping — an order with virtual products won’t calculate shipping costs.

Product data

The Product Data meta box is where the majority of important data is added for your products.

WooCommerce Simple Product - General Tab

Product data is added in this panel

General section

  • SKU – Stock keep unit (SKU) tracks products. Must be unique and should be formatted so it does not match any post IDs. For example, post IDs are numbers so a SKU could be WS01. That could stand for WooShirt 01.
  • Price
    • Regular Price – Item’s normal/regular price.
    • Sale Price – Item’s discounted price that can then be scheduled for certain date ranges. The sale expires at 11:59pm of the specified end date.

Inventory section

The inventory section allows you to manage stock for the product individually and define whether to allow back orders and more. It enables you to sell products and allow customers to add them to the cart to buy.

Enable Stock Management must be selected in Products Inventory Settings; otherwise, only the ‘Stock status’ option is visible in the Product Data Inventory box.

Options when stock management at product level is disabled. You are responsible for updating the Stock Status.

Options when stock management at product level is enabled.

  • Enter the Stock Quantity, and WooCommerce auto-manages inventory and auto-updatesStock Status as Stock, Out of Stock or On Backorder.
  • Select whether to Allow Backorders.
  • Low stock threshold – Enter a number upon which you are notified.
  • Tick the Sold Individually box to limit the product to one per order.

Shipping section

  • Weight – Weight of the item.
  • Dimensions – Length, width and height for the item.
  • Shipping Class – Shipping classes are used by certain shipping methods to group similar products.

Linked Products section

Using up-sells and cross-sells, you can cross promote your products. They can be added by searching for a particular product and selecting the product from the dropdown list:

WooCommerce Simple Product - Linked Products Tab

After adding, they are listed in the input field:

WooCommerce Simple Product - Linked Product Added

Up-sells are displayed on the product details page. These are products that you may wish to encourage users to upgrade, based on the product they are currently viewing. For example, if the user is viewing the coffee product listing page, you may want to display tea kettles on that same page as an up-sell.

WooCommerce Product Up-Sells

Cross-sells are products that are displayed with the cart and related to the user’s cart contents. As an example, if the user adds a Nintendo DS to their cart, you may want to suggest they purchase a spare stylus when they arrive at the cart page.

Grouping – Used to make a product part of a grouped product. More info below at: Grouped Products.

Attributes section

On the Attributes tab, you can assign details to a product. You will see a select box containing global attribute sets you created (e.g., platform). More at: Managing Product Categories and Tags.

Once you have chosen an attribute from the select box, click add and apply the terms attached to that attribute (e.g., Nintendo DS) to the product. You can hide the attribute on the frontend by leaving the Visible checkbox unticked.

Custom attributes can also be applied by choosing Custom product attribute from the select box. These are added at the product level and won’t be available in layered navigation or other products.

Advanced section

  • Purchase note – Enter an optional note to send the customer after they purchase the product.
  • Menu order – Custom ordering position for this item.
  • Enable Reviews – Enable/Disable customer reviews for this item.

Product short description

Add an excerpt. This typically appears next to product imagery on the listing page, and the long description appears in the Product Description tab.

Video embeds (oembed) may be used, as of version 3.1x.

Taxonomies

On the right-hand side of the Add New Product panel, there are product categories in which you can place your product, similar to a standard WordPress post. You can also assign product tags in the same way.

WooCommerce Product Categories and Tags

Product images

Add a main product image and a gallery of images. More at: Adding Product Images and Galleries.

Setting catalog visibility options and feature status

In the Publish panel, you can set Catalog Visibility for your product.

  • Shop and search – Visible everywhere, shop pages, category pages and search results.
  • Shop only – Visible in shop pages and category pages, but not search results.
  • Search only – Visible in search results, but not in the shop page or category pages.
  • Hidden – Only visible on the single product page – not on any other pages.

You can also set whether the product is promoted in product categories, up-sells, related products as a Featured Product. For example, you could tick the Featured box on all bundles you sell.

Other ways to set as Featured are described in the below section: Mark a product as Featured.

Adding a grouped product

A grouped product is created in much the same way as a Simple product. The only difference is you select Grouped from the Product Type dropdown.

WooCommerce Grouped Product - Inventory Tab
To create your parent product select ‘Grouped’ from the Product Type dropdown.

Create the Grouped product

  1. Go to: WooCommerce > Products > Add New.
  2. Enter a Title for the Grouped product, e.g., Back to School set
  3. Scroll down to Product Data and select Grouped from the dropdown. The price and several other fields disappear. This is normal because a Grouped Product is a collection of ‘child products’, which is where you add this information.
  4. Publish.

The Grouped product is still an empty group. To this Grouped product, you need to:

  • Create products and add them
  • Add existing child products

Having the choice to first create Simple products and add them to a Grouped product later; or first create a Grouped product and add Simple products later gives you flexibility to add Simple products to more than one Grouped product.

Add products to the Group

  1. Go to: WooCommerce > Products > Add New.
  2. Select the Grouped product you wish to add products to.
  3. Scroll down to Product Data and go to Linked Products.
  4. Select Grouped Products, and search for the product by typing
  5. Click the products you wish to add.
  6. Update
  7. You can drag and drop to reorder the Grouped Products. Once you press Update, the new order will be shown on the product page.
Adding a virtual product

When adding a Simple product, you can tick the Virtual checkbox box in the product type panel.

With Variable products this checkbox is moved to each variation.

Enabling this, disables all shipping related fields such as shipping dimensions. A virtual product will also not trigger the shipping calculator in cart and checkout.

Adding a downloadable product

When adding a simple product, you can tick the Downloadable checkbox box in the product type panel. This adds two new fields:

  • File path — Path or url to your downloadable file.
  • Download limit – Limit on number of times the customer can download file. Left blank for unlimited downloads.
For maximum flexibility, downloadable products also incur a shipping cost (if, for example, you were offering both a packaged and a downloadable version of a product, this would be ideal). You can also check the Virtual box if the downloadable product is not shippable.
Adding an external/affiliate product

Select ‘External/Affiliate’ from the product type dropdown. This removes unnecessary tabs, such as tax and inventory, and inserts a new product URL field. This is the destination where users can purchase the product. Rather than Add to Cart buttons, they see a Read More button directing them to this URL.

Adding a variable product

Variable products are arguably the most complex of product types. They let you define variations of a single product where each variation may have a different SKU, price or stock level.

See Variable Product for a guide on creating a product with variations.

Deleting a product
delete-product-woocommerce

To delete a product:

  1. Go to: WooCommerce > Products.
  2. Find the product you wish to delete.
  3. Hover in the area under the Product name and click Trash.
Mark a product as Featured

To mark a product as featured, go to: Products > Products and select the Star in the featured column. Alternatively, select Quick Edit and then the Featured option.

Setting A Featured Product
Setting A Featured Product
Adding Product Images and Galleries

Variable Product

Variable Product

Variable products are a product type in WooCommerce that lets you offer a set of variations on a product, with control over prices, stock, image and more for each variation. They can be used for a product like a shirt, where you can offer a large, medium and small and in different colors.

Adding a variable product

Step 1. Set the product type

To add a variable product, create a new product or edit an existing one.

  1. Go toWooCommerce > Products.
  2. Select the Add Product button or Edit an existing product. The Product Data displays.
  3. Select Variable product from the Product Data dropdown.

Selecting variable product WooCommerce

Step 2. Add attributes to use for variations

In the Attributes section, add attributes before creating variations — use global attributes that are site wide or define custom ones specific to a product.

Global attributes

To use a global attribute:

  1. Select one from the dropdown and Add.
  2. Choose Select all to add all attributes to the variable product (if applicable).
  3. Tick the Used for variations checkbox to tell WooCommerce it’s for your variations.
Adding Global Attribute to Product WooCommerce

Adding Global Attributes to a Product
Setting Up Global Attributes

Setting Up Global Attributes

Custom attributes specific to product

If adding new attributes specific to this product:

1/ Select Custom product attribute, and Add.

Adding Custom Attributes to WooCommerce

Adding Custom Attributes to a Product

2/ Name the attribute (e.g. Size),

3/ Set values separated by a vertical pipe (e.g., small | medium | large)

4/ Enable the Used for variations checkbox.

Setting Up Custom Attributes for Variations

5/ Save attributes.

Step 3. Add variations

To add a variation, go to Variations section in the Product Data meta box.

Manually Adding a Variation

1/ Select Add variation from the dropdown menu, and click Go

Add Variation

2/ Select attributes for your variation. To change additional data, click the triangle icon to expand the variation.

Any Color Any Size

3/ Edit any available data. The only required field is Regular Price.

4/ Save Changes.

Editing Many Variations

If you have more than 10 variations, use the buttons to navigate forward and backward through the list. Each time you navigate to a new set of variations, the previous set are saved. This ensures that all data is saved.

Variations Pagination

Setting Defaults

We recommend setting defaults you prefer on variations. In the example, we have no defaults set, so users can pick any color and size right away from the product page.

Settings Defaults

If you want a certain variation already selected when a user visits the product page, you can set those. This also enables the Add to Cart button to appear automatically on variable product pages.

You can only set defaults after at least one variation has been created.

Variation Data

Each variation may be assigned.

  • Enabled – Enable or disable the variation.
  • Downloadable – If this a downloadable variation.
  • Virtual – If this product isn’t physical or shipped, shipping settings are removed.
  • Regular Price (required) – Set the price for this variation.
  • Sale Price (optional) – Set a price for this variation when on sale.
  • Tax status – Taxable, shipping only, none.
  • Tax class – Tax class for this variation. Useful if you are offering variations spanning different tax bands.
  • Downloadable Files – Shows if Downloadable is selected. Add file(s) for customers to download.
  • Download Limit – Shows if Downloadable is selected. Set how many times a customer can download the file(s). Leave blank for unlimited.
  • Download Expiry – Shows if Downloadable is selected. Set the number of days before a download expires after purchase.

Inventory:

  • SKU – If you use SKUs, set the SKU or leave blank to use the product’s SKU.
  • Manage Stock? – Tick the box to manage stock at the variation level.
  • Stock Quantity – Shows if Manage Stock is selected. Input the quantity. Stock for the specific variation, or left blank to use the product’s stock settings.
  • Allow Backorders – Choose how to handle backorders.
  • Low stock threshold – Enter a number to be notified.
  • Sold Individually? – Allow only one to be sold in an order. (This is setting is used for the product itself. You cannot set a specific variation to only be sold once per order.)

Set Stock Status can be applied to all variations at once to In stock or Out of stock. Bulk-update under Variations.

Shipping

  • Weight – Weight for the variation, or left blank to use the product’s weight.
  • Dimensions – Height, width and length for the variation, or left blank to use the product’s dimensions.
  • Shipping class – Shipping class can affect shipping. Set this if it differs from the product.

Linked products

  • Upsells
  • Cross-sells
  • Grouped

If the SKU, weight, dimensions and stock fields are not set, then it inherits values assigned to the variable product. Price fields must be set per variation.

Add an image for the variation

  1. Expand the variation.
  2. Click the blue image placeholder (screenshot).
  3. Select the image you wish to use.
  4. Save.

Screen Shot on 2015-09-02 at 14-57-29

Adding Product Images and Galleries

Setting up Taxes in WooCommerce

Setting up Taxes in WooCommerce

 

Setting up taxes and tax rates is one of the first tasks you want to perform when setting up a store. Taxes can be a complex matter, but WooCommerce aims to make setup as straightforward as possible.

Enabling Taxes

To access the tax settings screens, they first need to be enabled.

  1. Go toWooCommerce > Settings > General.
  2. Select the Enable Taxes and Tax Calculations checkbox.
  3. Save changes.

Configuring Tax Options

To start configuring taxes:

Go to: WooCommerce > Settings > Tax. This tab is only visible if taxes are enabled.

The Tax tab displays several options that can be set to suit your needs — settings you choose are based on the tax jurisdiction under which your store is located.

Prices Entered With Tax

This option is perhaps the most important when managing taxes in your store, as it determines how you input product prices later on.

  • “Yes, I will enter prices inclusive of tax” means that all catalog prices are input using your store’s base tax rate.

For example, in the UK you would input prices inclusive of the 20% tax rate e.g. You enter a product price of £9.99 that includes £1.67 tax. A customer in the UK would pay £9.99 as defined, and a customer in the US would only pay £8.32.

  • “No, I will enter prices exclusive of tax” would mean that your catalog prices need to be tax exclusive.

Using the example from above, a UK shop would enter 8.32 at the product price. A tax of 20% would be applied on top of this during checkout making the amount payable £9.99.

The tax calculation for tax-inclusive prices is:

tax_amount = price - ( price / ( ( tax_rate_% / 100 ) + 1 ) )

The tax calculation for tax-exclusive prices is:

tax_amount = price * ( tax_rate_% / 100 )

Calculate Tax Based On

This setting determines which address is used for tax calculations.

  • Customer billing address
  • Customer shipping address (default)
  • Store base address

If you use store base address, taxes are always based on your store location and not your customer’s location.

Shipping Tax Class

In most setups, shipping tax class is inherited from the item being shipped, e.g., Shipping a reduced rate item such as baby clothes would also use a reduced rate. If this is not the case in your jurisdiction, choose a different tax class.

Rounding

If you enable Rounding tax at subtotal level, instead of per line, the rounding is done at the Subtotal level. Check your tax jurisdiction to know if this is done.

Additional Tax Classes

Tax Classes are assigned to your products. In most cases, you want to use the default Standard class. If you sell goods that require a different tax class (i.e., Tax, except zero-rated products) you can add the classes here. To get started, we include Standard, Reduced Rate and Zero Rate tax classes.

Each class is listed at the top of the tax settings page – click a class to view tax rates assigned to the class.

Display Prices in the Shop

This option determines how prices are displayed in your shop/catalog. Choose from inclusive/exclusive tax display.

Display Prices During Cart and Checkout

This option determines how prices are displayed in your cart and checkout pages – it works independently of your catalog prices. Choose from inclusive/exclusive tax display.

Setting up tax rates

Tax classes are displayed at the top of the tax screen. Click one to view tax rates for the class.

In the tax rates table, you can define tax rates (one per row). Click Insert Row to get started.

Each tax rate has these attributes:

  • Country Code – 2 digit country code for the rate. Use ISO 3166-1 alpha-2 codes. Leave blank (*) to apply to all countries.
  • State Code – 2 digit state code for the rate. See i18n/states/COUNTRYCODE.php for supported states. For the US, use a 2 digit abbreviation e.g. AL. Leave blank (*) to apply to all states.
  • ZIP/Postcode – Enter postcodes for the rate. You may separate multiple values with a semi-colon (;), use wildcards to match several postcodes (e.g. PE* would match all postcodes starting with PE), and use numeric ranges (e.g. 2000…3000). Leave blank (*) to apply to all postcodes.
  • City – Semi-colon separated list of cities for the rate. Leave blank (*) to apply to all cities.
  • Rate % – Enter the tax rate, for example, 20.000 for a tax rate of 20%.
  • Tax Name – Name your tax, e.g. VAT
  • Priority – Choose a priority for this tax rate. Only 1 matching rate per priority will be used. To define multiple tax rates for a single area you need to specify a different priority per rate.
  • Compound – If this rate is compound (applied on top of all prior taxes) check this box.
  • Shipping – If this rate also applies to shipping, check this box.

Tax rate examples

Here is an example of a tax setup for a UK store — 20% for UK customers only.

In this example, we have a 6% tax rate for all U.S. states except California, which has a 7% tax rate and a local tax rate of 2% for ZIP code 90210. Notice the priorities — this demonstrates how you can ‘layer’ rates on top of another.