Tutorials – Page 2 – Gerhard Potgieter

WooCommerce Number Of Products Sold

October 14, 2013/Gerhard Potgieter/35 Comments

A question that has been popping up quite a lot lately in the WooCommerce support forums is how do I display the total amount of units sold for a product on the product page. In this WooCommerce tutorial I will be showing you how to display this on the product page.

Luckily WooCommerce already takes care of the majority of work for us to do this as it automatically keeps track of the number of units sold for each product for reporting purpose, all we have to do it do retrieve the value and display it on the product page.

To display the number of units sold for a product add the following snippet of code to your theme’s functions.php file

	<?php
	add_action( 'woocommerce_single_product_summary', 'wc_product_sold_count', 11 );
	function wc_product_sold_count() {
	global $product;
	$units_sold = get_post_meta( $product->id, 'total_sales', true );
	echo '<p>' . sprintf( __( 'Units Sold: %s', 'woocommerce' ), $units_sold ) . '</p>';
	}
	?>

view raw

woocommerce_products_sold_single_product.php

hosted with ❤ by GitHub

This will result in the Units Sold text to display underneath the product title and price

WooCommerce Custom Product Fields

September 17, 2013/Gerhard Potgieter/132 Comments

In this WooCommerce tutorial I will be showing you how to add a custom field to a WooCommerce product.

I will go through adding a custom field on the general tab section of the WooCommerce edit product page underneath the price fields where you can enter a value in to be saved, go through saving and validating the data and then displaying the data that was saved on the product page on the front-end of your shop.

As an example I will be showing you how to add a Recommended Retail Price (RRP) to a WooCommerce product and display this on the front-end, so lets get starting.

First step would be to define the field on the edit product page, luckily WooCommerce makes this very easy due to the large array of hooks available for use as well as the built in functions to generate HTML input fields. Place the following code inside your theme’s functions.php file to define a new text field on the product edit page.

	add_action( 'woocommerce_product_options_pricing', 'wc_rrp_product_field' );
	function wc_rrp_product_field() {
	woocommerce_wp_text_input( array( 'id' => 'rrp_price', 'class' => 'wc_input_price short', 'label' => __( 'RRP', 'woocommerce' ) . ' (' . get_woocommerce_currency_symbol() . ')' ) );
	}

view raw

gistfile1.php

hosted with ❤ by GitHub

You will now have a field on your product edit page called RRP, however if you enter something into the field and save the product, the data will not be save as we need to actually still save the data when the product gets updated, to save it and also check that a numeric value is entered add the following code to your theme’s functions.php file

	add_action( 'save_post', 'wc_rrp_save_product' );
	function wc_rrp_save_product( $product_id ) {
	// If this is a auto save do nothing, we only save when update button is clicked
	if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
	return;
	if ( isset( $_POST['rrp_price'] ) ) {
	if ( is_numeric( $_POST['rrp_price'] ) )
	update_post_meta( $product_id, 'rrp_price', $_POST['rrp_price'] );
	} else delete_post_meta( $product_id, 'rrp_price' );
	}

view raw

gistfile1.php

hosted with ❤ by GitHub

Now when you enter a value in the RRP field and update the product the field should be saved and loaded in the RRP field you defined when the page loads. The final step would be to actually display the value saved on the product page on the front-end for customers to view, to do this add the following code to your theme’s functions.php file

	add_action( 'woocommerce_single_product_summary', 'wc_rrp_show', 5 );
	function wc_rrp_show() {
	global $product;
	// Do not show this on variable products
	if ( $product->product_type <> 'variable' ) {
	$rrp = get_post_meta( $product->id, 'rrp_price', true );
	echo '<div class="woocommerce_msrp">';
	_e( 'RRP: ', 'woocommerce' );
	echo '<span class="woocommerce-rrp-price">' . woocommerce_price( $rrp ) . '</span>';
	echo '</div>';
	}
	}

	// Optional: To show on archive pages
	add_action( 'woocommerce_after_shop_loop_item_title', 'wc_rrp_show' );

view raw

gistfile1.php

hosted with ❤ by GitHub

Your end result will look like the image below when you add or edit a product

And will look like this on the front-end when a customer views the product

Just a note that this tutorial does not cover adding custom fields to variable product, that process is covered in this tutorial by my fellow team member at WooThemes, Remi Corson.

WooCommerce Product Quantity Dropdown

September 9, 2013/Gerhard Potgieter/57 Comments

WooCommerce by default adds a quantity input box to your product pages where customers can enter quantities, but a lot of times you want to have more control over the quantities and make it more idiot proof on your site for customers by allowing them to select the quantities instead of entering it themselves.

The following snippet of code I wrote will replace the default WooCommerce quantity input box and replace it with a dropdown select option of quantities. It is fully compatible with the Min/Max Quantities extension which allows you to display quantities in the dropdown based on the minimum, maximum and group values so the customer can only select values in which the product can be bought instead of having to use plus and minus buttons or entering a value manually.

