Installing Let’s Encrypt on Ubuntu 16.04 with Apache server

sudo apt-get install python-letsencrypt-apache

Resource: How To Secure Apache with Let’s Encrypt on Ubuntu 16.04
Resource: How to install and use Let’s Encrypt on a Ubuntu Server for SSL security

WooCommerce 3.1.2: How to restore “add to cart” button in product category page

I noticed “add to cart” (or “select option” for variable products) buttons are no longer there with the most recent version of WooCommerce.
I checked content-product.php to see if the button was removed…it was not according to their template comment:

/**
 * The template for displaying product content within loops
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly
}

global $product;

// Ensure visibility
if ( empty( $product ) || ! $product->is_visible() ) {
	return;
}
?>
<li <?php post_class(); ?>>
	<?php
	/**
	 * woocommerce_before_shop_loop_item hook.
	 *
	 * @hooked woocommerce_template_loop_product_link_open - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item' );

	/**
	 * woocommerce_before_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_show_product_loop_sale_flash - 10
	 * @hooked woocommerce_template_loop_product_thumbnail - 10
	 */
	do_action( 'woocommerce_before_shop_loop_item_title' );

	/**
	 * woocommerce_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_template_loop_product_title - 10
	 */
	do_action( 'woocommerce_shop_loop_item_title' );

	/**
	 * woocommerce_after_shop_loop_item_title hook.
	 *
	 * @hooked woocommerce_template_loop_rating - 5
	 * @hooked woocommerce_template_loop_price - 10
	 */
   
	do_action( 'woocommerce_after_shop_loop_item_title' );

	/**
	 * woocommerce_after_shop_loop_item hook.
	 *
	 * @hooked woocommerce_template_loop_product_link_close - 5
	 * @hooked woocommerce_template_loop_add_to_cart - 10
	 */
    
   	do_action( 'woocommerce_after_shop_loop_item' );
	?>
</li>

Regardless, the button is still not there so I added the button again in the current theme’s functions.php (since I wasn’t making any other overwrite):

//woocommerce - restore "add to cart" button in product category page
add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 20 );

And voila, it’s back.

The same disappearance behavior was observed in multiple themes…so I’m suspecting something happened in WooCommerce plugin (as opposed to a theme-related bug).

Include CSS the right way in a WordPress’ child theme

We really should be using wp_enqueue_style functions to include your theme’s stylesheets rather than using @import statements. The enqueue functions allows us to specify dependencies in much better way.

