Columns In Gutenberg

I am using the two-column block here. Choosing it brings up two blocks side by side. Clicking on the + icon allows you to choose what you want in the block. I chose ‘paragraph’ (i.e. text) and this is the result.

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

“Beware the Jabberwock, my son!
The jaws that bite, the claws that catch!
Beware the Jubjub bird, and shun
The frumious Bandersnatch!”

He took his vorpal sword in hand;
Long time the manxome foe he sought—
So rested he by the Tumtum tree
And stood awhile in thought.

And, as in uffish thought he stood,
The Jabberwock, with eyes of flame,
Came whiffling through the tulgey wood,
And burbled as it came!

One, two! One, two! And through and through
The vorpal blade went snicker-snack!
He left it dead, and with its head
He went galumphing back.

“And hast thou slain the Jabberwock?
Come to my arms, my beamish boy!
O frabjous day! Callooh! Callay!”
He chortled in his joy.

’Twas brillig, and the slithy toves
Did gyre and gimble in the wabe:
All mimsy were the borogoves,
And the mome raths outgrabe.

This is something I wrote a while ago when column blocks worked differently.

It seems that the way to add text within a column is to write and then when one gets to the point at which one wants to change to the adjoining column, one starts typing in the adjoining column – 

like this and then simply continues typing. The question is what happens if the amount of text one types in the adjoining column outstrips the amount of text in the first column? Can one move these little blocks of text within the columns around?

We are about to find out because now I am typing in the right-hand column, and I want the text in the paragraph above to shift to the left-hand column.

And yes, with a bit of faffing about I was able to move the text to the left hand column and continue typing here.

So having done it once, I now want to do it again with the text block that begins with the words ‘We are about to..’

So – I will find out whether I am getting the hang of it or whether the exact mechanism remains a mystery.

And the answer again is that I am now an experienced and somewhat accomplished mover of column blocks.

Twenty Nineteen Theme Full Width Content

The default setting for the text for the Twenty Nineteen theme stretches only partway across the page, and yet the theme does not allow for sidebar widgets.

The result is a theme with text that takes up part of the page, with half the page empty all the way down it.

I wasn’t interested in trying to find a way to introduce a sidebar with widgets. I wanted the text to take up the full width, and this is the CSS I am using to accomplish that.

/* to make page content full width */
body.page .entry .entry-content > *, .entry .entry-summary > * {
        max-width: none;
}

/* to make posts content full width */
.entry .entry-content p
{
        max-width: none;
}

/* to make shop content full width */
.woocommerce .content-area .site-main
{
        max-width: none;
}

Here’s the raw code: 2019-full-width-text

Hide Product Categories

admin on January 11, 2019

If you want to pre-approve your customers (such as in a trade-only shop) then you might want to disable the visibility of pricing as the ability for visitors to buy your products.

Catalog Visibility Options

The Catalog Visibility Options plugin will do this and also let you choose which user roles can see products and product categories. 

Therefore, if you want to take a category out of the shop, use the plugin to do that.

PHP code

Otherwise there is this code that I saw on Business Bloomer but the code was in the comments, and is from Jonathan from Inspired Earth

