Category: WooCommerce

This is what I have done to make it easier to show your favourite products on the home page of your WooCommerce store.

Featured products.  As your default site install, it shows you the 12 most recent products you’ve added to your store.  I wasn’t happy with this from very early on.  I changed the code to use the featured products function and show them in the order that I want them, not have to try to figure out the date order I added them.

So lets get in and start editing.

If you are doing this on a live site, with potential visitors, the first step is to choose the order of your products, then we’ll go change the code in the backend afterwards, so we don’t show a blank home screen.

The quickest way is to use the Quick Edit function.  Open your first product using quick edit, enter number 1 in the order box and then click the featured tick box.  This will be the very first product that shows in the top left of your screen, or the first in the mobile view list.

Go through and edit the next 19 other products that you’d like to show on your home page.  I say 19 because I increased my front page from 12 to 20 products, but you can make it whatever your like.

Now lets go change the front page.

Go to Pages, and click edit on the Home – Front Page.

Select the single line of existing code and replace it with this code.   If you like, keep a copy of the original line of text, just for later reference.

[featured_products per_page="20" columns="4" orderby="menu_order" order="asc"]

It should now look something like this…

You can see that we are showing featured products, we’re going to show 20 of them, in 4 columns, we are going to sort them by the number we entered in the order box, in an ascending order.  Pretty simple stuff.

Here’s something else I like to do to make it look a little neater.

Go to your Appearance / Shop Settings.

Then scroll down and adjust your product spacing to 70.  This makes your products sit evenly if they have up to 4 lines of text.  I personally prefer the white space over the jumbled mess.

Good luck and enjoy…

 

 

Here’s a little hack that I use to monitor the outbound emails to my customers.

When I initially set my site up, I went through and tested everything, even making a test purchase of a random product.  Everything worked perfectly.

Then a few sales down the track, I had this funny feeling in the back of my mind that customers emails weren’t going out.  I’d added my mobile phones email address to the ‘New Order’ email notification, so I’d always know when I’d made a sale.  But the alerts had stopped, only to be (pleasantly) surprised that I’d made sales when logging into my store.

So after adding this little code, I found NO emails were going out at all, which was cause for concern.  I did find the cause and solution, which was a simple setting, but still to this day I don’t know if I overlooked it in my initial setup of the store…  I’ll get around to that one day…  Simply, my host was blocking outbound emails from Woo.

…the code.

Again, simply copy this code and paste it into your functions.php file of your Child Theme.  Follow all the precautions in Hack #1 (I’ll get around to making this repetitive instructions their own post one day)

//
// Start - add BCC to all outgoing emails
//

add_filter( 'woocommerce_email_headers', 'add_bcc_all_emails', 10, 2);
 
function add_bcc_all_emails($headers, $object) {
 
    $headers = array();
    $headers[] = 'Bcc: Name <alerts@domain.com>';
    $headers[] = 'Content-Type: text/html';
 
    return $headers;
}

//
// End - BCC out
//

Change the email address to something that you’d like.  This will simply add your email address to the BCC field of every email that Woo sends out.  The customer will never know.

This is an example of what I have done, allowing for expansion into multiple stores.

I have a primary business domain.  It doesn’t host a store, it’s like my holding or bucket company.

I went into the email options in cPanel for that domain.  I then created a ‘forwarder’ account called ‘alerts@domain.com’ and forwarded that email address to ‘iphone@domain.com’.  I also added my partners’ email addresses to the forwarder as well.

So it looks something like this:

alerts@domain.com -> myiphone@domain2.com
alerts@domain.com -> partner55@gmail.com
alerts@domain.com -> partner-c@hotmail.com

So anytime an email is sent to alerts, all 3 of us get it.  And because it’s setup on one domain, I don’t need to do it for each store I setup up.  Do the work once!!

Now, go forth and sell some knife sharpeners…

If you’re selling Knife Sharpeners, clearly the buyer not only wants to see the regular selling price and your sale price, but the percentage off the original price.  Makes their decision a tiny bit easier.  Knife Sharpeners at 5% off aren’t going to get people excited, but we all know that Knife Sharpeners at 77% off is going to cause some sort of riot and even a server meltdown..

This is a very simple code addition to your site, but as always, do a backup before you endeavor to change any essential site files.

OK, let’s go…

In your WordPress Dashboard, click Appearance and then Editor.

Confirm you’re editing your child theme, not the primary theme. Why? Because if you update your WooCommerce install, your code will be lost.

Select your function.php file.

Scroll to the very bottom of all the code & make a new line or 2 underneath ALL the other code in this box. DO NOT insert it in the middle of any other code. You are guaranteed to BREAK your site.

Copy and paste this entire code into your functions.php file.

