Recently I published another tutorial where I created tabs for WordPress settings pages. We didn’t even discussed the design moment there, because WordPress core has everything we need, we just used a wrapper element
<nav class="nav-tab-wrapper"> and two CSS classes for tabs
nav-tab-active. That’s pretty much it.
With meta boxes for posts this moment can be a little bit tricky. We can of course use the same approach we used for settings pages and then our tabs are going to look like this:
In this example we have a couple of disadvantages:
- I also added some custom CSS for tabs –
border-color, otherwise they looked really ugly.
Or we can try the tab design WooCommerce uses:
Suddenly I found a solution when I took a look at categories meta box:
When I tried to copy and paste it for my custom meta box I found out that it works as is, that we don’t even have to add any extra CSS or JS! So, it seems to be exactly what we need. And this is how our final meta box in this tutorial is going to look like:
As always I am going to show you two approaches here:
In many different WordPress plugins settings are organized by tabs, we can consider it like a default functionality, because when creating tabs you don’t even need to write any CSS for them, it is already provided by WordPress code, just use the appropriate classes.
So in this tutorial we’re going to create a simple WordPress settings page with a couple of tabs in two different ways:
- In the first method we’re going to create options pages from scratch using WordPress Settings API. If you’ve never had a chance to work with it, then either consider using the second way or read a tutorial about Settings API.
- The second method is much simpler, all you need to do is to copy and paste the ready code into your plugin or theme, but in this case you have to have my Simple Fields plugin installed on your website.
That’s what we are going to have by the end of this tutorial:
Sometimes when you work with WordPress multisite network you may need to create a super administrator user not from the dashboard, but from the database with the help of SQL queries.
And in this tutorial I am about to show you how. There are actually only two steps we need to do:
This whole process of changing a user role after making a purchase in WooCommerce actually consists of two steps:
- We have to decide about the hook, when exactly we are going to do a role switching, because there are plenty of them.
- Check the order if there is a specific product (or products) and do the thing.
In this tutorial we will try to make specific variations (out of stock ones) in the variations dropdown list not selectable:
By default WooCommerce allows to select a variation even if it is out of stock and as a result we have a frustrated customer who sees this sad smiley instead of an active “Add to cart” button:
In this tutorial I’d like to show you an example how to replace the default variation select dropdowns with radio buttons without plugins. Maybe for specific WooCommerce product attributes or product IDs only.
Something like that:
We’re going to do it without any plugins, though, you might think that it’d be better to display the “Color” attribute not as radio buttons but as color swatches. Like this:
In this case I would recommend you to take a look at my plugin which allows to do that.
But now let me describe a little bit more what we are about to do in this tutorial:
- We are not going to change any WooCommerce HTML templates, that’s quite a rough method and I noticed that some plugin in WordPress plugin directory are doing that which I think is absolutely unnecessary.
- I will show you a couple of conditions which will allow you to replace variations select dropdowns with radio buttons only for specific products or only for specific attributes.
Now let’s get started.
Recently I’ve been working on a light version of my Simple Inventory Sync plugin which I hope you will see soon in the WordPress plugins directory and I faced with a very interesting task.
I needed to create additional settings fields in WooCommerce > Settings > Products and one of the fields should contain an application password for REST API authentication, so obviously I didn’t want that value to be displayed for anyone who can view the settings pages.
So I needed this:
And more than that I needed to escape an URL in the “Store URL” fields. So, now let’s dive into this in details.