Blog

How to Display Variations with Color (or Size) Buttons

In this tutorial I will show how you can change the way the variation selection is working on the product page in WooCommerce.

We all know that by default the variations are displayed like a select dropdown.

default variation switcher on WooCommerce product page
Wouldn’t it be better to use color swatches here?

But today we will learn how to display them as color swatches. If you would like to display them as size buttons or custom images, you can do it with my plugin.

This is our goal for this tutorial:

WooCommerce display color variations with buttons

How to Add Custom Fields to Product Variations

Long time ago I published a tutorial where I described how to add custom fields to WooCommerce products. Now it is time to dive deep into product variations and add a couple settings fields there as well.

How to Add Meta Fields when Creating a Post with REST API

This tutorial is a small addition to my another tutorial about creating posts with REST API in WordPress, because there I didn’t mention how to work with metadata and what moments you have to keep in mind.

As a result of this tutorial we will just create a simple draft post with a couple custom fields in it.

Upload Featured Image to a Post with REST API

Recently I have updated the tutorial about creating a post with WordPress REST API but I didn’t cover a topic of featured images there.

It is not that simple actually, but I will make it simple for you.

Code Snippets Tutorial (Where to Insert the Code)

I have a plenty of code tutorials on my blog but almost in none of them I describe in details where to insert the code in WordPress. It is because I write mostly for developers who already know something so I usually skip the basic part.

But I came to a decision that it would be super-useful to have a tutorial like this on my blog.

So here we are – right now I am going to show you 3 ways how you can use code snippets on your WordPress or WooCommerce website.

Repeater Field in Gutenberg Plugin Sidebars

I already have a plenty of tutorials on my blog where we created different kind of fields for Gutenberg sidebars, for example an image field, a gallery field, a checklist and even a dropdown with posts.

There is also my Simple Fields plugin for those of you guys who don’t want to mess up with JSX and React and prefer to use simple PHP code snippets instead.

But now let’s talk about creating a repeater field. First things first – a screenshot:

repeater field in Gutenberg plugin sidebars
I used two simple text fields inside the repeater but you can actually use whatever you want. There is also a separate tutorial on my blog about creating custom panels.

How to Validate Payment Gateway Settings Fields

It seems like my complete payment gateway tutorial is not that complete after all. I didn’t mention there how you can validate payment gateway admin options.

For example let’s assume that we have to validate a USDT address of a TRON network. Here is how it should work:

Let’s assume that we’ve already added a field for a USDT address inside init_form_fields() method. Just like that: