6 Ways to Design Your eCommerce Website for More Conversions

The e-commerce industry is getting more competitive by the day. As more e-commerce sites are introduced, you must put in every effort to boost conversions. 

The fact is that the quality of a service or product is just not enough. You also need to look at other factors to increase conversions. One of the ways through which you can do this is through design. The design of your e-commerce website plays a huge role in its success.

With the right design, you can drive more visitors and convert them. Make sure to focus on every part of the customer journey and ensure that the design facilitates the purchase. 

From the moment potential customers visit the landing page, you have to guide them to the relevant product category and the checkout page.

This post takes a close look at the best e-commerce website design practices that will provide your customers with an intentional and delightful conversion path.

1. Include Clear CTAs (Call-To-Action)

To convert website traffic, you have to include clear CTAs. Common examples of ecommerce site CTAs include “Add to Cart” and “Buy Now.” They easily stand out and encourage visitors to act as desired. 

When creating a CTA, you should use unique design elements, well-designed website and contrasting colours. Optimise them to ensure that users can instantly recognise them. The wording should be short and attractive at the same time. The CTAs also have to be aligned with the specific webpage.   

A great tip that will help you craft the perfect CTAs is the creation of a sense of urgency. According to a study conducted by CXL, it was found that e-commerce site conversion rates can increase by more than 330% by adding a sense of urgency.  

For instance, you could include “Final Promotion” or “Amazing Deal” to nudge visitors to make a purchase.

2. One-Click, Simple Checkout for all Customers

By adding a one-click, simple checkout process for all your customers, you get to ensure that they can quickly make a purchase without getting distracted.

It has been found that one-click checkout can help reduce the checkout process by as much as 90%, which is perfect for customers that demand fast service.

As you eliminate extra steps, you will notice a decrease in cart abandonment. This should be reason enough to simplify and streamline the checkout process. 

Now, it is not necessary to opt for a one-click checkout. However, it does not mean that you should streamline the checkout process, as doing so would help increase conversions. A great way to do this is by requiring customers to provide as minimal data input as possible.

3. Provide Different Payment Methods

When it comes to making an online purchase, customers expect to have multiple options. Besides card options, you need to show customers that you are willing to accept digital currencies (Bitcoin), e-invoices, digital wallets, bank transfers, direct debit, and so on.

Even though you cannot expect to provide customers with hundreds of payment methods, you need to make sure that the payment methods you allow are appropriate for your target audience. Learn as much as possible about your customers to provide the right payment methods.

For instance, websites that have average spending of $50 or more should provide debit and credit card-style payments. Make sure to offer the top 3 payment methods for increasing the conversion rate by 30%

4. Include Product Reviews

To ensure that customers are motivated enough to make a purchase, you need to include product reviews. Digital marketing experts claim that product reviews keep potential customers interested. 

When you include customer reviews below or next to the product, you get to show leads that your products or services are trustworthy. There is no better way to drive purchase decisions than by providing customers with reviews. 

Now, it should be very easy for customers to leave feedback. For instance, Amazon does a great job when it comes to customer reviews. It showcases the customer reviews right next to the product that you are searching for.  

5. Add Images

Humans are visual creatures. We tend to notice images more easily as compared to text. Therefore, you must add excellent images of your products or services to boost online conversions. Always remember that a picture is worth more than a thousand words.

With high-quality photos, you can cover every aspect of your product. It would help provide buyers with the confidence needed to make a purchase. They would find the product to be worth their time. On the other hand, low-quality pictures would deter potential customers.

Besides, most site visitors simply look at the pictures and do not read the site word to word. Hence, it should be clear just how important images are in helping you make the right impression on customers.

6. Optimise the Site for Mobile

As more and more people use a smartphone to access the internet, you need to make sure that your website is mobile-friendly. Otherwise, you would lose out on a huge percentage of potential clients. 

Statistics reveal that about half of online traffic is mobile-based. It should convince you to design your e-commerce website for smartphones and other devices. Only when you create a site for smaller screens will you be able to boost conversions.

Moreover, it is vital to keep in mind that phone data can be quite unreliable. It means that the e-commerce site should be mobile-optimised if you want users to make a purchase and act in the desired manner. 

The website load speed should be quick for both mobile and desktop users. It should not be affected by a slow internet connection. Furthermore, you should know that you need to design the e-commerce site differently for both mobile and desktop users. 

Conclusion – Design Your eCommerce Website for More Conversions

Once you have gone over this post, you will be able to design your e-commerce site for more conversions. From adding clear CTAs to optimising the site for mobile, each tip mentioned above is extremely useful. Make sure to take advantage of every tip for the best results.

Posted by: Myrah Abrar

Myrah Abrar is a computer science graduate with a passion for web development and digital marketing. She writes blog articles for Dynamologic Solutions, Digital Marketing.

It’s good to share

Our Top 10 Used Plugins For WordPress – 2021 Edition

Every WordPress developer has a bunch of plugins they tend to install on pretty much every WordPress site they develop, and we are also that kind of people. These plugins give great solutions for caching, security and adding other improvements that build on WordPress core.

That’s the beauty of WordPress – there are loads of plugins to choose from and they are so quick and easy to implement. Some plugins are just a case of downloading and activating, others provide a shortcode which you can copy and paste within your pages and others is a simple as dragging and dropping a widget where ever you wish to display it.

With so many free and premium plugins available, how do you distinguish from the good and bad plugins out there?

Do note, overloading your web site with too many plugins can cause plugin conflict and reduce the speed of your web site, so if you can avoid a plugin and just code it in, that’s even better!

Below you will find our selection of essential plugins, all chosen based on their usefulness, quality and popularity.


1.) WooCommerce

WooCommerce is a great plugin and is really quick and easy to install. It turns your standard WordPress website into an eCommerce store and creates all the necessary pages for you (My Account, Checkout, Cart etc). It allows integration with secure payment methods such as Bank Transfer, PayPal, SagePay and many more. With a huge range of features that can be quickly changed in the Control Panel, this is definitely one of my favourites because of the speed you can set up a fantastic eCommerce website.


2.) Advanced Custom Fields

Advanced Custom Fields is an amazing plugin and without a shadow of a doubt, it’s installed on every project I build. I would definitely recommend getting a licence for the Pro version which you can find out more information about here. You can use the Advanced Custom Fields plugin to take full control of your WordPress edit screens & custom field data. It makes it super easy for clients to change text / images any many other things within your WordPress site without any risk of breaking the site.


3.) Contact Form 7

Contact Form 7 is another plugin I use on pretty much every WordPress site I develop. You can manage multiple contact forms, customise the form and the mail contents and again, it’s really easy to use. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and many more. All the form elements are generated for you so you don’t even have to know any PHP code. If your not already using this plugin for your forms, I suggest giving it a try now!


4.) Yoast SEO

SEO Yoast is a fantastic platform for SEO. I have used this plugin on 100% of the WordPress sites I have developed and it is the only plugin I use in terms of SEO. If set up correctly, it will improve your site’s SEO on all needed aspects. WordPress SEO forces you to choose a focus keyword when you’re writing your articles, and then makes sure you use that focus keyword everywhere, it also ranks the SEO of all your pages and posts from ‘Bad’, ‘OK’ to ‘Good’ so you know if your content is going to have any chance of ranking on search engines. The best feature about this plugin is that it even tells you how you can improve the performance of each and every page on your site. It may say things such as, you need to include

tags or include an outbound link on your page/post. You will learn a lot about SEO if you run this plugin on your websites. We actually use the SEO Yoast Premium version which allows up to 5 keywords on each page/post/CPT including many other great features which you can read about or purchase here.


5.) Hummingbird Page Speed Optimization

The next 3 set of plugins I’m going to be talking about are plugins offered by WPMU DEV which you can read about more here. There are free versions of these plugins but they also have premium versions which offer a lot more features which I would highly recommend. Hummingbird PRO is an awesome caching plugin. It zips through your site and finds new ways to boost page speed with fine-tuned controls over file compression, minification and full-page, browser and Gravatar caching. Load your pages quicker and score higher on Google PageSpeed Insights with Hummingbird site optimization.


6.) Smush Image Compression and Optimization

This plugin is one of my favourites; it will resize, optimise and compress all of your images with the incredibly powerful and 100% free WordPress image smusher. This uses Lossly compression which will significantly reduce the file sizes of all images on your web site which will definitely increase your sites speed. Again, the premium version of this plugin is 100% recommended as it will allow you to SUPER-Smush all your images along with a few other great features which will allow you to further optimise your site. Need a high Google Speed Test score? This plugin combined with Hummingbird will make the job a piece of cake 😉


