How to extend Ubuntu file system after resizing AWS EBS Volume

Sometimes, imply increase the size of an EBS volume in EC2 Management console doesn’t expand the actual storage size in Ubuntu system. You need to further configure your OS to apply the size change.

Check if you need to resize the partition and the filesystem

lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  21G  0 disk 
└─xvda1 202:1    0  20G  0 part /

Run lsblk command to list the attached devices if the partition size are not equal, you need to resize the partition

df -h
Filesystem      Size  Used Avail Use% Mounted on
udev            996M   12K  996M   1% /dev
tmpfs           201M  340K  200M   1% /run
/dev/xvda1       20G   11G  8.2G  57% /
none            4.0K     0  4.0K   0% /sys/fs/cgroup
none            5.0M     0  5.0M   0% /run/lock
none           1001M     0 1001M   0% /run/shm
none            100M     0  100M   0% /run/user

Use df -h command to see if the filesystem need the resizing

Resizing the partition

sudo growpart /dev/xvda 1
CHANGED: partition=1 start=16065 old: size=41913585 end=41929650 new: size=44018100,end=44034165

lsblk
NAME    MAJ:MIN RM SIZE RO TYPE MOUNTPOINT
xvda    202:0    0  21G  0 disk 
└─xvda1 202:1    0  21G  0 part /

Use sudo growpart command to expand the partition. Verify the result by running lsblk command.

sudo resize2fs /dev/xvda1
resize2fs 1.42.9 (4-Feb-2014)
Filesystem at /dev/xvda1 is mounted on /; on-line resizing required
old_desc_blocks = 2, new_desc_blocks = 2
The filesystem on /dev/xvda1 is now 5502262 blocks long.

df -h
Filesystem      Size  Used Avail Use% Mounted on
udev            996M   12K  996M   1% /dev
tmpfs           201M  340K  200M   1% /run
/dev/xvda1       21G   11G  9.1G  54% /
none            4.0K     0  4.0K   0% /sys/fs/cgroup
none            5.0M     0  5.0M   0% /run/lock
none           1001M     0 1001M   0% /run/shm
none            100M     0  100M   0% /run/user

Use sudo resize2fs command to expand the filesystem. Verify the result by running df -h command.

Resources: Extending a Linux File System after Resizing the Volume

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;
}

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 ul.top > 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 ul.top > 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 ul.top > 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.