Author: Đạt Trần

Posted on by — Leave a comment

How To Randomize Products On Category & Shop Page In 5 Minutes

I recent got a request from a friend of my to randomize the products display on his store’s categories. The reason is his site has so many categories and many of them have parent-child relationship. As a result, the display of many categories are identical.

Let me give you one example. My friend sells furniture. He has one category for indoor decoration (category A) and another for living room decoration (category B). A is B’s parent, obviously. When viewing the category page of B, you’ll see only B’s products. However, when viewing the category page of A, you’ll see category B’s products too. If B has enough products (more than the limit products per page), you may see category A’s page looks exactly like that of B.

Possible solution

We came up with two possible solutions. One is to manually setup the products for each category page. This is time consuming and requires more coding works. The other is to randomize the display of products on every category page so they don’t look the same.

We end up going for the 2nd solution since it’s faster and easier.

How to randomize products in category page

It turned out, the solution is very simple. Simply put the following code at the end of your theme’s functions.php file (make sure to use a child theme).

add_action('woocommerce_product_query', function($q){
	$q->set('orderby', 'rand');
});

Save the file and check your category pages. You should see the products are displayed in different order every time you refresh the page.

This works on shop page too.

What if you want to exclude shop page? If you want to keep the order on your shop page intact, read on.

How to exclude shop page products from being randomized

To exclude shop page, simply replace the code above with this:

add_action('woocommerce_product_query', function($q){
	if (is_shop())
		return $q;
	$q->set('orderby', 'rand');
});

As you can see, I added a conditional tag to exclude shop page. If you know PHP, the code above should be easy to understand.

Conclusion

Randomize products in category pages is an easy way to avoid duplication. This method is not ideal, of course. If you want to configure exact products for each category, you’ll need to get or build a plugin. However, for a quick solution, this one is good.

And my friend is happy.

Posted on by — Leave a comment

How To Stop Contact Form 7 From Adding P Tags Around Elements

contact form 7 disable auto p

Contact form 7 is a great tool to build your contact form (though its interface is not as flashy, modern as other plugins). I use contact form 7 on all my sites and it does its job really well. There is only one problem, it automatically adds paragraph(p) tags around my elements.

This is my form code:

<label>Your email</label>
<div>[email* your-email]</div>

<label>Your questions (provide as much details as possible)</label>
<div>[textarea* your-message 40x5]</div>

[submit]

And this is what is generated on the front end:

How To Stop Contact Form 7 From Adding P Tags Around Elements 1

The problem with p tag is they usually significant margins so your form may look much taller than it needs to be.

From what I see, contact form 7 only wrap the p tag around inline elements . It’s a CSS term for elements that don’t stand on a separate line such as a, span, label…

Today, we are going to find out methods that stop contact form 7 from adding p tags around any elements on our form.

Easiest method: Wrap div tag around your inline elements

This is the easiest method and any one can do this. Since contact form 7 only wrap p tag around inline elements, wrapping div around your label, span will stop this behavior. Reason? div is a block element (that means it stands on its own line).

So, for example, previously, your code is:

<label>Your email</label>

Now, to stop contact form 7 auto p, you need to write this:

<div><label>Your email</label></div>

You need to do this for all inline elements on your form. If you don’t know, they are:

  • label
  • input
  • a (link tag if you put it in)
  • span

That’s the easiest method. If you think wrapping div tag around elements is time consuming and want to try other method, read on.

Quickest method: Adding a constant to your wp-config.php file

I have to say this method is not for everyone. To implement this method, you need two things:

  1. Access to your site’s root folder (where wp-config.php is located)
  2. You know how to edit wp-config.php file

For people who know a bit of coding, the second requirement is trivial. In addition, most hosting companies let you access to your website’s root folder via cpanel/ssh/ftp. So, if you are confident, let’s get started.

Let’s open you wp-config.php file and find this line:

/*That’s all, stop editing! Happy publishing. */

and enter the following code above that line:

define( 'WPCF7_AUTOP', false );

Then save the file and you are done.

