Switching to Gutenberg block editor brings a lot of joy creating content. However, I still missing a lot of features from the classic editor, especially the ability to change text color, background color.
In this post, I’m going to show you how to change color of a particular section of heading or text block.
This is what I’m talking about:
Change text color in Gutenbergheading
Let’s get started.
Pick a color for your text
The first step is to pick a color for your text. If you want to use popular colors such as red, green, blue… you can skip this step.
WooCommerce buttons’ colors are governed by the theme your site is running. By default, WooCommerce does come with some style for their buttons. However, theme makers nowadays usually add their own styling.
In the screenshot below, I have my button with black background:
If I use a different theme, chances are my button’s color is different.
In this post, I’m going to show you the quickest method to change WooCommerce’s buttons color. You can apply this method for other buttons on your site as well.
Let’s get started.
Get the CSS selector of the button
The first step is to get the CSS selector of the button. Open your site in Chrome, right click on the button and select Inspect:
You should see a new window appears. You should see something like this:
That’s is our button, in HTML code.
Now, pay attention to the class part. As I’m in single product page, the button has three classes:
If the button is at a different page, you may see different classes.
If you know CSS, you should have no problem writing CSS selector for this button.
In case you don’t know, here is the selector:
How do we use this selector? Let’s find out in the next step.
Writing CSS rules to change WooCommerce buttons’ colors
First thing first, let’s pick a color for our button. The quickest way to get a color is to go to Google and search for colorpicker:
Let’s drag the sliders (the round buttons) to select the color you want to use. For example, I pick pink as my button’s background color:
Copy the code starts with # under HEX. That’s the color code we need for our CSS rule.
Now, let’s go to your theme customizer by navigating to Appearance->Customize-> Additional CSS and put the follow code at the end of the code box:
Click on the Publish button at the top of the page, then go to the product page, you should see the button’s background is now pink:
Bonus tip: How to change the button’s text color
In my opinion, white text on a dark pink background looks great. However, what if you don’t like this combination. Maybe you want to have yellow text. How can you achieve that?
Let’s go to the color picker on Google and select a color for your button’s text. Then, enter the following line in the customize->additional CSS box:
#f2fc2b is a bright yellow color. Your code in the additional CSS box should look like this:
Then, publish the code again and you should see the result as expected:
What if all of this doesn’t work?
This method works on most themes. However, there are some cases it may not work. Why so? It’s is because some plugins or themes may have stronger CSS rule applied to the button. The CSS people call it rules’ specificity.
If you face such problems, you need to come up with stronger rule, with higher specificity. How can you do that? By preceding the button’s selector with its parents selectors.
Sounds confusing? Yes, it is if you don’t know CSS.
If you don’t want to go through the hassle dealing with writing CSS, let’s try my plugin out. It lets you change button’s color, text, icon… and even the quantity box.
As you can see, changing WooCommerce button’s color is quite simple. Though, it requires some work with CSS. If you don’t want to work with CSS, try out Ultimate Add To Cart Button Plugin. With this plugin, you can create awesome WooCommerce button in just a few minutes.
After installing a plugin/theme or changing something in your WordPress site, you see this message:
That means your site is having some problem with PHP and it stopped functioning. Is this problem serious? Yes, it is. If you are lucky, only part(s) of your site is having that problem. Otherwise, the whole site is down.
How to fix “The site is experiencing technical difficulties”
As I mentioned above, the problem is caused by errors in PHP, and PHP errors can be anything. It maybe some syntax errors, version incompatibility…
As you can see in this picture, a syntax error is the culprit. At this point, if you know PHP, you can go to that file and fix the syntax.
If you just see “The site is experiencing technical difficulties. Then, please check your site admin email inbox for instructions.” Chances are you don’t have WP_DEBUG enabled. Let’s enable that setting in the next section.
How to enable WP_DEBUG and read the error
Enabling WP_DEBUG is easy. Let’s go to the root folder of your website and find the file wp-config.php. Open it with a text editor, scroll down to the bottom of that file till you find this line:
/* That's all, stop editing! Happy publishing. */
You should see this line:
define( 'WP_DEBUG', false);
Change it (or add the following line if you don’t see it) to this:
This time, you should see the detailed message along with “The site is experiencing technical difficulties.”.
If you know how to fix that, it’s great. Otherwise, you should ask someone who knows PHP to fix that for you.
I can also give you assistance if you need it.
After fixing the problem, you should revert the configuration in wp-config.php back to its original (all constants WP_DEBUG, WP_DEBUG_LOG, WP_DEBUG_DISPLAY should be false).
When you see “The site is experiencing technical difficulties.”, your site is having problems with PHP, which could be very serious. The first step is to turn debug on to see what’s the cause. Then, either go fix it yourself or send the error message to someone with experience.
WooCommerce related products, in case you are not aware are the products that displayed at the end of any single product page. By default, WooCommerce get related products for any product by looking for products in the current product’s categories. In addition, products that share the same tag(s) are considered related.
Let’s take a look at the default display of WooCommerce related products in my demo site ( running WooCommerce 3.7.0 & Storefront).
In my case here, I’m viewing a dress and the related products are also dressed since they are from the same category.
What if you want to change the products that display in this section. Maybe you want:
Show products from different categories
Pick some specific products to display in the related product section of this product
Set a different set of related products for one or a few products only
Let me show you how to do that with my new plugin BC Ultimate Related Products.
Before we begin, here are the product categories on my demo site:
Set related products for a category from other categories
Let’s dig into our first case. For example, I want that when people view products of Dress, in the related products section, products from Jeans and Hoodies are shown.
I know this may not make sense. This is just a demonstration of the way the plugin works.
Let’s go to the BC Ultimate Related Products screen. Here is what we have:
To achieve what we need in this case, we only focus on the first section: Pick related products for category by categories
Here is what we are going to do. First, as we need to set two categories as related, let’s click the leftmost plus sign to add another category select box:
Now we have the structure set up, let’s configure the categories.
As you can remember, we need to display products from Jeans and Hoodies as related products when viewing products from Dress. So, here is the correct setting:
Save the settings and view one product from Dress category. Here is what we have:
As you can see, we have successfully complete the case. Products from Jeans and hoodies are shown in the related products section.
Let’s try another case.
Select specific products as WooCommerce related products for a category
In this case, instead of selecting categories for related products, we choose some specific products as related products for all products in a particular category.
If that’s sound confusing, let me give you an example.
Take the Dress category again. This time, we want to setup that when visitors view any product in Dress category, they will see three products that we pick.
Let’s get started.
We are going to focus on the second section of the plugin:
Similar to the above case, we select Dress in the left. However, on the right, it’s not a select box. Instead, it’s a box where you can search products by typing a few characters. There is no limit on how many products you can select.
Let me pick 3 random products for the sake of demonstration.
Save the settings and check one product from Dress category again.
As you can see, I got exactly three products in picked displayed here in the related products section.
We have one case left, let’s begin.
Pick WooCommerce related products for a single product
For some reason, I want to treat some products specially. For example, I want to select only two related products for the dress we use from the beginning of this post.
Here is how to achieve that with BC Ultimate Related Products.
Let’s focus on the third section of the plugin.
On the left, there is a box where you can search for products and pick one product. On the right, it’s similar to the #2 case. It’s a product search box where you can pick multiple products.
Let me quickly pick two products as related product for the TSE Cashmere… product.
Let’s save the settings and view the product page:
As before, we achieved what we planned!
As you can see, this plugin is very helpful when you want to customize related products section for a category or a single products. Please let me know if you have any questions.