Woocommerce: Display All Products Eligible For Coupons

If you are running Woocommerce for your online shop, there is a feature where you can set up coupons for your customers to use. If you want your coupons to be used only on certain products in your shop instead of shop-wide, you can also do so. Woocommerce allows you to add products of your choice to certain coupons, so that customers will be able to get discounts when they buy those products, given that they know what the coupon codes for those products are. This feature does not require any Woocommerce extensions, it’s one of Woocommerce core features.

There could be times when you want to allow your customers to filter products in your store and display only the ones that are eligible for coupons. One reason is to encourage your customers to buy those products instead of other products in your store. In my case, a client asks that all products on their store that are eligible for coupons to be shown with a little image that says “discount with coupon”.

So this is how to do it.

Step 1: Get all published coupons

First we use WordPress get_posts function to retrieve all published coupons.

Step 2: Get all coupon ID of active coupons

Now the variable $coupons in the code above contains all data about all the published coupons we have. But we only want coupons that are still active (not yet expired). And we only want the ID of these coupons. So we add this:

Step 3: Get all product ID of products associated to a coupon

From the code above, we now have an array of coupon IDs of all active coupons in the store. Now with each coupon ID we have, we’re going to retrieve all product IDs associated to it. So we do this:

This may not be the cleanest way to do it, but it gets the job done anyhow. Basically what we did above is we loop through active coupon IDs, retrieve product IDs associated to each coupon, and then store those products IDs in a variable, different variable for each coupon. So we got $coupon1_prod_ids which stores an array of product IDs associated to coupon 1, and then $coupon2_prod_ids which stores an array of product IDs associated to coupon 2, and so on.

Step 4: Merge all product IDs in Step 3 into a variable

The final step is to merge all the product IDs we got from above into an array variable so that we could use the data to do whatever we want.

With the code above, all the data we want is now stored in an array called $product_ids_with_coupons. This array now contains all product ID of products that are eligible for coupons. From here on, you could do things like comparing the ID of the current product in a loop against this array and determine if it matches.

Example

Here’s an example of the usage:

If you’ve got a cleaner solution, please feel free to share it!

Child Theme Doesn’t Look Like Parent Theme? Here’s The Fix

You have just created a WordPress child theme. You followed closely the guide found on WordPress Codex as well as on WordPress developer theme handbook. But there seems to be a problem. Once you activated your child theme, it doesn’t look like its parent theme. Shouldn’t a child theme inherit everything from its parent theme? If so, why doesn’t your child theme look exactly like the parent theme? Here’s what to look for in order to fix this.

There are two things you should check first:

  1. Have you copied custom css, widgets, theme options and configurations (including what you customized using WordPress customizer) from the parent theme over to the child theme?
  2. Have you successfully enqueued all the parent theme’s stylesheets and set their dependencies (such as font awesome, bootstrap, etc) accordingly?

Okay, let’s go through all the above one by one.

#1: Copy Parent Theme’s Options Over To Child Theme

Most WordPress themes these days have their own theme options page where users can customize the theme’s styles, fonts, and a lot more. Most also include custom css and custom js section where users who know css (and/or javascript) could change the site’s style and action via css and/or javascript.

The first thing you need to remember when creating a child theme is, a child theme will NOT inherit theme options, widgets, and custom css of its parent theme.

And you have to remember, for your child theme to look like the parent theme, you would have to copy ALL these theme options (including the custom css and js codes) from the parent theme to its child theme. Those widgets you configured for the parent theme? You have to reconfigure that once you activate the child theme. But lucky for you, themes with gazillions of options out there usually have an Import/Export feature so that you could export all your options and configurations into a file and import it back into your child theme with just a few clicks.

But what if your theme doesn’t have this Import/Export feature?

Well, the main reason you create a child theme is to add your own styling and customization to an existing theme. A child theme is to make sure the customization won’t be wiped out once the theme is updated. But understandably, not everyone wants to get their hands dirty by creating files and editing codes. That’s why a lot of themes these days have a more user-friendly theme options where users could change the look and feel of the theme just by clicking buttons without having to touch the theme files at all. And if you are already doing this, then you probably don’t need a child theme anyway. Amirite?

#2: Enqueue Parent Theme’s Stylesheet and Set Its Dependencies On a Child Theme

If your parent theme is a fresh install and you haven’t configured any options but your child theme does not look like the parent theme, the first thing you should check is the way you enqueue the parent theme’s stylesheet (style.css file). Are you enqueuing the parent theme’s stylesheet correctly?

From WordPress Codex, this is how you do it:

But copying the code above into your child theme’s functions.php¬†(and replacing ‘parent-style’ accordingly) is sometimes not enough. You have to look for its dependencies and make sure to set it as so.

Let’s use Shaped Blog theme found on WordPress.org theme directory as an example.

The Shaped Blog theme defines its main stylesheet as ‘shaped-blog-stylesheet’ in functions.php. Other than that, it also defines three other css files. All these are done in functions.php. Below is the code:

Naturally, looking at the code above, bootstrap css will load first, followed by font awesome css, followed by style.css, and then responsive css. That works well for the theme. But what if we want to create a CHILD theme for this Shaped Blog theme?

Without setting up any dependencies, parent theme’s style.css file will load FIRST, and then child theme’s style.css file, followed by the other three (bootstrap-css, font-awesome-css, responsive-css). This will cause your child theme to look a tad different from its parent theme, i.e. you will notice the fonts are different, among others.

In order to fix this, in the child theme’s functions.php file, you will have to set the parent theme’s stylesheet dependencies. This is to make sure the parent and child theme’s style.css files load AFTER the css files they depend on, like so:

Notice in Line 5 in the above codes, dependencies are declared as an array and then set in Line 7. This way, bootstrap css file will load first, and then font awesome css file, followed by the parent theme’s style.css file and then the child theme’s style.css file. Having bootstrap and font awesome to load first, child theme now will look just like its parent theme.

Still Need Help?

If you still need help with creating child theme, you can contact me for a quote.

Get Woocommerce Current Product Category In Single Product Page

First of all, Woocommerce products are stored on WordPress as custom post type (CPT) named ‘product’. The product categories are custom taxonomy named ‘product_cat’.

Let’s say you want to show a simple line of text that tells your visitors the shipping flat rate of a product, and you have different rates for different product categories. For an example, you have two different product categories in your shop, which you named them as tshirts and hoodies.

Tshirts have shipping flat rate of $10.00 while hoodies have flat rate of $15.00.

This is how you check for current product category (either tshirts or hoodies) on a single product page. This is used inside the loop.

That’s it!