function custom_pre_get_posts_query( $q ) { $tax_query = (array) $q->get( 'tax_query' ); $tax_query[] = array( 'taxonomy' => 'product_cat', 'field' => 'slug', 'terms' => array( 'CATEGORY-TO-HIDE' ), // Don't display products in the this category on the shop page. 'operator' => 'NOT IN' ); $q->set( 'tax_query', $tax_query ); } add_action( 'woocommerce_product_query', 'custom_pre_get_posts_query' );

Here is the raw code

Where to put the code

I use the Code Snippets plugin (it’s in the WordPress repository) to contain snippets of php.

Debug, Health Check & Troubleshooting

The Health Check & Troubleshooting plugin is made by the WordPress.org community.

It has a debug function that checks common configuration errors and known issues in a WordPress setup, and highlights them.

It doesn’t solve them, but it gives you the information to tackle the issue.

Theme and Plugin Conflicts

When you activate the Troubleshooting feature, it reverts your site to a default WordPress theme like Twenty Seventeen and deactivates all your plugins.

You can then turn your chosen theme back on to see whether the issue reasserts itself.

If it does then you know it’s a theme-specific issue.

If not, then you can re-activate your plugins one by one until you see the issue reappear. In that way you can resolve plugin conflict issues.

The neat part is that it does it only for you as the logged in admin. Anyone visiting the site sees your usual setup.

Take a full backup before you start…

Sorting WooCommerce Products

Using the Gutenberg plugin on a blog is one thing: Using it on a WooCommerce site is another. So while I have been using Gutenberg since January 2018, it was only couple of months ago that I activated Gutenberg  on a WooCommerce test site.

I did it when the people at WooCommerce released the WooCommerce Gutenberg Products block plugin.  It was clear how to use Gutenberg to import product images into posts and pages.However, there was no ‘Gutenberg action’ on Product pages.

I thought it might be that the theme I was using was not yet G’berg compatible but it was the same on the 2017 theme, so I switched back.

I asked in the Facebook WooCommerce Help and Share group and was directed to what Mike Jolley said back in May:

Since WooCommerce is not optimised for the Gutenberg editor we’ve decided to keep the old editor for now so sites do not break when WordPress 5.0 is released. Products are not content focussed so using Gutenberg with our meta box placed awkwardly at the bottom is not ideal.

And back in February, Cladiu Lodromanean said:

It’s just temporary until we develop nice Gutenberg-compatible screens for Products/Orders/etc. When Gutenberg is merged into WP core and released we will be ready with the Products block in WooCommerce 3.4 but editing products and orders in Gutenberg will come in a future WooCommerce release.

It won’t be until next year that the people at WooCommerce will be working on using the block editor for products.Meanwhile, even on normal posts and pages, what you still cannot do is order the images with drag and drop. We are restricted to the old ordering system.

If you ask why drag/drop and the ability to move images around is important, look at it from the point of view of the site owner and a customer.

The site owner wants to present the products in the way he/she wants – maybe arranging by colour. And the customer wants to see the most relevant presentation according to the product.

The ‘old’ (current) ordering system allows site owners to list product images by:

  • default sorting (custom ordering + name)
  • Popularity (sales)
  • Average rating
  • Sort by most recent
  • Sort by price (asc)
  • Sort by price (desc)

You can change the order of display under custom ordering by going to WooCommerce > Settings in your WordPress admin. On the Products tab, the Display settings should be set to Default sorting (custom ordering + name). If it is not, then change it to that first.

Then, in the Products admin panel, select Sorting (see the image at the top of this article) and then drag and drop your products in the order that you’d like.

If you have got a lot of products, then it’s not realistic to drag a product up or down hundreds of rows to where you want to place it.

An alternative is to order the products in the Quick Edit menu by changing the order value. The default is zero. Change the numbers and the custom order will display the lower numbers first (negative numbers are allowed).

You can also edit the order value in the Product Data > Advanced tab on the product edit page.

Sounds good, but you have to hold the numbers in your head while you sort them.

There’s a bigger problem though, and that is that custom sorting is applied against all items and not against separate categories, and in all places where the products show.

That may not be what you want. You may want products to show up in a different order in different sections of your site.

For example, you may want to showcase eight products in a blog post and you may want to arrange them in a specific arrangement so that the order complements your text. You can do that, but then that order will apply everywhere the products show.

Only being able to arrange products by date uploaded or the ones with the most sales, etc. is a limitation that doesn’t fit with what store owners want and need. And custom ordering has its own shortcomings.

I asked James Koster of WooCommerce about the capability to drag images around. He replied saying that eventually drag/drop will be a feature, but as it had only recently been added to Gutenberg core,  they are yet to work on their own implementation for the products block. 

Test Your Checkout

I sometime test the checkout by temporarily changing the Stripe checkout to test mode and putting through a purchase.

It works, but being a manual process it depends upon my doing it – and when WordPress is updated or WooCommerce is updated, or some plugin or other that might interfere with another plugin is updated, do I test? No, I do not. Not every time. And that’s a problem.

Robot Ninja tests your checkout regularly to make sure everything is working.

As it says in its blurb;

Don’t wait days or weeks to hear from customers that your checkout isn’t working or waste the time manually checking your store. Schedule tests to run daily or weekly to save you time.
Select real products from your site to use in your tests. No more testing with dummy or $0 products or by having to create test coupons. And you are free to use actual products.

It visits the site and test products as a guest customer and also as a logged in user; it tries selecting all variation options if they exist; it adds the product to the cart; and it purchases the product using an available payment gateway (with priority on using Stripe).

Our store is connected to a fulfilment house that sends out the goods, and our system notifies the fulfilment house automatically when a customer orders a product.

When I test the checkout manually I temporarily disable the notification that is sent automatically to our fulfilment house when a customer purchases a product.

Then I re-enable notifications after I have completed the manual test.

So it’s a problem for us if the service is jumping around and testing different products, because our fulfilment house is going to be getting a lot of dummy notifications and think they are real orders.

Provided I can nominate the product that RobotNinja tests, I can set up a dummy product to be tested, and exclude it from the notifications that go to the fulfilment house. 

But I have never thought to set up a dummy product to test, and exclude that from the notifications.

I would also hide the dummy product from the catalogue.

Hidden products are not visible to customers’ searches and do not appear in the shop page. So unless a ‘real’ customer knows the URL of the product, they will not find it.

Looking through the documentation I see that one can nominate a product or products to be tested.

Next thing: What happens with the payments that go through Stripe. What does Stripe think about these transactions? How does it work? I asked Support and this is the reply:

“If Stripe is used in Live mode they are treated like a normal transaction. Upon completion of an order we process a refund via the WooCommerce API and delete the order.

We also support Stripe in test mode using one of its fake card numbers they provide. You also have the option to disable “placing an order”. We complete the checkout up to the point of clicking the place order button but stop there.

We also support $0 products.

Basically there are a few different options depending on backend systems/costs/etc.

Now I need to think it through to make sure there isn’t a snag that I haven’t thought of yet. I’ll update this post as and when I have done that.