Web Design Archives - Freelance Woocommerce Developer in Bromley, London

How to do Ajax in WordPress

October 19, 2016 by louie171 Leave a Comment

Write a javascript function to trigger the ajax call

    jQuery('#button_or_something').change(function() {
            
     
        jQuery.ajax({
            url: ajax_object.ajax_url,
            data: {
                action: 'like_or_not',  /* this is appended to add_action on server side */
                id: '99'
            },
            type: 'GET'
        });
            
		
    });

jQuery('#button_or_something').change(function() {

jQuery.ajax({

url: ajax_object.ajax_url,

data: {

action: 'like_or_not', /* this is appended to add_action on server side */

id: '99'

type: 'GET'

});

Write a php function to handle the ajax call (you could put this in functions.php)

add_action('wp_ajax_nopriv_like_or_not', 'green_like_or_unlike');   
add_action('wp_ajax_like_or_not', 'green_like_or_unlike'); /* notice like_or_unlike appended to action name of wp_ajax_ */


function green_like_or_unlike() {

    
   echo "hitting the php function ok";
    
    
}

add_action('wp_ajax_nopriv_like_or_not', 'green_like_or_unlike');

add_action('wp_ajax_like_or_not', 'green_like_or_unlike'); /* notice like_or_unlike appended to action name of wp_ajax_ */

function green_like_or_unlike() {

echo "hitting the php function ok";

}

There is one final piece, you might notice the ajax_object.ajax_url in the Javascript function above. We need to make this available in the js file that this function is in. This needs to be done in php.

wp_localize_script( 'green-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

1 2	wp_localize_script( 'green-script', 'ajax_object', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

Include ajax_url like this (below)

function theme_enqueue_styles() {

    /*
     * include the js
     */

    wp_enqueue_script('green-script', get_stylesheet_directory_uri() . '/my_js_file.js', array('jquery'));

        
    // in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value
	wp_localize_script( 'green-script', 'ajax_object',
            array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );
    
    
}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

function theme_enqueue_styles() {

* include the js

wp_enqueue_script('green-script', get_stylesheet_directory_uri() . '/my_js_file.js', array('jquery'));

// in JavaScript, object properties are accessed as ajax_object.ajax_url, ajax_object.we_value

wp_localize_script( 'green-script', 'ajax_object',

array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'we_value' => 1234 ) );

}

add_action('wp_enqueue_scripts', 'theme_enqueue_styles');

Woocommerce – Converting grams to kilograms ( product weights)

September 14, 2016 by louie171 Leave a Comment

If your using product weights in Woocommerce, you might find you want to change from grams to kilograms at some stage.

There are 2 parts to this:

Part 1:

Firstly in wp-admin you need to change a setting on the Woocommerce (below).

However this doesn’t automatically convert grams to kilograms.

Part 2:

Converting existing products grams to kilograms.

For this you’ll need to use a little script, I created this one as a page template.

<?php
/*
 *
 * Template name: list products
 */
get_header();
?>




<?php

$args = array( 'post_type' => 'product', 'posts_per_page' => 2500  );

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post(); 
global $product; 



$weight= get_post_meta( get_the_ID(), '_weight', true);

if ( ! empty( $weight ) ) {
    
    echo "id = ".get_the_ID(). " wieght = ".$weight; 
    
    $new_weight = $weight / 1000 ; 
    
    echo "<br>new weight = ".$new_weight."  ********************";
    
    // id , key , value 
    $result = update_post_meta(get_the_ID(), '_weight', $new_weight);
    echo "result = ".$result;
    
    
}else{
    echo "<br>NO update for: ".get_the_ID();
}



endwhile; 


wp_reset_query(); 


?>




</div>

<?php get_footer(); ?>

<?php

* Template name: list products

get_header();

<?php

$args = array( 'post_type' => 'product', 'posts_per_page' => 2500 );

$loop = new WP_Query( $args );

while ( $loop->have_posts() ) : $loop->the_post();

global $product;

$weight= get_post_meta( get_the_ID(), '_weight', true);

if ( ! empty( $weight ) ) {

echo "id = ".get_the_ID(). " wieght = ".$weight;

$new_weight = $weight / 1000 ;

echo "<br>new weight = ".$new_weight." ********************";

// id , key , value

$result = update_post_meta(get_the_ID(), '_weight', $new_weight);

echo "result = ".$result;

}else{

echo "<br>NO update for: ".get_the_ID();

}

endwhile;

wp_reset_query();

</div>

<?php get_footer(); ?>

How to speed up Woocommerce (and WordPress)

September 7, 2016 by louie171 9 Comments

GTMetrix after I tuned up a client’s Woocommerce website

Speed tuning in WordPress and Woocommerce

This post contains details of how to supercharge your WordPress website.

If you’d like us to speed up your Woocommerce store (or WordPress site), contact us (speed tuning from £799)

Here are some speed tuning tips for getting your Woocommerce store loading quickly and keep customers on your site (slow loading = loss of customers).

Check file load times

In firebug look at the console requests (eg all the css/images etc, but especially important check for any php files like admin-ajax.php ). Any files that are taking a long time to load are slowing down the page for the user. It can be any type of file (but large uncompressed images are a common problem).

Look for any slow loading files:

A common one on woocommerce /?wc-ajax=get_refreshed_fragments often there is a plugin calling this (which causes a speed issue) – this may well be called by admin-ajax.php

https://woorkup.com/diagnose-admin-ajax-php-causing-slow-load-times-wordpress/

Minify, Combine and Compress

A great way to reduce the number of requests hitting the server is to combine your css and js files. Autoptimize will do this for you, just install and tick the relevant boxes on the settings page (it will also minify your html/css/js).

Run javascript when the page loads

By default javascript will load and run as soon as soon as the browser sees it ( this can slow things down drastically, if it takes awhile for the js to load ) . Most javascript can be run after the page loads, add defer or async to your javascripts to prevent js becoming a bottleneck in the page loading/rendering. If the js is loaded via wp_enqueue_script then you can use the Async Javascript plugin , if some script/s aren’t loaded with wp_enqueue_script you’ll need to add it manually to your scripts e.g.

<script defer src="path_to_your_script">

1	<script defer src="path_to_your_script">

I recently had this problem with a mailchimp script mc-validate.js , holding up the loading of a page by about 2 seconds, defered it and now it loads super quick.

Woocommerce cart tip

Many themes have the cart details drop down, by having a static link instead you can save on alot of Ajax calls to populate the cart ( if you have a busy store this can make a significant difference).

https://github.com/woothemes/woocommerce/issues/9365
add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11); function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }

1 2	https://github.com/woothemes/woocommerce/issues/9365 add_action( 'wp_enqueue_scripts', 'dequeue_woocommerce_cart_fragments', 11); function dequeue_woocommerce_cart_fragments() { if (is_front_page()) wp_dequeue_script('wc-cart-fragments'); }

It says on homepage, but you can easy edit your theme slightly, to just have a static cart link ( not having that js running gives you a nice little speed boost).

From (first comment):

First things to consider with WooCommerce & speed

Check how many requests are being made

This is a follow on to the first step, the less files you need to load (the fewer requests), the faster the page load. Of course there’s a balance to struck here. Between functionality / design and speed. Use a tool like Chrome web developer tools or a website tool like GTMetrix to check how many requests are being made

Some plugins load lots of files, it might be a case of looking at some of them and checking if you really need them all. As baseline I try not to have more than 20 plugins (but again this is very subjective, some are big , some small etc …)

Disable wp-cron

By default this runs on every request to your website, if you have lots of requests this will drastically slow your website down.

Disable wp-cron default if you are getting lots of hits ( reconfig to only check a couple of times a day), see this article on how todo so.

php.ini

check the memory_limit allocated (this is the max memory any one request/process can take, so this is for each users http request).

A quick way to get a glance at php.ini info is make a file with this in <?php phpinfo(); ?>

These are probably among the most important values you will want to configure (the values will depend on your environment, how much traffic etc…):

post_max_size = 10M

1	post_max_size = 10M

upload_max_filesize = 10M

1	upload_max_filesize = 10M

memory_limit = 64M

1	memory_limit = 64M

max_execution_time = 300

1	max_execution_time = 300

There are various ways to configure that depend on your server setup, I’m an expert in this contact me if you would like help and I can give you a quote.

Check the usage stats

Use something like awstats to see stuff like how much bandwidth you using, and any files that are being called alot.

Check the logs

Is there anything that seems to be causing a problem ?

Check error_log in webroot if available (or standard apache error_log if not), or debug.log in /wp-content if thats available.

memory errors will look something like this:

PHP Fatal error:  Allowed memory size of 536870912 bytes exhausted (tried to allocate 72 bytes) in /home/mydomain/public_html/wp-includes/wp-db.php on line 2406

1	PHP Fatal error: Allowed memory size of 536870912 bytes exhausted (tried to allocate 72 bytes) in /home/mydomain/public_html/wp-includes/wp-db.php on line 2406

Database

You might need to optimise the database (always back up first!)

https://en-gb.wordpress.org/plugins/wp-optimize/

https://premium.wpmudev.org/blog/optimizing-your-wordpress-database-a-complete-guide/

Another thing you can look at to optimise your database is post revisions (they take up alot of space in the posts table, if you backup regularly do you really need them ?). This article tells you how to disable post revisions.

Database Problems with Woocommerce wp_options (especially true for Woocommerce 2.4 and before)

Woocommerce can be slowed down due to too many rows in the wp_options table, on a good host I’d advise keeping this under 10,000 rows as a max. On shared hosting you would probably want to halve that.

After all the above to speed up look at things like:

caching (there are many good caching plugins available)
image compression (smushit is a great plugin, smaller image sizes mean faster page loading times)
Look at using a CDN(content delivery network), this can take alot of load off your server and speed up the loading experience for your customers. Of the CDNs I’ve used Cloudflare is the best.

Using Yoast WordPress SEO plugin to optimise your blog posts

October 13, 2014 by louie171 Leave a Comment

In this beginners guide to using Yoast SEO plugin, I’ll show you how to search engine optimise your posts to gain you more hits, leads and sales.

My process for writing blog posts typically goes like this:

1. Think of a subject matter that my customers and/or potential customers will find interesting

2. Use Google keyword tool to get some ideas of keyphases to use in the blog post

3. Write the blog post

4. And finally optimise the article using the Yoast WordPress SEO plugin

I’m not going to go into 1-3, here I will discuss 4 ( using Yoast WordPress seo plugin ). Firstly you need to download and install the plugin from https://wordpress.org/plugins/wordpress-seo/ for your version of WordPress.

Next create or edit a blog post or page. A previous article I wrote about online booking forms contained the phrase ‘Online Booking Form to WordPress’ see image below. As you can see I’ve set the phrase and then repeated it in the key areas title , description … ( for SEO fundamentals see here). Yoast SEO plugin lets me to this very easily by filling in the relevant fields.

After filling in these the next thing you need todo is look at the Page Analysis tab, this is like a scoring for your page to see how well you are doing on certain standard SEO metrics. You need to make as many of the little circles turn green as possible. The more ticks (green circles) the better search engine optimised your page will be.

For example as you can see from the image below this is highlighted amber ‘The images on this page do not have alt tags containing your keyword / phrase.’ To get this metric to turn green make sure when uploading an image to include the alt tags (or edit the image then add an alt tag). Having images and images with alt tags (meaningfully filled in ), will in turn make google score your page higher, using Yoast Wordpress seo plugin will put you above the competition.

Here I have given you the most important parts of the SEO tool to utilise. There are many more useful features that you can find out about by playing with the plugin and reading the docs over at https://yoast.com/wordpress/plugins/seo/ . Have fun I hope you have enjoyed my beginners guide to using Yoast SEO plugin and watch the leads roll in.

How to add a simple Online Booking Form to WordPress using Ninja Forms

September 11, 2014 by louie171 16 Comments

In this post I’m going to explain how to add a Simple Online Booking Form to WordPress.

Having a booking form on your website can be a great lead generator and allows you to take orders for your services while you sleep! With tools like the plugins like Ninja Forms or Gravity Forms you don’t even need to know how to use PHP or HTML. In this post I’ll explain how to create an online form using Ninja Forms.

Update Jan 2016: I notice alot of people want to know how to add Datepicker field to a form, if thats you check out image below for how to.

how to add a datepicker field to ninja form

How to easily add online forms to your website with no programming

Firstly goto the WordPress site and download the plugin. Then unzip it and pop it into the wp-content/plugins directory, and activate it in the admin interface as you would for any WordPress plugin. You will notice a new link in the left admin panel called ‘Forms’.

Configuring the Forms emails

To create our booking form click on ‘Add New’ , and then we need to configure the emails that are sent after the booking is sent. There are 2 emails to be sent:

1. one to the user who submits the form to thank them for booking online

2. the second email is sent to you/me the admin of the website to notify us of an online booking

For this example (see screenshots), I will setup the emails for an imaginary personal trainer. Just copy what I’ve done but inserting your own details instead of what I have in the screenshot.

Setting up the Form

In this example we will setup 5 form fields: name, email, date, time, details (e.g. I want to use Boxercise to get fit). We click on the Field Settings to bring us on the form page.

This screenshot shows a summary of what the form will look like in the admin interface.

1. click the ‘Textbox’ button, this opens a section on the right , rename the Label to ‘Name’ and click save field settings.

2. next click email button on left and save field settings.

3. click ‘Textbox’ button and change the label to date , also click the checkbox ‘datepicker’ and click save field settings.

4. click the ‘Textbox’ button, this opens a section on the right , rename the Label to ‘Time’ and click save field settings.

5. click the ‘Textarea’ button, this opens a section on the right , rename the Label to ‘Details’ and click save field settings.

6. click ‘submit’ button to add a button to send our form ( I have renamed this to ‘Send’)

7. Finally click form prefix to see a sneak peak at what our form will look like.

Adding the Form to a page

There are a few different ways todo this, I’ve going to explain how to add it by using a WordPress shortcode.

1. Click on ‘All Forms’ and copy the shortcode from the relevant form

2. create a new WordPress page (or use an existing one)

3. paste the shortcode into the page and save it.

4. Then visit the page and fill out the form and submit it, to check that it sends your admin email address the details about the booking. An email is also sent to the user who filled out the form (thanking them for booking online).

So I hope you’ve found this tutorial on ninja forms useful, in show you how to add an Online Booking Form to WordPress. Now go forth and create forms !

WordPress how to create a Custom Post Type (CPT) programmatically in php

August 6, 2014 by louie171 Leave a Comment

One of the most important developments of recent years in WordPress has been adding the ability to create our own Custom Post Types (CPT). [Read more…]