Add a Class to WordPress Body using body_class

For a WordPress website theme I was using the body_ class function in the body tag.

<body <?php body_class(); ?>>

This was adding relevant classes into the body.

I wished to add another class to the body. In this case for a customer  review. For a presentation I wished to provide a comparison between a modern responsive theme and an older style where the page doesn’t resize appropriately.

I added an unresponsive class to the WordPress website via the HTML body which would be used to stop a bootstrap based website from being responsive.

This is the relevant section of the header.php file

<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<a href="#content" class="skipnav">Skip to content</a>
<div id="page" class="hfeed site ">

To make the change I amended the functions.php file.

Within this you can add the additional classes via the body_class filter. I chose to add just the one class.

add_filter( 'body_class', function( $classes ) {
return array_merge( $classes, array( 'unresponsive' ) );
} );

Reviewing the website source I was able to see the class added, within the body and the website was adopting the presentation fro the additional class.

References

https://developer.wordpress.org/reference/hooks/body_class/

Enable WordPress Missing Post Revisions

WordPress provides post revisions. A great way to step back to a prior version of your post!

Whilst writing blog posts I’ve used the post revisions to check a previous version of a paragraph, or idea. and that all important recovery of a post which has had parts deleted in error.

The post revisions are shown on the right hand side of the Edit Post screen, within the Publish section.

How to enable the post revisions.

If the post revisions aren’t showing

At the top of the page there’s a tab marked as Screen Options. Click on this to expand.

Within this area are the content options which may be displayed. Check that the Revisions check box is ticked.

Click on Screen Options again to close.

The post revisions option will only show once you have saved the post a number of times.

should be option under publish section at top right of post edit page

I have also seen it written that adding

define(‘WP_POST_REVISIONS’, false);

to the file wp-config.php in the root of your website may also be required. I’ve not found that I needed to add this.

Rather than filling the database with lots of post revisions, potentially slowing your website, you can limit the number of post revisions. I like to set this to 20 maximum.

In summary to be able to view the previous post revisions of your blog port ensure that the Revisions check box is ticked in the Screen Options and you’ll need a history of post revisions before it is shown.

WordPress How to Add alt Text to an Image

WordPress makes the management of images easy with the media library.

As described in the article Why add ALT Text to an Image? it’s important to have alt text assigned to an image, for SEO.

In WordPress, to add the alt text click on the media library link, on the left menu.

WordPress Media Library

Find and click on the image which you wish to modify.

Image alt Text WordPress Attachment Details

As shown in the image above, on the left is a picture of the image and to the right options to be completed.

The entry of interest is labeled as Alt Text. Click on the textbox and enter your descriptive text.

In the above image I gave the image the Alt Text description of Red BT Telephone Box.

The alt text should be informative, but keep it succinct.

I’ve left the Title text as per the original file name of the image (as auto-filled). You may wish to make this more descriptive too.

As changes are made the details are updated. Confirmation of this is a small spinner which appears at the top.

Once completed, simply close on the cross at the top right corner to close the pop-up.

WooCommerce How to Remove “Showing the single result”

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.

WooCommerce Configure Order Only no Payment

I wished to configure a WordPress e-commerce website using the popular WooCommerce plugin to take orders only, without taking payment.

I have previously used WooCommerce for product brochure management, hiding the prices to remove the shopping basket.

WooCommerce was to be used as a product brochure with an order created listing the product items and quantity.

Payment, order fulfillment and tracking would be made otherwise.

I considered the use of cash on delivery (cod) but found this neat snippet which is added in the functions.php file

add_filter('woocommerce_cart_needs_payment', '__return_false');

This allows the prices to be left in place.

An order is created in the usual way. At the end the order is completed and details emailed to the website owner, but no monetary transaction implemented.

I also removed all but cash on delivery (COD) from the payment gateways.

References

http://stackoverflow.com/questions/16729643/removing-payment-gateways-from-woocommerce

WooCommerce Change Words “Related Products”

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.

Where does UpdraftPlus save its Backups?

Where does UpdraftPlus save the backup files, if none of the multitude of cloud storage offerings is used?

Not wishing to use an external storage location, such as Google Drive, Dropbox or Microsoft OneDrive. I configured UpdraftPlus to save the file locally, within the website space.

The question is “Where does UpdraftPlus save its backup files?

To understand this I logged into the control panel for the website domain and navigated through the file system.

I was lucky I looked within the wp-content directory first, where I found an updraft sub-directory.

PpdrafPplus backup file save directory

As the image above shows within the /wp-content/updraft directory are to be found the UpdraftPlus backups.

In case your website gets compromised you may wish to login occasionally to download these backups.

Better still use one of the external storage services to keep a backup of your website. Unfortunately these could also get deleted, so its still worth keeping a local backup copy.

 

 

 

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

WooCommerce Sort by Custom Field

Modify the WooCommerce catelogue ordering to sort using your own custom field.

Rather than taking the products by alphabetical order, or whatever, I wanted to be able to fine tune the ordering and be more specific.

I chose to add a custom field to the WooCommerce shop products. This would then be used as my sort argument.

WooCommerce sort by custom field

Shown in the image above is the extra field called seq_num. To fit products in between each other the number given can be to a fine graduation.

To give the custom ordering based upon the custom field value I tweaked the WooCommerce function woocommerce_get_catalog_ordering_args.

Here’s the addition to the functions.php file

add_filter('woocommerce_get_catalog_ordering_args', 'woocommerce_get_custom_ordering_args');

function woocommerce_get_custom_ordering_args( $args ) {
$args['order'] = 'ASC';
$args['meta_key'] = 'seq_num';
$args['orderby'] = 'meta_value_num';
return $args;
}

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.