WooCommerce

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.

Another idea is to test the content to see if it matches and then hide it. Using either JavaScript or jQuery this can be done. But this is getting complicated.

The content will be first displayed as the page is loaded, prior to being removed once the JavaScript Is run. Better to hide first and then show.

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

/wp-content/plugins/woocommerce/templates/single-product/related.php

to the child theme WooCommerce template directory

/wp-content/chlld-theme/woocommerce/single-product/related.php

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:

/wp-content/plugins/woocommerce/i18n/languages/woocommerce.pot

#: templates/single-product/rating.php:42
msgid "%s customer review"
msgid_plural "%s customer reviews"
msgstr[0] ""
msgstr[1] ""

#: 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.

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.

• 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.

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:
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.
   • 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.
   • 
   • 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.

END

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.