7.) Defender Security, Monitoring, and Hack Protection

Security is definitely important when it comes to WordPress, the number of sites I’ve had to restore/repair and remove Malware from is crazy. So make sure you have fully configured a great security plugin to prevent your web site from these kinds of attacks. Defender is layered security for WordPress made easy. And by easy, I mean amazingly easy! No longer do you have to go through hideously complex settings and get a virtual PhD in security. Defender adds all the hardening and security tweaks you need, in just minutes!


8.) Akismet Anti-Spam

Sick and tired of spam comments and junk email from your WordPress site? Akismet has you covered! Akismet checks your comments and contact form submissions against their global database of spam to prevent your site from publishing malicious content. You can review the comment spam it catches on your blog’s “Comments” admin screen.


9.) MailChimp for WordPress

MailChimp for WordPress allows your visitors to subscribe to your newsletter very easily. This plugin helps you grow your MailChimp lists and write better newsletters through various methods. You can create good looking opt-in forms or integrate with any existing form on your sites, like your comment, contact or checkout form.


10.) Classic Editor

Finally, our last plugin which we have made a lot of use from since WordPress 5 is Classic Editor! Classic Editor is an official plugin maintained by the WordPress team that restores the previous (“classic”) WordPress editor and the “Edit Post” screen. It makes it possible to use plugins that extend that screen, add old-style meta boxes, or otherwise depend on the previous editor. By default, this plugin hides all functionality available in the new Block Editor (“Gutenberg”). Since a lot of people are finding it difficult to get their heads around Gutenberg, this is a great quick fix plugin which will restore the editor back to the way you’ve known and loved for a long time.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Add Plus & Minus Buttons In WooCommerce To Cart or Product Archive

In this tutorial, we are going to show you a very simple way to show a + and a - (plus & minus) on each side of the quantity number input on the WooCommerce single product page. We will also show you how you can apply this to the product archive page as well.

For this, we use jQuery as we need to detect whether the plus or minus are clicked so that we can update the quantity input value. jQuery code can be daunting for some, but the beauty of this is that it’s a simple copy and paste tutorial.

Do note, you may require some additional CSS to what we have provided to match the theme of your website. We’ve added some CSS to this tutorial to get you going. What you will end up with is something like this:

Here is the snippet to add plus and minus buttons in WooCommerce

You can simply copy and paste the below code to your functions.php file:


/**
 * Plus Minus Quantity Buttons @ WooCommerce Single Product Page
 */
  
// -------------
// 1. Show Buttons
  
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
function silva_display_quantity_plus() {
   echo '<button type="button" class="plus" >+</button>';
}
  
add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_minus' );
  
function silva_display_quantity_minus() {
   echo '<button type="button" class="minus" >-</button>';
}
 
// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
// -------------
// 2. Trigger jQuery script
  
add_action( 'wp_footer', 'silva_add_cart_quantity_plus_minus' );
  
function silva_add_cart_quantity_plus_minus() {
   // Only run this on the single product page
   if ( ! is_product() ) return;
   ?>
      <script type="text/javascript">
           
      jQuery(document).ready(function($){   
           
         $('form.cart').on( 'click', 'button.plus, button.minus', function() {
  
            // Get current quantity values
            var qty = $( this ).closest( 'form.cart' ).find( '.qty' );
            var val   = parseFloat(qty.val());
            var max = parseFloat(qty.attr( 'max' ));
            var min = parseFloat(qty.attr( 'min' ));
            var step = parseFloat(qty.attr( 'step' ));
  
            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
            } else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            }
              
         });
           
      });
           
      </script>
   <?php
}

To get this looking like our example, we need to add some CSS code as well. This depends on the theme but to get you started, you can add the following CSS code:


.single-product div.product form.cart .quantity {
   float: none;
   margin: 0;
   display: inline-block;
}

How we used this in our example website; Product Archive

We simply added the below code to our functions.php file:


/**
 *	Show Quantity On Products
 */

add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_echo_qty_front_add_cart' );
 