To turn your WooCommerce quantity input boxes into dropdown select options simply copy the following code to your theme’s functions.php file

	<?php
	// Place the following code in your theme's functions.php file
	// override the quantity input with a dropdown
	function woocommerce_quantity_input() {
	global $product;

	$defaults = array(
	'input_name' => 'quantity',
	'input_value' => '1',
	'max_value' => apply_filters( 'woocommerce_quantity_input_max', '', $product ),
	'min_value' => apply_filters( 'woocommerce_quantity_input_min', '', $product ),
	'step' => apply_filters( 'woocommerce_quantity_input_step', '1', $product ),
	'style' => apply_filters( 'woocommerce_quantity_style', 'float:left; margin-right:10px;', $product )
	);
	if ( ! empty( $defaults['min_value'] ) )
	$min = $defaults['min_value'];
	else $min = 1;

	if ( ! empty( $defaults['max_value'] ) )
	$max = $defaults['max_value'];
	else $max = 20;

	if ( ! empty( $defaults['step'] ) )
	$step = $defaults['step'];
	else $step = 1;

	$options = '';
	for ( $count = $min; $count <= $max; $count = $count+$step ) {
	$options .= '<option value="' . $count . '">' . $count . '</option>';
	}
	echo '<div class="quantity_select" style="' . $defaults['style'] . '"><select name="' . esc_attr( $defaults['input_name'] ) . '" title="' . _x( 'Qty', 'Product quantity input tooltip', 'woocommerce' ) . '" class="qty">' . $options . '</select></div>';
	}
	?>

view raw

functions.php

hosted with ❤ by GitHub

WooCommerce Product Image Slideshow Using WooSlider

September 9, 2013/Gerhard Potgieter/8 Comments

At WooThemes we have this cool plugin called WooSlider which basically allows you to create awesome sliders just about anywhere on your site, it is a powerful WordPress slideshow plugin yet simple to use.

One of the questions that has been popping up a lot lately in support is, how can I turn my WooCommerce product images on the single product page into a slideshow instead of displaying a normal image, well luckily with WooSlider this is a breeze to do.

You simply need to purchase and install WooSlider, then you need to place the code below into your theme’s functions.php file

	<?php
	add_filter( 'woocommerce_single_product_image_html', 'wc_product_image_slider' );
	function wc_product_image_slider() {
	return do_shortcode( '[wooslider slider_type="attachments"]' );
	}
	?>

view raw

functions.php

hosted with ❤ by GitHub

Deploy From Github To WordPress.org Plugin Repo

September 8, 2013/Gerhard Potgieter/4 Comments

Lately I have been working on quite a few WordPress plugins that are hosted in the WordPress.org plugin repository, and since Github is my go to version control system, I like it a lot and we use at WooThemes as well, I got a bit fed up with having to keep a local SVN copy and doing things manually.

After some googling I eventually found a bash script that enables you to deploy directly from your Github repository without the need to keep a local copy of the SVN repository, it is as simple as adding the script below to your Github repo, changing a few lines in the script and then executing it when you want to deploy to the WordPress.org plugin repository/

I take no credit for this script, in fact it was created by a fellow WooCommerce plugin developer, Brent Shepherd, he developed and maintains the awesome WooCommerce Subscriptions extension.

To deploy straight from your Github repository to your WordPress.org Plugins SVN repository, simply copy the bash script below and place it in a new file in your Github repository, I use deploy.sh, once the file is there you can commit it to Github so it is always part of your plugin, then open up the file and edit the following parameters.

PLUGINSLUG – Change this to the slug of the plugin on WordPress.org
MAINFILE – Change this to the main PHP file that contains the WordPress version number of the plugin
SVNUSER – Change this to the WordPress.org username of the user who owns the plugin, it will be commit under this user.

And that is it, once you have modified the file, you will have to make it executable by (chmod u+x deploy.sh) it via terminal, then when you are ready to deploy it, go to your Github repository where you stored the deploy.sh file and run the following command via terminal ./deploy.sh

