WooCommerce Product Archive Customiser

WooCommerce

With some WordPress themes, the theme overrides the ability to increase the number of products per row in the archive pages.

This plugin, written by James Koster of the WooCommerce team, is pretty old but works OK – at least for now. As it describes:

It allows you to customise WooCommerce product archives. Change the number of product columns and the number of products displayed per page.

Toggle the display of core elements and enable some that are not included in WooCommerce core such as stock levels and product categories.

Coloured Backgrounds in Gutenberg

Leave a comment
Gutenberg

To add a splash of colour behind a paragraph of text, you go over to the sidebar and you will see two tabs. One says Colour Settings and the other says Advanced

When you open the Colour Settings you see two palettes of colours. Depending on which palette you choose, you can change the colour of the text and/or the colour of the background to the text.

You can choose one of the predefined colours that are there or you can click on the multi-coloured circle at the end of the swatch of colours and make any colour you want.

Here is a short paragraph with the background colour a nice rose pink using the hexadecimal #ffdfe0

When you add a quote, however, the Colour Settings tab disappears leaving only the Advanced tab.

Ppen the Advanced tab and you will see that it says Additional CSS Class.

I wondered what it meant until I realised it was an invitation to create a CSS class.

The little that I know about classes is that you should name them something that is not likely to have been used elsewhere in the main code. So I named it ‘quote-thing’. Catchy, eh?

Stage 2 was to add the CSS to the CSS section in the Customiser. It has to refer to the class and it has to tell the class what to do. So I said it should make the background a specific colour #ebf2f5 – a pale blue colour.

And I wanted to put a bit of padding around the quote so that it didn’t look like it was sitting in a straightjacket.

Here is the code:

/* background colour for quote */
.quote-thing {
background: #ebf2f5;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 15px;
}

And here are two quotes attributed to Fyodor Dostoyevsky:

The greatest happiness is to know the source of unhappiness.

It is better to be unhappy and know the worst, than to be happy in a fool’s paradise.