function silva_echo_qty_front_add_cart() {
 echo '<div class="qty-txt">Quantity: </div>'; 
}


/**
 * Plus Minus Quantity Buttons @ WooCommerce Single Product Page
 */
  
// -------------
// 1. Show Buttons
  
add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
function silva_display_quantity_plus() {
   echo '<button type="button" class="minus" >-</button>';
}
  
add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_minus' );
  
function silva_display_quantity_minus() {
   echo '<button type="button" class="plus" >+</button>';
}
 
// Note: to place minus @ left and plus @ right replace above add_actions with:
// add_action( 'woocommerce_before_add_to_cart_quantity', 'silva_display_quantity_minus' );
// add_action( 'woocommerce_after_add_to_cart_quantity', 'silva_display_quantity_plus' );
  
// -------------
// 2. Trigger jQuery script
  
add_action( 'wp_footer', 'silva_add_cart_quantity_plus_minus' );
  
function silva_add_cart_quantity_plus_minus() {
   ?>
      <script type="text/javascript">
           
      jQuery(document).ready(function($){   
           
         $('.woocommerce-variation-add-to-cart').on( 'click', 'button.plus, button.minus', function() {

            // Get current quantity values
            if ( $( this ).is( '.minus' ) ) {
            	var qty = $(this).next().find('.qty');
        	} else {
        		var qty = $(this).prev().find('.qty');
        	}
            var val   = parseFloat(qty.val());
            console.log(val);
            var max = parseFloat(qty.attr( 'max' ));
            var min = parseFloat(qty.attr( 'min' ));
            var step = parseFloat(qty.attr( 'step' ));
  
            // Change the value if plus or minus
            if ( $( this ).is( '.plus' ) ) {
               if ( max && ( max <= val ) ) {
                  qty.val( max );
               } else {
                  qty.val( val + step );
               }
            } else {
               if ( min && ( min >= val ) ) {
                  qty.val( min );
               } else if ( val > 1 ) {
                  qty.val( val - step );
               }
            }
              
         });
           
      });
           
      </script>
   <?php
}

Conclusion

Simple right? We can now add a plus and minus button for each product on either the archive product page or the single product page. This can be extremely useful for both pages, to be honest. Quite often, a lot of people don't know how to work a number input field, so instead, we can add two simple buttons to increase or decrease the quantity of a product you wish to add to the cart. It's a great simple way to improve the UI/UX to your WooCommerce store, that's for sure!

If you enjoyed this tutorial or if you require any help with the setup, feel free to drop us a comment below and we'll be happy to assist you with this!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Hide WooCommerce “Free” Price Label

In this tutorial, we are going to show you an easy method of removing the “Free” Price Label in WooCommerce.

A common WooCommerce problem we find from time to time is removing the “Free” price label in the product, category and shop pages.

This is added automatically by WooCommerce. Maybe you have tried removing these either with CSS or by editing the core WooCommerce files… However, you will realise this can be quite a frustrating task to do.

To speed things up, here is an easy solution to quickly hide all those “Free” price labels just by adding the following code to your theme’s functions.php in the usual manner theme-name-child/functions.php, or perhaps to your custom site plugin and you should be free of this “Free!” label.


add_filter( 'woocommerce_variable_free_price_html', 'hide_free_price_notice' );
 
add_filter( 'woocommerce_free_price_html', 'hide_free_price_notice' );
 
add_filter( 'woocommerce_variation_free_price_html', 'hide_free_price_notice' );
 
/**
 * Hides the 'Free!' price notice
 */
function hide_free_price_notice( $price ) {
 
  return '';
}

Let us know if this helped you!

If you need any help, feel free to leave a comment below if you need any assistance.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How To Display An Order Delivery Date And Time At Checkout With WooCommerce

In this tutorial, we are going to show you can add a calendar with both date a time selection on the WooCommerce checkout page. This is especially useful if you have an e-commerce website with a click and collect feature, but this can be used in various other case scenarios also.

What you will end up with is a date time selector at checkout which will be recorded in WooCommerce orders, in our example we used this for a click and collect where you could specify the date and time in which you would like to collect the item. This will look something like the below:

So, to implement this, all you have to do is add the following code to your functions.php file:


/**
 * @snippet - Display Order Delivery Date Time Picker @ WooCommerce Checkout
 */
  
