An Ultimate Guide to WooCommerce SEO For Your Products

For many newbies, running a digital store may seem complicated. Choosing the right platform and going into details of a proper promotion strategy is a responsible moment at the start. We are here to present the WooCommerce platform and explain how you can use WooCommerce SEO to make Google love your store.

Understanding WooCommerce

WooCommerce is a WordPress plugin designed for those who want to build an eCommerce store. This platform has a solid and productive foundation of WordPress, so you can realise the potential that the most popular and effective content management system offers to you while creating your unique eCommerce space.

WooCommerce inherits useful WordPress features that you can implement on your website. It is an open-space platform where every detail is fully customisable, so as a result, you will have a functional one-of-a-kind digital store.

Additionally, WooCommerce adopts the SEO-friendliness of WordPress, which means you immediately get a set of built-in optimisation features. But do you really need to get into SEO and perform it in your store? What are the advantages of SEO WooCommerce? Let us dive deeper into search engine optimisation and what you will get from it.

The Value of WooCommerce SEO

Search engine optimisation helps people across the net improve the performance of their blogs, websites, and digital stores. SEO tools and means aim at interaction with search engines, which can help you reach your business goals.

Here is what the magic of WooCommerce SEO can do for your store:

  • Better user experience. You optimize a website or a store guided by search engine rules. However, as a result, you will have a space that is easy and comfortable to use: an intuitive interface, fast page speed, informative content, pleasant design, etc. The better SEO you provide, the more visitors will get satisfaction later on.
  • Improve your ranking. The ultimate goal of SEO is letting Google notice you and improve your rankings in search results and thus make your website visible to a larger number of users.
  • Increase sales. The better traffic inflow you get, the more people you can convert into leads. Along with other positive side effects of optimization, your visitors will more likely tend to buy your products or pay for your service.
  • Enhance the authority of your store. By having your store on top of search results, you will increase the trustworthiness, authority, and overall reputation of your website. That is a fertile ground for productive partnerships.
  • Make the outcomes last longer. Unlike other marketing methods, SEO has middle- to long-term effects. It is a systematic approach that requires constant effort investments, but after all, you will enjoy your results for a longer time.

As mentioned above, WooCommerce has a great SEO basis. However, you can take a step further and enhance your optimisation performance. How can you improve and sustain the SEO WooCommerce space to make Google rank you higher and provide high-quality organic traffic? Read on to discover the 5 best tips on how to enhance WooCommerce SEO for your website.

5 Steps to Optimise Your WooCommerce Store

1. Work on WordPress Setup

As long as WooCommerce is a WordPress plugin, make sure you adjust this system for SEO. For that, using special extensions may be helpful. You can try out a popular Yoast SEO plugin to create a credible SEO basis for your further work.

2. Optimise Your Product Page

Optimising each component of your product page will increase your chances to get visible in Google queries. Work on the following parts of your page:

  • Product SEO title and URL;
  • Meta descriptions;
  • Categories and WooCommerce tags.

If all these components comply with basic SEO requirements, you will already improve your optimisation drastically.

3. Consider Adding Alt Text to Your Images

Even product images can become an object of WooCommerce SEO. Alt text attracts visitors who use image search. Moreover, it is an SEO signal for Google, as its initial aim is to help users quickly find what they are looking for. Alt text is a great place for keywords, too, if it describes the product comprehensively.

4. Provide Technical SEO

Whether you work on WooCommerce SEO or SEO for Shopify a store, technical optimisation is a must. A clear website structure, simple navigation and WooCommerce search in the store, intuitive design, a higher page speed, and mobile optimisation are obligatory SEO components. Not only are they crucial for Google rankings but they also make it easier and more satisfying for your visitors to scroll your WooCommerce store.

Take Care of Security

A good SEO specialist will always insist on proper security control for your store. First, this will enhance your reputation and will never harm your visitors. Second, Google always strives to create a safe space for Internet users. If your website is insecure, this can lead to dramatic consequences like Google penalties.