It will ask you a few questions along the way and do some checks as well as tag the version on Github for you.

	#! /bin/bash
	# A modification of Dean Clatworthy's deploy script as found here: https://github.com/deanc/wordpress-plugin-git-svn
	# The difference is that this script lives in the plugin's git repo & doesn't require an existing SVN repo.

	# main config
	PLUGINSLUG="camptix-payfast-gateway"
	CURRENTDIR=`pwd`
	MAINFILE="camptix-payfast.php" # this should be the name of your main php file in the wordpress plugin

	# git config
	GITPATH="$CURRENTDIR/" # this file should be in the base of your git repository

	# svn config
	SVNPATH="/tmp/$PLUGINSLUG" # path to a temp SVN repo. No trailing slash required and don't add trunk.
	SVNURL="http://plugins.svn.wordpress.org/$PLUGINSLUG/" # Remote SVN repo on wordpress.org, with no trailing slash
	SVNUSER="Kloon" # your svn username


	# Let's begin…
	echo "……………………………………"
	echo
	echo "Preparing to deploy wordpress plugin"
	echo
	echo "……………………………………"
	echo

	# Check version in readme.txt is the same as plugin file after translating both to unix line breaks to work around grep's failure to identify mac line breaks
	NEWVERSION1=`grep "^Stable tag:" $GITPATH/readme.txt \| awk -F' ' '{print $NF}'`
	echo "readme.txt version: $NEWVERSION1"
	echo "$GITPATH$MAINFILE"
	NEWVERSION2=`grep "Version:" $GITPATH$MAINFILE \| awk -F' ' '{print $NF}'`
	echo "$MAINFILE version: $NEWVERSION2"

	if [ "$NEWVERSION1" -ne "$NEWVERSION2" ]; then echo "Version in readme.txt & $MAINFILE don't match. Exiting…."; exit 1; fi

	echo "Versions match in readme.txt and $MAINFILE. Let's proceed…"

	if git show-ref –tags –quiet –verify — "refs/tags/$NEWVERSION1"
	then
	echo "Version $NEWVERSION1 already exists as git tag. Exiting….";
	exit 1;
	else
	echo "Git version does not exist. Let's proceed…"
	fi

	cd $GITPATH
	echo -e "Enter a commit message for this new version: \c"
	read COMMITMSG
	git commit -am "$COMMITMSG"

	echo "Tagging new version in git"
	git tag -a "$NEWVERSION1" -m "Tagging version $NEWVERSION1"

	echo "Pushing latest commit to origin, with tags"
	git push origin master
	git push origin master –tags

	echo
	echo "Creating local copy of SVN repo …"
	svn co $SVNURL $SVNPATH

	echo "Exporting the HEAD of master from git to the trunk of SVN"
	git checkout-index -a -f –prefix=$SVNPATH/trunk/

	echo "Ignoring github specific files and deployment script"
	svn propset svn:ignore "deploy.sh
	README.md
	.git
	.gitignore" "$SVNPATH/trunk/"

	echo "Changing directory to SVN and committing to trunk"
	cd $SVNPATH/trunk/
	# Add all new files that are not set to be ignored
	svn status \| grep -v "^.[ \t]\.." \| grep "^?" \| awk '{print $2}' \| xargs svn add
	svn commit –username=$SVNUSER -m "$COMMITMSG"

	echo "Creating new SVN tag & committing it"
	cd $SVNPATH
	svn copy trunk/ tags/$NEWVERSION1/
	cd $SVNPATH/tags/$NEWVERSION1
	svn commit –username=$SVNUSER -m "Tagging version $NEWVERSION1"

	echo "Removing temporary directory $SVNPATH"
	rm -fr $SVNPATH/

	echo "* FIN *"

view raw

deploy.sh

hosted with ❤ by GitHub

WooCommerce Percentage Saved Sale Price

September 6, 2013/Gerhard Potgieter/47 Comments

When you have items on sale in WooCommerce, by default WooCommerce will display the regular price striked out with the sale price next to it.

Why not take it a step further and show your customers the savings they are getting on the sale price, with this snippet of code you can easily display the percentage saved next to the price of items on sale in WooCommerce.

Place the code below in your theme’s functions.php file

	<?php
	// 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 . '%' );
	}
	?>

view raw

functions.php

hosted with ❤ by GitHub

WooCommerce Change Description Tab Title & Heading To Product Name

September 4, 2013/Gerhard Potgieter/12 Comments

So as promised I will do a lot more posts on this blog and to kick things off I am doing a snippet on how to change the WooCommerce single product description tab title and heading to that of the product name instead of just saying Description.

To change the WooCommerce Single Product Description tab title and heading to the product name, place the following PHP code in your theme’s functions.php file

	<?php
	// Change the description tab title to product name
	add_filter( 'woocommerce_product_tabs', 'wc_change_product_description_tab_title', 10, 1 );
	function wc_change_product_description_tab_title( $tabs ) {
	global $post;
	if ( isset( $tabs['description']['title'] ) )
	$tabs['description']['title'] = $post->post_title;
	return $tabs;
	}

	// Change the description tab heading to product name
	add_filter( 'woocommerce_product_description_heading', 'wc_change_product_description_tab_heading', 10, 1 );
	function wc_change_product_description_tab_heading( $title ) {
	global $post;
	return $post->post_title;
	}
	?>

view raw

functions.php

hosted with ❤ by GitHub

Gerhard Potgieter

Senior Software Engineer @ Automattic specializing in eCommerce

Category: Tutorials

WooCommerce Number Of Products Sold

Like this:

WooCommerce Custom Product Fields

Like this:

WooCommerce Product Image Slideshow Using WooSlider

Like this:

Deploy From Github To WordPress.org Plugin Repo

Like this:

WooCommerce Percentage Saved Sale Price

Like this:

WooCommerce Change Description Tab Title & Heading To Product Name

Like this:

Categories

Top Posts & Pages

Instagram

Get Email Notifications

Senior Software Engineer @ Automattic specializing in eCommerce

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Share this:

Like this:

Categories

Top Posts & Pages

Instagram

Get Email Notifications