What you have done is to define a constant that lets contact form 7 know to stop wrapping p tag around your form elements.

Simple, isn’t it.

Something-in-the-middle method: Edit your functions.php file

OK, let’s discuss the last method. If you are still here, either you can’t do the 2nd method due to its complexity or you don’t want to spend your precious time adding div tags around form element as mentioned in method #1.

So, let’s create a child theme (if you haven’t) and put the following code at the end of the functions.php file of that theme:

add_filter('wpcf7_autop_or_not', '__return_false');

Save the file and you are done!

What I like about this method is it’s quick and you can do it if you have admin rights on your site.

Conclusion

Contact form 7 is great but the way it wraps p around inline elements isn’t. I’ve introduced you three methods to disable that behavior. Hopefully you can implement one (implement more than one method is redundant). If you have questions, feel free to ask.

Posted on by — 2 Comments

How To Exclude Tags, Categories From Google Index

How To Exclude Tags, Categories From Google Index 2

One of the most serious SEO problem is duplicate content. That is having the same content on different URLs. Google doesn’t like this for one obvious reason: no one like reading the same content over and over again.

What is a tag/category page?

In case you don’t know tag and category pages are, they are the pages that list all posts in the same category or share the same tag.

Here is one example of tag page:

How To Exclude Tags, Categories From Google Index 3

If you format your URL based on name, you should see /tag/ in the URL. The same thing can be seen with category.

Letting Google index your category and tag pages is way more serious than duplicate content. In my own observation on my site, category and tag pages usually rank higher than the posts. That means you spend hours optimize your posts to meet all SEO requirements and they will end up no where (because your tag/category pages rank higher).

That’s why you need to mark tag and category pages as noindex to avoid this problem.

How to mark tag and category pages as noindex?

To stop Google from indexing your tag/category pages, you need to let it know by adding a noindex meta tag to such pages. If you don’t know much about coding, no worries. There is no coding required.

To accomplish this, I assume that you have Yoast SEO plugin installed. Let’s begin.

First, go to SEO->Search Appearance

How To Exclude Tags, Categories From Google Index 4

Let’s click on Taxonomies:

How To Exclude Tags, Categories From Google Index 5

Now, under that tab, you’ll see these sections:

How To Exclude Tags, Categories From Google Index 6
How To Exclude Tags, Categories From Google Index 7

If you don’t see the content of such sections, click on the title to show.

Let’s look at the settings that I underlined with red. If you select Yes, the tag/category pages are indexed by Google. If you select No, a noindex meta tag is added to all tag/category pages. As a result, Google will not index those pages.

If your tag/category pages are already in Google’s index, don’t worry. Google bot will remove them the next time it crawls your site.

If you take a look at the page source now, there is a noindex meta tag there:

How To Exclude Tags, Categories From Google Index 8

Conclusion

This subtle change can have a huge impact on your goals (sales, ads click…) since your reader will see the more targeted pages instead of category/tag pages. Also, it may also help you improve your search result click through rate because the title of a single post is always more optimized than that of category/tag pages.

Posted on by — Leave a comment

How To Exclude Categories From Adsense Auto Ads

There are plenty of plugins available that lets you install adsense auto ads to your site. I have adsense on my site too.

Initially, my method is to inject the ads code to the head of my site. It works. However, since now I have WooCommerce plugins to sell, I want to disable ads on post categories that related to WooCommerce (Because I have ads for my products there).

Also, I have a custom post type (which is the sales page of my products) that I want to exclude from displaying ads too.

I searched for a plugin that does just that but no avail (After 10 minutes searching on Google. I’m impatient, I know). So, I decided to make one that does the job for me.

Meet the WordPress plugins that let you enter ads with options to exclude form categories/custom post types

So, here is what I created:

How To Exclude Categories From Adsense Auto Ads 9

You can download the plugin here:

Download Simple Auto Ads pluginDownload

As you can see, the interface is quite busy. However, there are three main sections:

  1. A textarea where you can enter your auto ads code from Google Adsense
  2. Next is the list of categories on your site. If you want to exclude a certain category, simply select it
  3. Finally, here are the list of custom post types on your site. I have 4 custom post types on my site. You may have more or less. Check the types that you don’t want to show ads