What Comes Next?

After you perform these basics of WooCommerce SEO, you will have a great basis for your further work. Never hesitate to learn more about this process, check for more details to cover other aspects of SEO for your store.

Effective optimisation means constant improvement and looking for more opportunities. Do not forget about the basics of website SEO, learn on tmcnet.com about backlinks, and get a professional consultation if you are feeling stuck. WooCommerce SEO is all about effort and consistency, but the results will be impressive!

 

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

The Future of E-commerce: 9 Trends in the Evolution of the Global E-Commerce Market

The e-commerce industry is in constant flux. This introduces a certain fear and uncertainty, but at the same time makes you understand and be interested in the field even more.

Every year: unexpected changes, turns, challenges that can take your business to a new level or, conversely, become a critical point of your e-commerce project.

Regardless of the ups and downs, you face this year, remember that the e-commerce market is booming now. It is getting bigger and more diverse than ever before. This is why we want to present an exclusive overview of e-commerce growth trends in 2020.

I’ve compiled a list of the ten hottest e-commerce trends that will probably push you to new ideas, answer pressing questions, and help make your business even more successful over time.

1. By 2022, Global E-commerce Retail Sales Will be Total $4.9 Trillion.

According to a recent study, global e-commerce retail sales will hit a new high by 2022. From $1.3 trillion in 2014 to $4.9 trillion in 2022, e-commerce businesses may expand by 265 percent. This indicates a future trend of steady growth with no visible signs of a downturn.

However, what’s more intriguing is that e-commerce sales are gradually devouring the worldwide retail industry. E-commerce will account for 17.5 percent of worldwide retail revenues by 2022.

Of course, this share is still a small fraction of global retail sales, but it also opens up more opportunities for growth in the future. To capitalise on this trend, physical stores should start building the infrastructure to move their business from offline to online. And online companies should look for new ways to further develop their brands.

2. Shopping Through Many Channels Will Become More Common.

The usage of many channels will become increasingly prevalent as the borders between the real and digital environments blur. This is evidenced by 73% of shoppers using many channels to shop.

The use of multi-channel promotion by e-commerce companies is an opportunity to determine what, where, when, how, and why people buy.

There are many examples of how multichannel shopping works. For example, people can find all the product information online and then buy in a physical store, or buy items online and pick them up in an offline store. The more channels your customers use, the higher the chance that their average order value will rise. Shoppers who used more than four shopping channels spend an average of 9% more in-store than those who only use one.

Every client interaction point is critical because it compiles all the data into a complete customer story. Keeping track of all your consumers’ interactions with a product or service before they buy will help you better target your marketing efforts and divide your advertising budget.

Make sure you integrate your offline and online venues into a single marketing channel. Create convenient offline outlets for customers who get to know the product online and make offline purchases. You need to develop a convenient mechanism for customers to shop online and pick it up at a point near them. This also means that your offline and online data must always be in sync to make business decisions faster and more efficiently.

3. The Growing Popularity of Shopping on Social Networks

More and more people are shopping through social media thanks to its rapid development. Now social networks have become more than advertising channels. And now people can conveniently and quickly purchase goods on the most popular platforms they use every day.

Facebook, Instagram, Twitter, and Pinterest have already introduced the ability to use product catalogues, which has increased online sales. For example, Instagram has launched a “shoppable post” feature that allows companies to tag products with shopping tags in posts or stickers in stories.

When people click on a product tag on a post or sticker in a story, they see:

  • An image of the item
  • Short description
  • Price
  • A button that, when clicked, takes the person to the site to purchase the item

This tool reduces the time customers make purchases on social networks. There are many other tools with which you can promote products and services on social networks, so take note of this trend in 2021/2022 and start expanding your audience.

4. The Core of E-commerce is Shifting Away From The Western Hemisphere

In 2020, the US behemoth’s share of the overall global e-commerce retail industry is expected to drop by as much as 16.9%. One major factor in the decline is the rise of globalisation and improvements in technology and infrastructure in other regions.

