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
 * @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() ) {
<li <?php post_class(); ?>>
	 * 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' );

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 destination-folder-name

CSS Trick – anchor position adjustment


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


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

Recreate Cazbah legacy platform’s product table in MySQL

CREATE TABLE products (
productActive bit(1),
productCategoryname varchar(500),
productSku varchar(500),
productName varchar(500),
productLongdesc text,
productPrice  double,
productMSRPActive bit(1),
productMSRPLabel varchar(500),
productMSRPPrice  double,
productMSRPSeparator varchar(500),
productMSRPColor varchar(500),
productWeight double,
productShipprice  double,
productFreeshipping bit(1),
productPic varchar(500),
productPicurl varchar(500),
productPiclink varchar(500),
productSubtitle varchar(500),
productThumbnailPic varchar(500),
productThumbnailurl varchar(500),
productDisplayOrder int,
productTrackInventory bit(1),
productCurrentInventory double,
productVariablePricing bit(1),
variationSku varchar(500),
variationDisplayName varchar(500),
variationInvoiceName varchar(500),
variationPrice double, 
variationMSRPActive bit(1),
variationMSRPLabel varchar(500),
variationMSRPPrice double, 
variationMSRPSeparator varchar(500),
variationMSRPColor varchar(500),
variationWeight double,
variationShipprice double,
variationPicUrl varchar(500),
variationActive bit(1),
variationFreeshipping bit(1),
variationDisplayOrder int,
variationTrackInventory bit(1),
variationCurrentInventory double,
variationVariablePricing bit(1),
questionWording varchar(500),
questionDisplayOrder int,
questionAnswerRequired bit(1),
questionDropDownAnswers bit(1),
questionPriceChange double,
questionLongText text,
answersDisplayName varchar(500),
answersInvoiceName varchar(500),
answersDisplayOrder int,
answersPriceChange double,
googleCategory text,
productGglProdCondition varchar(500),
productGglOnlineOnly bit(1),
productGglGTIN varchar(500),
productGglMPN varchar(500),
productGglBrand varchar(500),
productGglColor varchar(500),
productGglSize varchar(500),
productGglMaterial varchar(500),
productGglPattern varchar(500),
productGglAgeGroup varchar(500),
productGglGender varchar(500),
choiceGglProdCondition varchar(500),
choiceGglVariant bit(1),
choiceGglOnlineOnly bit(1),
choiceGglGTIN varchar(500),
choiceGglMPN varchar(500),
choiceGglBrand varchar(500),
choiceGglColor varchar(500),
choiceGglSize varchar(500),
choiceGglMaterial varchar(500),
choiceGglPattern varchar(500),
choiceGglAgeGroup varchar(500),
choiceGglGender varchar(500)

WooCommerce 2.1.9 cheatsheet – product listing page

How To Change Number Products Displayed Per Page

Insert the following code in your theme’s functions.php

// Display 40 products per page. 
add_filter( 'loop_shop_per_page', create_function( '$cols', 'return 40;' ), 20 );

Continue reading “WooCommerce 2.1.9 cheatsheet – product listing page”

WooCommerce 2.1.9 cheatsheet – single product page

How To Remove Related Products

Add the following code to your theme’s functions.php

//remove related products from single product page
remove_action ( 'woocommerce_after_single_product_summary', 'woocommerce_output_related_products', 20);

Continue reading “WooCommerce 2.1.9 cheatsheet – single product page”

Bare-bone CSS horizontal navigation with dropdown

Let’s see if I can make this tutorial simply and easy. The tutorials out there are lengthy and cluttered with non-essential elements to make the example visually pleasing. I wanted to make mine BARE MINIMUM so that I can see what CSS property are actually make the structure.

Key elements for HTML code:

  • Top level menu’s UL tag – “top” class assigned
  • Second level menu’s UL tags -“sub” class assigned

Key Elements for CSS:

  • margin and padding reset – Browsers applies 16px to top- and bottom- margin, and 40px to left-padding. Let just get rid of those so you are not confused.
  • list-style – make the bullet go away. It just looks too broken when they are there (this is NOT a contrubuting CSS property to make the horizontal nav structure)
  • inline-block on > li – This HAs to be “inline-block”. Can’t be inline, can’t be block. Well, technicially it will work okay with just “inline” under Chrome browser, but messes them up with IE and FireFox.
  • relative on > li – again this HAS to be “relative”. Making this element “relative” forces the “absolute” position of the submenu origin point to be this element .
  • absolute on ul.sub – making it “absolute” will not interfere the flow of > li.

So this will get you started on building a horizontal navigation with drop down menu. Of course, this is just a starting point. You will need to decorate them, size them, position them, and add some behaviors to make it fully functional. But now you know which properties are being used to make the navigation structure.