//
// Add save percent next to sale item prices.
//
add_filter( 'woocommerce_sale_price_html', 'woocommerce_custom_sales_price', 10, 2 );
function woocommerce_custom_sales_price( $price, $product ) {
$percentage = round( ( ( $product->regular_price - $product->sale_price ) / $product->regular_price ) * 100 );
return $price . sprintf( __('

Save %s', 'woocommerce' ), $percentage . '%
' );
}

//
// End - save percentage off
//

Click Update file and you’re done.

If you need a backout plan, check the Hack #1 post… same recovery method.

At this stage, I can’t have the % off in a different colour.  It changes other text colours as well, but I am working on it…

The other thing it won’t do at this stage is show a percentage off if there is a variant – say a size or colour.  I’m pretty happy with the way it works right now, I have found a possible work around, so stay tuned.  Replacing the code is easy if you want to start with this version, and update it later.

Let me know what you think.  Love to hear your feedback.

---

This is probably the most useful code addition to my WooCommerce site so far.  

Having all my product sale information stored on my site, but needing to go off to a spreadsheet to look up who I buy it from, how much it costs me and even a link to their order page got a bit tedious after a short while.

So I went searching for some code, found something close to what I needed and modified it to suit.  I’ve added the supplier part # or SKU, the supplier URL and how much it costs me.  Makes it very easy if I want to have a flash sale or something…

It’s a very simple addition to your WooCommerce site, but please be very careful when doing so. It has the potential to crash your site if care isn’t taken.

Make sure you take a back up of your site (ALWAYS always always take backups before editing essential site files), but also have the understanding of how to remove the code as well if something does go pear shaped.   It is even a good idea to copy your functions.php before editing it…And even better if you’ve got a spare or play site like I do, just to test it out before it goes on your money site.

Please read this whole post before you edit your site, including removal instructions below.  I take no responsibility for anybody’s broken site (just have to say that…)

I’ve listed all the steps and screenshots below.

There are also some other ‘hacks’ that I’ve added to WordPress/WooCommerce, just to make my sites that little bit different to everybody else’s, but I’m happy to share.  I’ll post them very soon.

I’d love to hear your comments and feedback.

Step 1

In your WordPress Dashboard, click Appearance and then Editor.

Step 2

Confirm you’re editing your child theme, not the primary theme. Why? Because if you update your WooCommerce install, your code will be lost. (Please note, this code has not tested on WooCommerce plugin upgrade as yet)

select your function.php file.

Step 3

Scroll to the very bottom of all the code & make a new line or 2 underneath ALL the other code in this box. DO NOT insert it in the middle of any other code. You are guaranteed to BREAK your site.

Copy and paste this entire code into your functions.php file. (make sure you get it all – I copy code like this into notepad or something similar before it goes to my site)

// 
// Add ALIExpress SKU, URL and Cost Price fields to WooCommerce Product Details Page
// 
add_action( 'woocommerce_product_options_general_product_data', 'woo_add_custom_general_fields' );

function woo_add_custom_general_fields() {

	global $woocommerce, $post;
  
	echo '
<div class="options_group">';
  
// Custom fields will be created here...

	// Add ALI SKU
		woocommerce_wp_text_input( 
			array( 
			'id'                => '_ALI_SKU', 
			'label'             => __( 'AliExpress SKU', 'woocommerce' ), 
			'placeholder'       => '', 
			'description'       => __( 'Enter the ALIExpress SKU here.', 'woocommerce' ),
			)
);
	// Add ALI URL
		woocommerce_wp_text_input( 
			array( 
			'id'                => '_ALI_URL', 
			'label'             => __( 'AliExpress URL', 'woocommerce' ), 
			'placeholder'       => '', 
			'description'       => __( 'Enter the ALIExpress URL here.', 'woocommerce' ),
			)
);

	// Add Cost Price
		woocommerce_wp_text_input( 
			array( 
			'id'                => '_cost_price', 
			'label'             => __( 'Cost Price', 'woocommerce' ), 
			'placeholder'       => '', 
			'description'       => __( 'Enter the item cost here.', 'woocommerce' ),
			)
);
 
echo '</div>

';
	
}

// Save Fields
add_action( 'woocommerce_process_product_meta', 'woo_add_custom_general_fields_save' );


function woo_add_custom_general_fields_save( $post_id ){
	// ALI_SKU
		$woocommerce_ALI_SKU = $_POST['_ALI_SKU'];
		if( !empty( $woocommerce_ALI_SKU ) )
			update_post_meta( $post_id, '_ALI_SKU', esc_attr( $woocommerce_ALI_SKU ) );

	// ALI_URL
		$woocommerce_ALI_URL = $_POST['_ALI_URL'];
		if( !empty( $woocommerce_ALI_URL ) )
			update_post_meta( $post_id, '_ALI_URL', esc_attr( $woocommerce_ALI_URL ) );
		
	// Cost Price
		$woocommerce_cost_price = $_POST['_cost_price'];
		if( !empty( $woocommerce_cost_price ) )
			update_post_meta( $post_id, '_cost_price', esc_attr( $woocommerce_cost_price ) );
}

//
// End - Custom Fields
//

Click Update File.

Testing…

First things first, lets make sure your site still works….Just open up your home page…

Phew…all good…  if it is broken, scroll to the bottom of this post for an undo…

Back to your dashboard, Open up a product to edit.

Enter the relevant details into the new boxes. Press update.

This will now have saved the details. Too be 100% sure the code we’ve added is working, we just want to open a different page or product, then go back to the product you just added the details to. We are only doing this once, just simply to confirm that your details are saving correctly and you don’t edit all your products, as I did the first time I used the code, only to find the details aren’t saved!!  Wasn’t happy!!

Good luck and enjoy it.

Planned revisions –

Have the details displayed on the Quick Edit page.
Ability to click a button to launch the URL in a new tab.

Undo – I’ve broken my site!!!

OK…well ooops…it’s broken

2 options –

#1 – restore the backup that you took before editing an essential site file…

or

#2 – lets edit the file..

Open your cPanel

Find and Open your File Manager

Navigate to :

public_html/wp-content/themes/Virtue Child

assuming you are running the Virtue theme..

Select functions.php and click edit or code editor (both the same really except for the pretty colours)

Remove the code that you have just pasted into your file.

Save and you’re done.

Or if you copied functions.php before editing it, simply replace it with the original.

Now, go and sell some knife sharpeners…