Upsell and Cross-sell products are used in WooCommerce to increase product sales.
When do these two lists of products get shown?
Let’s begin by adding some products of each type to a product.
On the Product data section there are a number of tabs running vertically at the left with the associated configuration options in the remainder of the page.
Click on the tab linked products to show the upsell and cross sell options.
Linked products are added by typing a few letters from the product name and making a selection from the resulting list.
In the screenshot above the upsell product of Chantenay Carrots is being added.
Upsell products are shown when viewing a single product’s detail, its description, images, price and attributes
In this view we are seeing an individual product with below two sets of products, the upsell products and the related products, based on what we have seen before.
The upsell products are premium versions of the product selected to view. In this instance I’m showing the higher priced purple spouting and kalettes.
The list of cross sell products appears when viewing your basket of items.
Having made our product purchases. Click to view the basket.
In this view we are seeing the configured cross sell products of carrots and potatoes.
With a cross-sell product we wish to encourage the shop visit to buy something relevant to the items in the basket. I’ve chosen to show more vegetables but a steamer/saucepan to cook the vegetables would also be appropriate.
Changing the order in which WooCommerce displays product categories to create a custom order.
To do this I navigated to the admin page Products > Categories.
On this categories page is shown a list of the various products order with child entries beneath their parent.
Viewing this page there is no textbox along the row to set the numeric order. Checking on the left for adding a new entry, likewise.
So how is the order of the category entries set?
On the Product category page to chagne the order of the entries simply drag the relevant item up or downto the positin you wish it to take.
Once an entry has been moved the little spinner will show whilst the updated order is being saved.
After the page has refreshed and the spinner has stopped the parent page has moved. And better still, all the child entries have been relocated too!
I wished to hide the WooCommerce message “Showing the single result”.
I considered using CSS to hide the relevant content on the page.
This is often a simple approach. Inspecting the page content at a given point with the browser tool to show the div wrapping the content with its id or class.
But WooCommerce reuses the same div when there are more results to be shown.
Therefore simply hiding the div is not an acceptable approach.
Is there not a better way?
If the changes which you are making in the WooCommerce template files are limited it’s much better to interact with the functions.php file of your theme or child theme.
In the theme file functions.php add
remove_action( ‘woocommerce_before_shop_loop’, ‘woocommerce_result_count’, 20 );
Updates to WooCommerce, whilst they try to limit the update changes to the templates, these do occur. This may result in reviewing and modifying your copy of the files.
But by editing in just the one file with simple additions this reduces this over head and additional work.
Edit the file functions.php to remove the result count, thus hiding the text Showing the single result.
By default WooCommerce uses the words “related product”, when showing the related products below a single product view.
I wished to change these words, supplementing the preferred text of my client.
Rather than editing the plugin directly which may subsequently be over-ridden on an update, I was looking to make the change either by the hooks and an entry in the file functions.php or by editing a copy of one of the template files.
Choosing to make the change by way of the template file, I copied the file related.php from
to the child theme WooCommerce template directory
Within the file look for:
<div class=”related products”><h2><?php _e(‘Related Products’, ‘woocommerce’); ?></h2>
Change the text between the <h2></h2> tags to your preferred text.
Periodically WooCommerce makes changes to the template files. An alert is shown on your WordPress admin if attention is required to your copied files. I have found it to be a simple task to review the differences between the new file and my website copy. If appropriate take a copy of the modified master template and re-implement your website specific changes.
Alternatively look to make the change in the language translation files
Looking in the translation file for WooCommerce, found at:
#: templates/single-product/rating.php:42 msgid "%s customer review" msgid_plural "%s customer reviews" msgstr "" msgstr "" #: templates/single-product/related.php:51 msgid "Related Products" msgstr "" #: templates/single-product/review-meta.php:28 msgid "Your comment is awaiting approval" msgstr ""
To make your change put your updated text in the msgstr, between the empty speech marks. for example:
#: templates/single-product/related.php:51 msgid "Related Products" msgstr "Similar products"
This can be readily changed. However, as before with making such changes, the next update of the plugin is likely to over-write your changes.
My view is that it’s easier to make changes to the templates file, and compare this with a future update version. The template file will also accept annotation, allowing the changes to be highlighted and described.
Scanning down through and amending a language file with a list of language relationships will be harder. Also easy to forget the purpose of the change in the language file.
WooCommerce is a highly customisable shop/cataloguing plug-in. Details on usage are provided directly via the following references
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.
- 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.
- Content Area: This is the main content for the product description
- 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:
- 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:
- 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.
- 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.
- shipping: Package size for shipping. Leave alone unless you wish to define the shipping box of the product.
- 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.
- Up-sells – enabling a more expensive product to be highlighted as an alternative to the selected product. To add up-sell products:
- 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.
- 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.
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.
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.
To hide this category title with CCS the class is added to the theme’s style.css file, with the setting for the display:
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.
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
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:
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:
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.
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.
To add the additional WooCommerce menu configuration options expand the Screen Options section at the top of the screen.
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.
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.