//enqueue style for child theme
function  custom_child_enqueue_styles(){
	// enqueue parent styles
	wp_enqueue_style('parent-theme', get_template_directory_uri() . '/style.css' );
	// enqueue child styles - style.css
	wp_enqueue_style('parent-theme-child', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
	// enqueue child styles - scss/child.css
	wp_enqueue_style('parent-theme-child-scss', get_stylesheet_directory_uri() .'/scss/child.css', array('parent-theme', 'parent-theme-child'));
}
add_action('wp_enqueue_scripts', 'custom_child_enqueue_styles');

CLI command cheatsheet – Git

I still can’t memorize these:

## To stage your whole working tree:
git commit -a

## to force commit
git push origin master --force

##clone to a specific folder
git clone https://example.com/path/to/gitfile.git destination-folder-name

CSS Trick – anchor position adjustment

HTML

<ul>
  <li><a href="#link1"</li>
  <li><a href="#link2"</li>
</ul>
<a name="link1" class="anchor"></a>
<p>Some content goes here.</p>
<a name="link2" class="anchor"></a>
<p>Some content goes here.</p>

CSS

.anchor {/*anchor link*/
	display: block; 
	position: relative; 
	top: -50px; 
	visibility: hidden;
}

How to change thumbnail size for Divi’s gallery module

post_thumbnails_divi.php is where Elegant Themes‘ Divi specifies the custom image sizes:

add_theme_support( 'post-thumbnails' );

global $et_theme_image_sizes;

$et_theme_image_sizes = array(
	'400x250'  => 'et-pb-post-main-image',
	'1080x675' => 'et-pb-post-main-image-fullwidth',
	'400x284'   => 'et-pb-portfolio-image',
	'510x382'   => 'et-pb-portfolio-module-image',
	'1080x9999' => 'et-pb-portfolio-image-single',
	'400x516'   => 'et-pb-gallery-module-image-portrait',
	'2880x1800' => 'et-pb-post-main-image-fullwidth-large',
);

$et_theme_image_sizes = apply_filters( 'et_theme_image_sizes', $et_theme_image_sizes );
$crop = apply_filters( 'et_post_thumbnails_crop', true );

if ( is_array( $et_theme_image_sizes ) ){
	foreach ( $et_theme_image_sizes as $image_size_dimensions => $image_size_name ){
		$dimensions = explode( 'x', $image_size_dimensions );

		if ( in_array( $image_size_name, array( 'et-pb-portfolio-image-single' ) ) )
			$crop = false;

		add_image_size( $image_size_name, $dimensions[0], $dimensions[1], $crop );

		$crop = apply_filters( 'et_post_thumbnails_crop', true );
	}
}

I wanted to modify the “et-pb-gallery-module-image-portrait” thumbnail size to be 500×500. Since I was using a child theme, my thought was to copy the post_thumbnails_divi.php into the child theme and change the value there.

…Nope, that didn’t work.
Continue reading “How to change thumbnail size for Divi’s gallery module”

When to upgrade T2 instances on AWS – CPU usage

AWS currently offers five levels of T2, Burstable Performance, instances on EC2. T2 instances “provide a base level of CPU performance with the ability to burst above the baseline.”

What’s not obvious from the general documentation page is that what’s the easy indicator to determine if you need to upgrade your T2 instance to the next level.

T2 Instance CPU Baseline Performance

What I found to be the best/quickest way to figure out when to upgrade T2 instance is to look at CPU Utilization (Percent) chart on the monitoring section for the instance. You need to compare the average usage of the CPU and the baseline of the T2 instance (above the baseline means the server is in the “burst” mode which uses the extra CPU credits).

Here are the baseline of each T2 instances:

Instance TypeCPU Baseline Performance
t2.nano5%
t2.micro10%
t2.small20%
t2.medium40%
t2.large60%

CPU Credit Usage and CPU Credit Balance

CPU credit usage chart and CPU credit balance chart are also good indicators. However, when the credit usage is too rapid, you might not be able to catch the issue in time to resolve the performance issue. The decrease in the credit balance is recorded only AFTER the server is performing beyond baseline performance. In other words, it’s not a good PREVENTATIVE indicator.

But Beware…

This is a simple way to measure the performance of the server reflected on CPU usage. There are other resources that causing the issue on your server(s). The most common issue I experience is the depletion of available memory. This happens if I am running a multiple servers (such as LAMP) under one instance. While CPU usage is within a normal range, not too uncommon to run out of available memory and your application stop running properly. I find that t2.nano instance and t2.micro instance aren’t sufficient to run a LAMP in most cases.

Resources: New Low Cost EC2 Instances with Burstable Performance
Resources: EC2 Update – T2.Nano Instances Now Available
Resources: Burstable Performance Instances

jQuery conflict in WordPress 4.5 and WooCommerce 2.5

If your WooCommerce site is having a problem since you upgraded your WordPress to version 4.5, the problem might be associated with jQuery version that came with the new WordPress.

WordPress 4.5 “Coleman” comes with jQuery 1.12.3, the first version 1.12.0+. Previously it was using 1.11.x.

Check to see if your site generates script error(s). My script error after the WordPress upgrade was

 Syntax error, unrecognized expression: a[href*=#]:not([href=#])

I discovered when I wasn’t able to add a variable product to a shopping cart (the product page did not show the product price after all the options are selected, and displayed “please choose options” message)

Solutions

If you haven’t upgraded WordPress 4.5, my recommendation is to hold off the ugprade for now. If you already have upgraded, then you can add the following code to your theme’s functions.php to downgrade jQuery version:

// Downgrade to jQuery given version
function downgrade_jquery() {
  global $wp_scripts;
 
  if ( !is_admin() ) :
    wp_deregister_script('jquery');
    wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js', false, '1.11.3');
  endif;
}
add_action( 'wp_head', downgrade_jquery() );

How to darken post background images in Fable theme 1.7.4

The theme I’m currently using for this site is Fable Theme by Elegant Theme.

One of the issues I recently dealt was how I have to be picky about selecting featured images for each post. The featured image is used as the background image for each post on homepage and archive pages. And by default, when there is an featured image assigned to a post, the font color of the post title and its summary is white.

Initially, I darken the text shadow to make the text more readable. But depending on the image I picked, it wasn’t an effective solution for some posts.

So I decided to apply linear gradient over the post background/featured image to make it little darker to give little more contrast between the text and the image.

Unfortunately, you can’t simply overwrite style.css in this case. The themes uses a function, et_fable_get_background(), to insert background-image property in the section in content.php

So in order to make the change, you need to modify two files in the child theme folder.
Continue reading “How to darken post background images in Fable theme 1.7.4”

How to sort grouped product’s children in WooCommerce 2.5.x

You MUST backup your database and your web files before you try this method.  If you decide to try this method, please do so at your own risk. I will not be responsible for any site breakage.

The order of child products in a group product page in WooCommerce is based on “menu_order” value in ascending order. You can change each product’s menu order value in “Edit Product” page under “Advanced” tab.

The problem is you can’t go through this process when you have hundreds or thousands or products and finish in timely manner.

There are several ways you can do to re-sort your child products in much faster manner.
Continue reading “How to sort grouped product’s children in WooCommerce 2.5.x”