As a result of this shift in focus, businesses must adopt a global approach to provide worldwide accessibility and ease for clients all over the world. Adapting to a global business model, of course, does not need actual presence outside of your nation.

The surest way is to look for reliable partners in countries or regions where there is high demand for your products. Mondelez International, the manufacturer of Oreos and Cadbury, teamed up with ChannelSight to sell its products in 25 additional regions, connecting more than 130 merchant websites.

5. The Development of International Shopping

A fascinating truth is that customers are searching for products on the internet outside of their native nation. In fact, 57% of online consumers said they had bought at foreign online businesses in the previous six months.

By region, 63.4 percent of customers have bought online outside of their own country, 57.9% in Asia-Pacific, 55.5 percent in Africa, 54.6 percent in Latin America, and 45.5 percent in North America. This pattern is linked to the globalisation of e-commerce. Don’t forget to invest in infrastructure and technology to assist you to adapt to international buyers when selling to foreign nations.

6. Growth of Online Commerce in The B2B Segment

B2B eCommerce refers to business-to-business internet transactions. When comparing B2B and B2C eCommerce, the B2B market is anticipated to be twice as large in 2020.

By 2022, B2B e-commerce sales in the United States will total $1,184 trillion. The prevalence of B2B means that businesses in the business-to-business segment must strive to simplify transactions, bringing the process closer to the B2C model. B2B transactions are much more complex because customers must go through several different steps of the transaction before making a purchase, including interacting with a sales representative, negotiating terms, and closing a contract.

In other words, B2B businesses must adapt to easier ways to close deals by creating simplified opportunities to interact with customers, manage orders, etc.

7. Personalisation in E-commerce Will Become The Standard

Personalisation in e-commerce has been a booming trend among companies around the world over the past few years. But in 2020 and beyond, personalisation will become an unwavering standard. According to statistics, 33% of customers have terminated their relationships with companies where they noted a lack of or inadequate personalisation.

In addition, personalisation is already an entire marketing strategy. Personalisation in e-commerce is based on a comprehensive analysis of the customer’s personal information, demographics, online behaviour, purchase history, and any other data relevant to online shopping.

There are many ways to incorporate personalisation into your business. For example, you can recommend certain products in your online store based on what they’ve already added to their cart.

8. The Revolution in Mobile Shopping

The mobile market has matured quite a bit over the past few years, and by the end of 2018, mobile traffic reached 70% of total e-commerce traffic.

The desire of customers to conduct transactions without the need for a computer is driving the growth of mobile use in e-commerce. They want to be able to buy anything right away. Shoppers may now explore, evaluate, and purchase items from their mobile devices at any time and from any location.

Mobile shopping will become essential in the next years, with $175.4 billion in sales expected by 2022. This means that your e-commerce company should join the mobile shopping revolution by optimising your website for mobile devices and developing your own app.

9. Voice Commerce at The Peak of Popularity

It wasn’t long ago that new voice control technology was introduced to the world of e-commerce. People are already interacting with companies in new ways because of the arrival of speech technologies like Amazon Echo and Google Home.

Customers have embraced the function, and voice commerce is becoming more popular. Any commercial transaction that takes place by voice is referred to as voice commerce.

This technology has given e-commerce enterprises a new way to sell and expand their businesses. In fact, voice commerce is expected to generate $40 billion in revenue by 2022, and that’s just in the United States. In 2016, Amazon launched voice shopping, allowing customers to purchase Christmas goods via Alexa.

Posted by: Rebecca Carter

Rebecca Carter works as a content writer and provides do my essay service. She has a Bachelor’s Degree in Business Administration and during her study developed an enthusiasm for writing about the latest trends in the business world. When she is not writing Rebecca enjoys being in the mountains and volunteering.

 

It’s good to share

The Ultimate Guide to WooCommerce Dropshipping

Dropshipping has become an extremely popular business model in recent times. Anyone who does not want to deal with eCommerce shenanigans like shipping, fulfilment, and inventory management will find it to be the perfect fit.