// -------------------------------
// 1. Display Checkout Calendar if Shipping Selected
  
add_action( 'woocommerce_review_order_before_payment', 'silva_echo_acf_date_picker' );
  
function silva_echo_acf_date_picker( $checkout ) {
     
   echo '<div id="show-if-shipping" style="display:none"><h3>Collection Date</h3>';
     
   woocommerce_form_field( 'delivery_date', array(
        'type'          => 'text',
        'class'         => array('form-row-wide'),
        'id'            => 'datepicker',
        'required'      => true,
        'label'         => __('Book before 12pm, collect the same day.'),
        'placeholder'       => __('Click to open calendar'),
        ));
     
   echo '</div>';
     
}
  
add_action( 'woocommerce_after_checkout_form', 'silva_show_hide_calendar' );
   
function silva_show_hide_calendar( $available_gateways ) {
     
?>
  
<script type="text/javascript">
     
   function show_calendar( val ) {
      if ( val.match("^local_pickup") ) {
         jQuery('#show-if-shipping').fadeIn();
      } else {
         jQuery('#show-if-shipping').fadeOut();
      }   
   }
     
   jQuery(document).ajaxComplete(function() {
       var val = jQuery('input[name^="shipping_method"]:checked').val();
      show_calendar( val );
   });
     
</script>
  
<?php
     
}
  
add_action( 'woocommerce_checkout_process', 'silva_validate_new_checkout_fields' );
   
function silva_validate_new_checkout_fields() {   
     
   if ( isset( $_POST['delivery_date'] ) && empty( $_POST['delivery_date'] ) ) wc_add_notice( __( 'Please select the Collection Date' ), 'error' );
   
}
  
// -------------------------------
// 2. Load JQuery Datepicker
  
add_action( 'woocommerce_after_checkout_form', 'silva_enable_datepicker', 10 );
   
function silva_enable_datepicker() {
     
  ?>
  
   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>   
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css">

	<style>
	.xdsoft_datetimepicker .xdsoft_calendar td, .xdsoft_datetimepicker .xdsoft_calendar th {
		background: #FFF;
		color: #000;	
	}
	.xdsoft_datetimepicker .xdsoft_calendar td:hover {
		background: #000 !important;
		color: #FFF !important;
	}	
	.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
	    background: #000;
	    color: #FFF;	
	}
	.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
	    	background: #000;
	    	box-shadow: none;
	}

	.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
		color: #FFF;
	}
	.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
		color: #000;
		background: #FFF;
	}
	.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
		background: #000 !important;
	}
	</style>
	  
  <?php    
     
}
  
// -------------------------------
// 3. Load Calendar Dates
  
add_action( 'woocommerce_after_checkout_form', 'silva_load_calendar_dates', 20 );
   
function silva_load_calendar_dates( $available_gateways ) {
  
   ?>
  
   <script type="text/javascript">
  
      jQuery(document).ready(function($) {

      	jQuery.datetimepicker.setLocale('en');

		var currentDate = new Date();
		var minutes = currentDate.getMinutes();
		var m = (Math.ceil(minutes/30) * 30) % 60;
		currentDate.setMinutes(m);      	

		jQuery('#datepicker').datetimepicker({
			beforeShowDay: $.datepicker.noWeekends,
  		    format: 'd/m/Y H:i a',
  			minDate: 0, 			
  			minTime: 0,
  			step: "30",
			 allowTimes:[
			  '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30',
			  '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00'
			 ]  			
		});      	
  
      });
  
   </script>
  
   <?php
   
}
  
// -------------------------------
// 4. Save & show date as order meta
  
add_action( 'woocommerce_checkout_update_order_meta', 'silva_save_date_weight_order' );
  
function silva_save_date_weight_order( $order_id ) {
     
    global $woocommerce;
     
    if ( $_POST['delivery_date'] ) update_post_meta( $order_id, '_delivery_date', esc_attr( $_POST['delivery_date'] ) );
     
}
  
add_action( 'woocommerce_admin_order_data_after_billing_address', 'silva_delivery_weight_display_admin_order_meta' );
   
function silva_delivery_weight_display_admin_order_meta( $order ) {    
     
   echo '<p><strong>Collection Date:</strong> ' . get_post_meta( $order->get_id(), '_delivery_date', true ) . '</p>';
     
}

