Woocommerce shop page empty with the result count 1 product randomly

Last week, my customers report a weird bug that the Shop page of Woocommerce is blank / empty. It appeared randomly, and it’s fixed when I re-save the permalink.

When researching some related issue, I found that on WPML forum (because the site I’m working with has WPML also), there are some users reported about this bug. According to this guy, the bug is fixed when he disabled the Yoast SEO plugin. I tried and it works, but the main point is I can’t deactivate Yoast SEO since it’s related to my theme breadcrumbs and other SEO settings, so the journey began here.

I’ve worked with many Woocommerce sites and this is the first site has the weird bug like this. I tried to compare all the different things between this site and the others.

I didn’t remember why I’ve setup the permalink for this site is different from the others, but it’s the key settings that cause this bug.

I used the same slug for both Shop page and product detail page, because in Vietnamese, “products” and “product” has the same slug “san-pham” (there is no differences between the singular and plural noun). That’s why shop page only displayed 1 product in the result count, it’s for the product detail query.

After updating the shop page slug, this issue is fixed (I’ve kept checking this issue for some days to make sure that it’s fixed). The most important lesson I’ve learnt is “Don’t use the same slug for shop page and product detail“.

Override wp_localize_script from Gravity Forms function

Looking at the code of Gravity Forms, I found that for some scripts, it uses wp_localize_script function to add their own definitions inline page source. The question I asked myself is is it possible for me to override their code, and how can I override their code without editing plugin source? Let’s see 👀 ~~

I get used to override the scripts from Gravity Forms by gform_enqueue_scripts, it’s their own hook to add the assets to our site. For example, in my case, I need to override the variable spinnerUrl in gf_global, I can begin by adding some extra code in this hook.

When researching, there is no options from WordPress to do something like de-localize the scripts (just like we have wp_dequeue_script), so I’m thinking to adding the same variable after the scripts localize. There will be 2 variables displayed so the scripts will get the latest variable.

That’s my example code to override the Spinner URL from Gravity Forms by wp_localize_script, there is another way simpler by using PHP but it’s my first try to use wp_localize_script ⚗️.

Customize WordPress Database Error Page

When doing some research for the new version of my Fiber Admin WordPress plugin, I found that in the core code of WordPress, they allow us to override the default Database Error Page. It will tell the whole world that you’re using WordPress and your website is having some problems with the database connection 👎.

Default WordPress Database Error Message

Luckily, WordPress has feature to allow us customize this default page. Let’s give it a try!

Follow the instruction I found with CSS Tricks here. I found that we can customize the DB Error page by a file called db-error.php in wp-content. But why this file?

In wp-includes/functions.php, WordPress has a function called dead_db which you can see they will allow us to load custom template for the Database Error Page, the custom template will be named with wp-content/db-error.php.

WordPress function dead_db

With db-error.php, we can add inline CSS and customize the content of this page so it will look different from the default DB Error Page which is applied to all the other WordPress pages.

Some tips I found:

  • You may want to put your logo image on this page so the users will know exactly which error message is belong to.
  • Make sure to include the error code like 503 on this page. It’s for DB error message, so the error code should be 503. It will help you know exactly what happened with your site.
  • Some security plugins can prevent displaying the db-error.php file. For example, Sucuri Hardening option can prevent this custom file display because they harden all the PHP files inside wp-content folder. You may need to add extra rules to exclude the db-error.php file.

Add plugin requirements to WordPress theme without breaking the site

After deciding to separate framework into a plugin for inhouse dev, I need to implement the feature to force my theme require framework plugin installed and activated. Since I use many helper functions in Framework, so the theme need Framework plugin to run without any issues.

It’s the solution how I can make my theme requires Framework plugin. I don’t think it’s the best solution but it works in my case (may be I will update the better solution in the future).

What I need will be:

  • Show notice in admin if the Framework plugin is not activated.
  • Make plugin requirement without any issues if the plugin haven’t been installed yet.

This is the final code I added to the very first line of my theme functions:

It will stop functions.php at the line checking for plugin active, so the theme doesn’t run the other code (with unknown Framework helper functions) and doesn’t break the site also.

Update equeued file sources in WordPress

Today I have a problem when building obfuscation code for my team. After creating the uglify files, I need to replace all the original file sources with the uglify ones. The most important thing is I want the code still works with WP Rocket plugin.

After a quick research, I found that WordPress has many hooks to adjust the assets.

First of all, I think I need to list all the scripts and styles enqueued, so I found this link. It’s pretty cool that I can get all the things enqueued, but I can’t change the enqueued resources with this hook because it’s called when the resources already enqueued.

Because I just want to get all the enqueued scripts, so I tried with the filter script_loader_src which I’ve used to remove query string from some core WordPress scripts before. I think it’s the correct filter I need, it has the $source variable for me to update, and the $handle to filter out which scripts I need to replace. Cool! Let’s do the code!

The main purpose of this code is getting all the enqueued resources, filter out which has my theme prefix in the $handle to update the resource URL. The final code will be something like this:

That’s it 🎉