All one requires is an online store to get started. Dropshipping involves the use of a third-party supplier for shipping products to customers and not the seller himself/ herself. As a seller, you only have to pick out products that are likely to sell and market them to the right audience.

WooCommerce offers the perfect platform to take your dropshipping venture to the next level. This guide provides all the details to get you started in no time. Let’s get started.

What Is WooCommerce Dropshipping?

Before we dive deep, it is important to know what WooCommerce dropshipping is. As you might already know, WooCommerce is an eCommerce platform that dropshippers can use for creating an online store and selling a wide range of products.

There are also other popular dropshipping platforms such as Instagram, Big Commerce, Magento, and Shopify. These platforms are used by every drop shipper besides digital marketing services providers.

No matter which platform you decide to use for dropshipping, you will come across three parties, as mentioned below.

  • Seller: That would be you. You get to run the online store, social media platform, and brand. Therefore, you have to market the products, list them, and respond to customer queries.
  • Customer: The customer will pay for the products and has to be marketed to learn about what you have to offer.
  • Supplier: The supplier would handle the order fulfilment after the customer has placed an order through you as they are the manufacturer. Thus, they would ship the product to the customer on your behalf.

Benefits of Dropshipping

Dropshipping offers a ton of benefits. Many eCommerce merchants find it to be the perfect option due to the following reasons.

  • Low Capital Requirements: One of the best things about dropshipping is that it requires minimal capital requirements. You do not have to spend a lot of money to get started. Besides, customers will make payments so that you can place an order with the supplier.
  • Zero Handling Costs: Merchants do not have to hold any inventory or deal with warehousing costs.
  • Shipping Handled by Suppliers: Since suppliers manage inventory, they also take care of the shipping.
  • Easy Scalability: Scaling your store is very easy as you do not have to create the products or warehouse them.
  • Ease of Entry: Since capital requirements and commitment are minimal, you can easily get started on your dropshipping venture. In fact, you can take on the venture from the comfort of your home.

Why Use WooCommerce for Dropshipping?

Now that you know more about the benefits of dropshipping, you must be wondering why you should use WooCommerce. The answer to your question is rather simple. It is very easy to get started with the platform.

WooCommerce is easily the most used eCommerce platform in the world. Its plugin is absolutely free and super easy to set up. However, you would require additional plugins to properly set up the dropshipping store.

Another great thing about the platform is that it boasts a simple and easy-to-use interface. It is quite similar to WordPress, which means that if you have used WordPress in the past, you should have no trouble with WooCommerce.

In addition to the above, WooCommerce has a huge community that you can reach out to for support and resources. As the WooCommerce plugin is open-source, you also benefit from complete control over the store.

What Do You Need To Start WooCommerce Dropshipping?

1. Create a WooCommerce Store

When starting a dropshipping business, you need to first create a WooCommerce store. It will allow you to use the dropshipping extensions. The following steps will help you create one in no time.

  • Head over to WordPress.org or WordPress.com. The latter will require you to create an account and download the WooCommerce plugin. The former will allow you to download WordPress and utilize its functionality any way you want. Thus, it is preferred by those wanting greater control.
  • Next, you need to select a hosting provider, theme, and domain name.
  • Now, you will just need to create the Home, Contact, and About pages.
  • Start adding products similar to how you would add posts on WordPress.
  • Finally, you have to select extensions. You can browse through the WooCommerce website to go through a variety of options based on your needs. To ensure that your dropshipping business is ready, you require plugins for payments, customer experience, taxes, security, marketing, and maintenance.

2. Select WooCommerce Dropshipping Extensions

To make drop shipping easier, you can add the following extensions to your WooCommerce store.

  • WooCommerce Dropshipping: This store management extension allows you to integrate other dropshipping extensions. It even helps you find suppliers and provide them with access to your backend for fulfilling orders.
  • Drop Ship Me: Next, you can also use this extension as it helps you find Ali Express suppliers. The chances are that you are familiar with Ali Express. The extension does all the research work so that you can easily identify the best suppliers.