In our example, we added some styles which you can find in Part #2 which we customised to tailor for the black and white that the site has, feel free to tailor this to your exact needs.

We also added some functionality so that you couldn’t select a date or time before the current date and time (to avoid human-error obviously).

Also in our example, the client requested to have the date selection to Monday-Friday; 9:00-17:00 with 30 minute increments on the time selection. Again, feel free to customise this to your requirements.

You can check the documentation of the plugin we used to achieve this here.

We sure hope this tutorial helped you achieve what you wanted in your e-commerce shop. If you need any assistance with this, feel free to leave a comment below!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Display WooCommerce Product Reviews on Custom Page with a Shortcode

By default with WooCommerce, product reviews display by default in the ‘Reviews’ tab in a single product page. What we are going to show you today is how you can display them on any page of your website using a shortcode. This can be especially useful if you are using custom sales pages and need to show reviews on specific pages about a certain product.

So let’s dig into this…

Creating the WooCommerce Product Reviews Shortcode

Firstly, we need to add some code to our functions.php file:


/**
 * WooCommerce Product Reviews Shortcode
 */
 
add_shortcode( 'product_reviews', 'silva_product_reviews_shortcode' );
 
function silva_product_reviews_shortcode( $atts ) {
    
   if ( empty( $atts ) ) return '';
 
   if ( ! isset( $atts['id'] ) ) return '';
       
   $comments = get_comments( 'post_id=' . $atts['id'] );
    
   if ( ! $comments ) return '';
    
   $html .= '<div class="woocommerce-tabs"><div id="reviews"><ol class="commentlist">';
    
   foreach ( $comments as $comment ) {   
      $rating = intval( get_comment_meta( $comment->comment_ID, 'rating', true ) );
      $html .= '<li class="review">';
      $html .= get_avatar( $comment, '60' );
      $html .= '<div class="comment-text">';
      if ( $rating ) $html .= wc_get_rating_html( $rating );
      $html .= '<p class="meta"><strong class="woocommerce-review__author">';
      $html .= get_comment_author( $comment );
      $html .= '</strong></p>';
      $html .= '<div class="description">';
      $html .= $comment->comment_content;
      $html .= '</div></div>';
      $html .= '</li>';
   }
    
   $html .= '</ol></div></div>';
    
   return $html;
}

Adding the Shortcode

Once you’ve added the code to your functions.php file, we can now use the following shortcode on any page you like; [product_reviews id="ID"].

Simply replace the text ID with the product for which you want to output your customer reviews and that is simply all there is to it!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to change the city field to a dropdown in WooCommerce

Today we will show you how to change the city field to a dropdown in WooCommerce. This works great for those of you who need to set up city-based shipping rates. As you may already know, it is possible to achieve this using my Advanced Shipping plugin. However, the downside of this is that your customers can enter their own values for the ‘Shipping Field’ which means that you’d have to enter any type of variation a customer can enter to ensure the correct shipping cost is calculated and shown at the totals.

The chances are that the customer makes a typo or enters a value that is not recognised by the values you set up for the shipping rates. A possible solution to this is to change the default text input field to a dropdown. This way you will have the control which options are available and the customer can enter, and ultimately, this can reduce the error rate at the checkout stage.

Changing the city field to a simple dropdown

The following code snippet will change the city field to a standard dropdown. You are able to set up both the display value to the customer and the so-called ‘index’ or ‘key’ which is what the ‘City’ condition will match against (when using the Advanced Shipping plugin).

The below code needs to go in your theme/child theme’s functions.php file:


<?php
/**
 * Change the checkout city field to a dropdown field.
 */
