How To Change Gutenberg Heading & Text Colors

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 Gutenberg heading

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.

However, if you want to be more precise, using a color picker is a must. I have tutorial on color picker here, please have a look.

Now, let’s say you have your favorite color, let’s move on to the next step.

Change a word, a phrase or a chunk of words’ color

To apply a color on a part of text of headings/paragraph, you need to enable the HTML editor function that is available on all Gutenberg text blocks.

First of all, click on the block that you want to edit and click on the three vertical dots icon:

Then, click on Edit as HTML

Then, you block will turn into a HTML editor. This is where we are going to change the color for a chunk of text.

For example, I have the following text:

sample text block

As you may guess, we are going to apply the red color on RED and green on GREEN.

I’m going to use this red color: fc0328 and this green color: 03fc18

Here is how I’m going to achieve that:

And sure enough, we have the color as desired:

How it works?

The code looks confusing. However, if you look closely, it’s quite simple. To apply any color to any chunk of text, simply put this code at the start of that chunk:

<span style="color: #your_hex_color;">

And end that chunk with:

</span>

That’s all the mechanic required to change text color in Gutenberg.

Conclusion

Gutenberg is new and we should give it time to mature. In the meantime, accessing HTML editor is one of the best way to achieve some customization that is not available yet.

Easiest Way To Change WooCommerce Button Color

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:

  1. single_add_to_cart_button
  2. button
  3. alt

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:

button.single_add_to_cart_button.button.alt

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:

button.single_add_to_cart_button.button.alt {
	background-color: #d92bb3;
	
}

The box should look like this:

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:

woocommerce buttons background color changed to 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:

color: #f2fc2b;

#f2fc2b is a bright yellow color. Your code in the additional CSS box should look like this:

changing text color for woocommerce button

Then, publish the code again and you should see the result as expected:

button text color is now yellow

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.

Checkout ultimate add to cart button plugin here.

Conclusion

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.

How To Fix “The site is experiencing technical difficulties” In WordPress

After installing a plugin/theme or changing something in your WordPress site, you see this message:

The site is experiencing technical difficulties in WordPress

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…

If you have WP_DEBUG enabled, you should see additional details of the error:

detailed error message provided by wordpress

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:

define( 'WP_DEBUG', true);

Add two more line below that line:

define( 'WP_DEBUG_LOG', true);
define( 'WP_DEBUG_DISPLAY', true );

Save the file and reload your site.

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).

Conclusion

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.

#1 Plugin To Customize WooCommerce Related Products

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).

Default woocommerce related products display

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:

List of categories

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:

Set related products for a category from other categories

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:

Add new related category

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:

Selecting related product category

Save the settings and view one product from Dress category. Here is what we have:

Related products display correctly

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:

Selecting multiple related products for a category

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.

Done selecting multiple related products for a category

Save the settings and check one product from Dress category again.

Selected products for category display correctly

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.

adding related products for a single product

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.

pick two related products for one product

Let’s save the settings and view the product page:

related products shown

As before, we achieved what we planned!

Conclusion

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.

Create WooCommerce Products Search Input For Your Plugins

As I develop more and more plugins for WooCommerce, a need for WooCommerce product search emerges. You know, this kind of product search:

If you ever need the full source code of this plugin, please visit this github repo

Let’s learn how to create a field like that so you can use in your plugin.

How to create WooCommerce products search select box

Let’s go through the steps to create a product search input for you plugin:

  • Enqueue select2 library
  • Create HTML structure
  • Write the needed Javascript to enable search

Enqueue select2 library

Select2 is a jQuery plugin that does many amazing things including enable search for traditional select box. It also supports getting list from ajax (which is exactly what we are going to do).

Enqueuing select2 is simple. Let’s create a class for our plugin and put the following code

<?php
/**
 * Plugin Name: BC AJAX Product Search
 * Plugin URI: https://www.binarycarpenter.com/
 * Description: Enable ajax product search
 * Version: 1.0.0
 * Author: BinaryCarpenter.com
 * Author URI: https://www.binarycarpenter.com
 * License: GPL2
 * Text Domain: bc-ajax-product-search
 * WC requires at least: 3.0.0
 * WC tested up to: 3.6.3
 */


class BC_AJAX_Product_Search
{
	public function __construct() {

		add_action('admin_enqueue_scripts', array($this, 'enqueue_admin'));
		add_action('admin_menu', array($this, 'add_to_menu'));

	}


	public function add_to_menu()
	{
		add_menu_page(
			'BC Product Search',
			'BC Product Search',
			'manage_options',
			'bc-product-search',
			array($this,'plugin_ui')
		);
	}

	public function plugin_ui()
	{

	}


	public function enqueue_admin() {
		wp_register_style('my-plugin-select2-style', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css');
		wp_enqueue_style('my-plugin-select2-style');

		wp_register_script('my-plugin-select2-script', 'https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js', array('jquery'));
		wp_register_script('my-plugin-script', plugins_url('static/scripts.js', __FILE__), array('jquery'));
		wp_enqueue_script('my-plugin-select2-script');
		wp_enqueue_script('my-plugin-script');
	}


}

new BC_AJAX_Product_Search();

As you can see, I have enqueue select2 from a CDN. In addition, I also enqueued a Javascript file called scripts.js. This is where we put all our Javascript code.

Finally, I have added a blank function for displaying the UI: plugin_ui. This is the function that output the HTML for the plugin. Let’s do that next.

Create HTML structure

HTML code for this plugin is very simple. We only need a blank select with class. Let’s add that:

public function plugin_ui()
	{ ?>
		<h1>Select your products</h1>
		<select data-security="<?php echo wp_create_nonce( 'search-products' ); ?>" multiple style="width: 300px;" class="bc-product-search"></select>
	 <?php }

As you can see, I enabled multiple setting for this select box. You can disable that if you don’t want to.

This is what we have so far:

That’s all we need to add for our HTML. Let’s make the product search works with Javascript.Write the needed Javascript to enable search.

Write the needed Javascript to enable search

Let’s put the following code in scripts.js

(function ($) {
    $(function(){
        $('.bc-product-search').select2({
            ajax: {
                url: ajaxurl,
                data: function (params) {
                    return {
                        term         : params.term,
                        action       : 'woocommerce_json_search_products_and_variations',
                        security: $(this).attr('data-security'),
                    };
                },
                processResults: function( data ) {
                    var terms = [];
                    if ( data ) {
                        $.each( data, function( id, text ) {
                            terms.push( { id: id, text: text } );
                        });
                    }
                    return {
                        results: terms
                    };
                },
                cache: true
            }
        });
    });

})(jQuery)




Save the file and check the plugin. The product search is now working.

How to get data from the select box

If you have used select2 before, getting value from select2 select boxes shouldn’t be alien to you. For those who don’t know, it’s very simple.

Let’s add a button to log the values of the select box:

<button class="show-selected-results">Show select results</button>
$('.show-selected-results').on('click', function(){
       console.log($('.bc-product-search').val());
});

Now we have the button:

When you click on that button, open the console of your browser, you should see the values:

product search result

As you can see, they are an array of product ids.

Conclusion

As you can see, it is quite simple to add product search function in your plugin. Hopefully this post is valuable to you. If you have any questions, please let me know.