3. Determine Which Products to Sell

Once you have installed the right extensions, you can proceed with identifying the products that you should sell. Determine a niche that will help you generate a profit. Market research will help go a long way. You can also use Google Trends to find a niche.

Before you jump the gun, you also have to learn more about consumer interest. Facebook Audience Insights will help go a long way. Besides this, you should conduct competitor research to learn about the major competitors.

Create Your WooCommerce Dropshipping Business

After you have gone over our guide, you will know all the basics about WooCommerce dropshipping. Make sure to focus on marketing as customers will not come to you if they do not know about your business.

Always remember that you will need to do more than just create a WooCommerce store to be successful. Create content to attract your target audience and establish trust through customer reviews. It will allow you to reach the top.

Posted by: Shoaib

Shoaib provides ghostwriting and copywriting services. His educational background in the technical field and business studies helps him in tackling topics ranging from career and business productivity to web development and digital marketing. He occasionally writes articles for Dynamologic Solutions.

 

It’s good to share

WooCommerce: Disable Payment Gateway for Specific User Role

You may want to disable payment gateways depending on the user role or user capability. For example, you may want to disable PayPal for ‘user role: subscriber’ or enable a specific gateway for another user role. This can be achieved without a plugin, all you need to do is paste the following code in your functions.php file.


/**
 * Disable Payment Gateway for a Specific User Role | WooCommerce
 */

add_filter( 'woocommerce_available_payment_gateways', 'payment_gateway_disable_private' );

 function payment_gateway_disable_private( $available_gateways ) {

    $user = wp_get_current_user();

    if ( isset( $available_gateways['cod'] ) && !is_user_logged_in() || isset( $available_gateways['cod'] ) && in_array('subscriber', $user->roles)  ) {
        unset( $available_gateways['cod'] );
    }

   return $available_gateways;

}

So what the above code will do is remove the ‘Cash On Delivery’ option if you are not logged in, or if you are a user with the ‘Subscriber’ role.

How to Find WooCommerce Payment Gateway ID

If you navigate to WooCommerce –> Settings –> Payments tab, if you inspect the element or view source of this page, you will see a list of codes within a table of all the gateways available on your website as shown in the below screenshot:

What if you want to disable payments for multiple user types?

Okay, we have you covered you here as well. Let’s say you want to disable ‘Stripe’ payment gateway for both the Administrator and Subscriber user but no other user…

What we need to use here is the PHP’s Array Intersect.

Again, this code will get added to your functions.php file and will look something like this:


/**
* Disable Payment Gateway for a Specific User Roles | WooCommerce
*/

function ts_disable_stripe( $available_payment_gateways ) {

//Check whether the available payment gateways have the Stripe option and if the user is not logged in or has the role administrator or subscriber
$user = wp_get_current_user();
$allowed_roles = array(‘administrator’, ‘subscriber’);

if ( isset($available_payment_gateways[‘stripe’]) && (array_intersect($allowed_roles, $user->roles ) || !is_user_logged_in()) ) {

//Remove the stripe payment gateway
unset($available_payment_gateways[‘stripe’]);
}

return $available_payment_gateways;
}

add_filter(‘woocommerce_available_payment_gateways’, ‘ts_disable_stripe’, 90, 1);

Now, the $allowed_roles can list an array of all the users you would like to not display a specific payment gateway for.

Is there a Plugin alternative?

If you don’t feel 100% confident with coding there is a plugin available which offers the same capabilities as the non-plugin method.

There is a plugin called WooCommerce Conditional Payment Gateways to be the most complete when you need to enable/disable payment gateways based on certain criteria. You can create unlimited ‘rules’ and use, for example, cart totals, billing country, shipping country, user role and much more to define which payment gateway shows and which not.

 

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 control over 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',
		'required' => true,
		'options' => array(
			'' => __( 'Select from list' ),
			'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 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

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