function city_dropdown_field( $fields ) {

	$city_args = wp_parse_args( array(
		'type' => 'select',
		'options' => array(
			'birmingham' => 'Birmingham',
			'cambridge' => 'Cambridge',
			'leicester'   => 'Leicester',
			'liverpool' => 'Liverpool',
			'london'    => 'London',
			'manchester'  => 'Manchester',			
		),
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field

	return $fields;

}
add_filter( 'woocommerce_checkout_fields', 'city_dropdown_field' );

Let’s take this one step further and make the city select searchable…

Making a searchable city dropdown

If you have a large list of cities then it makes sense to add a searchable field, just like how the Country field works. Making it a searchable field can be done with a few additional lines of code.


<?php

// Copy from here

/**
 * Change the checkout city field to a dropdown field.
 */
function jeroen_sormani_change_city_to_dropdown( $fields ) {

	$city_args = wp_parse_args( array(
		'type' => 'select',
		'options' => array(
			'birmingham' => 'Birmingham',
			'cambridge' => 'Cambridge',
			'leicester'   => 'Leicester',
			'liverpool' => 'Liverpool',
			'london'    => 'London',
			'manchester'  => 'Manchester',
		),
		'input_class' => array(
			'wc-enhanced-select',
		)
	), $fields['shipping']['shipping_city'] );

	$fields['shipping']['shipping_city'] = $city_args;
	$fields['billing']['billing_city'] = $city_args; // Also change for billing field

	wc_enqueue_js( "
	jQuery( ':input.wc-enhanced-select' ).filter( ':not(.enhanced)' ).each( function() {
		var select2_args = { minimumResultsForSearch: 5 };
		jQuery( this ).select2( select2_args ).addClass( 'enhanced' );
	});" );

	return $fields;

}
add_filter( 'woocommerce_checkout_fields', 'jeroen_sormani_change_city_to_dropdown' );

This is how it looks with the searchable field:

Setting up shipping rates based on city

With this example, you can more easily set up rates based on the city field. Now you only have one variation the customer can enter instead of many different variations and prevent possibly typo’s. To setup city-based shipping using the ‘City’ condition, you can now enter the ‘key/index’ values set in the above code to match in the condition against what the user selects.

If you need any help setting this up, we’d love to help. Thanks for reading!

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

How to Skip the Cart Page and Go Straight to the Checkout Page in WooCommerce

Some people may find the process of ordering a product (especially if it’s a simple product) too long of a process. You can provide a better user experience for this by skipping the cart page and going straight to the checkout process. We recently developed a site where the purpose was to book online courses, in this situation, most often, users would just buy a single course at a time. That being said, this is why we decided to simplify the process and allow users to book courses a lot quicker.

The first thing you will need to do is navigate to WooCommerce -> Settings -> Products.

You will want to uncheck the following options:

  • Redirect to the basket page after successful addition
  • Enable AJAX add to basket buttons on archives

Once you have done this, simply add the following code to your functions.php file:


/**
 *	Bypass WooCommerce Cart
 */

add_filter('woocommerce_add_to_cart_redirect', 'silva_add_to_cart_redirect');
function silva_add_to_cart_redirect() {
	global $woocommerce;
	$checkout_url = wc_get_checkout_url();
	return $checkout_url;
}

And as simple as that, now when you click a product to add to basket, it will now redirect directly to the checkout page.

Taking it one step further, what we can also do is change the label of the ‘Add to Cart’ button.

How to Change the ‘Add to Cart’ label

Now that we have removed the cart from the checkout process, it now makes sense to change the label in the WooCommerce product. In our example, we are going to replace this with ‘Buy Now’. To achieve this, WooCommerce has a filter which again, we can add to the functions.php file as shown below:


/**
 *	Add New Pay Button Text
 */

add_filter( 'woocommerce_product_single_add_to_cart_text', 'silva_cart_button_text' ); 
 
function silva_cart_button_text() {
 return __( 'Buy Now', 'woocommerce' );
}

What this filter is doing is applying the text changes to the single product page. It could be that you have the product on another post type, for this; there is a second filter you can also use

The above filter applies the text to the single product page, however, you may have the product on another post type, there is a 2nd filter you can also use; woocommerce_product_add_to_cart_text as shown below:


/**
 *	Add New Pay Button Text
 */

add_filter( 'woocommerce_product_single_add_to_cart_text', 'silva_cart_button_text' ); 
add_filter( 'woocommerce_product_add_to_cart_text', 'silva_cart_button_text' ); 
 
function silva_cart_button_text() {
 return __( 'Buy Now', 'woocommerce' );
}

With all the above completed, we now have fewer steps to the key part of your e-commerce website; allowing your customers to purchase products quicker by simplifying the process!

Well, we hope you enjoyed this article, if you need help in any way, feel free to contact us or drop a comment below and we’d love to help you.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well as many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share