Now you may ask, how can you exclude ads from WooCommerce product pages? Well, if you have WooCommerce installed, in the list of custom post types, you’ll see one option named “product”. Check that box if you want to exclude WooCommerce from showing ads.

Here is my configuration:

How To Exclude Categories From Adsense Auto Ads 10

As you can see, I excluded all categories related to WooCommerce and one custom post type called bc_app. This is the pages where I sell my plugins.

Conclusion

Hopefully the plugin is useful to you. If you have any suggestions or feature requests, simply comment below.

Posted on by — Leave a comment

How To Create Pre-Order Products With WooCommerce

woocommerce pre orders

Pre-order products are not something strange to us. We see them all the time. For example, game producers usually let people order their games before the release date.

The main benefit of pre-order products is to get some funding even when the product is not available. For example, you may need a bit of capital upfront to develop the product. Another benefit is to see how much your customers want the product you are making (stocking…) Whatever the reason, pre-order products can be a great option for your store.

How to create pre-order products in WooCommerce

WooCommerce itself doesn’t support pre-orders by default. However, there are many plugins available to help you accomplish this. I’ve tried some and found the one from WooCommerce store itself is the easiest to use. You can get it below to get started.

Get WooCommerce Pre-Orders

Create a Pre-order product

Now I assume that you have WooCommerce Pre-Orders plugin installed and activated. Let’s create a product that enable your customers to pre-order it.

Now, go to Products->Add new and scroll down to product data area, you’ll see there is a new tab called pre-orders:

How To Create Pre-Order Products With WooCommerce 11

The details of that tab is quite simple but enough for your to enable a product to be pre-orderable (That’s my made-up word)

I’ll explain the fields briefly since they are straightforward enough:

  1. Enable pre-orders: This is obvious. If you want to enable pre order for the current product, check this box
  2. Availability Date/Time: The date, time that this product is available for the customer to use. It should be the day you deliver the product to your customer
  3. Pre-order Fee: Do you want to charge an EXTRA fee for this pre-oder. Note that this fee will not be deducted from the product price. Most products I see on the market don’t charge a pre-order fee.
  4. When to charge: You can either charge now or charge when the product is shipped to the customer. Normally, stores will charge upfront. However, if you don’t need cash upfront, you can choose to charge later (upon release)

Now let’s quickly fill some details to make a valid pre-order enabled product.

How To Create Pre-Order Products With WooCommerce 12
How To Create Pre-Order Products With WooCommerce 13

As you can see that, the test product is a simple product that has regular price at $60 and sale price $45. Let’s make a test order.

Making a test order on pre-order product

Let’s click on the pre-order now button and walk through the checkout flow. Note that if your customer has other products in cart, those products are removed since pre-order products must be order separately.

Let’s go to the cart page. You’ll notice that other than an available notice right below the product name, there isn’t any difference from a cart page of normal products:

How To Create Pre-Order Products With WooCommerce 14

Let’s finish the checkout. As the admin of the site, you’ll see the pre-order appears in WooCommerce->Pre-orders:

How To Create Pre-Order Products With WooCommerce 15

Some cautions

Now you see that creating pre-orders products in WooCommerce is quite simple. However, as I mentioned above, pre-order products must be ordered separately. That means you can’t have two pre-order products in one cart.

You may say that you can use grouped products to group multiple products together. That doesn’t work too.

The only option as I know now is to create a product bundle (you will need another plugin from WooCommerce :O). However, using product bundle doesn’t bring much flexibility. Your customer still can’t order two or more random pre-order products together.

Conclusion

As you can see, with the help of WooCommerce pre-orders plugin, you can create pre-order product quite easily. However, this plugin works best if you only have one product in store (think about a video game that has its own domain) or a store that people will buy products separately. If your customers usually order multiple products including “buy it now” products, this product may not be your choice.

If this plugin fits your need, great! Click here to get it now