6 Reasons Why WordPress is Ideal in Startup Companies Today

Online presence is critical for any business looking to become a profitable venture. This is especially the case for startups that must leverage modern techniques. They can use a website to sell their ideas to stakeholders and their target audiences.

If you’ve just launched your startup, you’re probably worried about building a website. If you’ve already passed that phase and are thinking about the best platform, how about WordPress? A free website creation platform that’s ideal for startups. It allows startups to edit and alter the appearance of their websites without using code.

Every business needs a website, especially if it’s new and needs to grow into a successful venture. If you have no idea where to start, it’s important to seek help from a digital marketing agency for startups.

Getting a professional with a speciality in your business takes a lot off your shoulders. It gives you time to take care of other matters concerning your startup.

Usually, startups are short on cash, making it difficult to get experts to work with. Hiring a professional website developer enables a business to have its digital marketing strategy in order. So, how much should a startup spend on marketing?

According to experts, a startup should spend 12%-20% of the gross revenue on marketing.
Depending on the business strategies, you can figure out how to budget for the money. This is why it’s important to have an effective startup marketing agency.

A business needs to have a powerful digital presence to grow. Presently, customers Google businesses while comparing them to competitors. If you have a weak website or are not on the internet, you lose the game to your competitors. So marketers are leveraging digital marketing tactics, which has enabled them to increase their conversion rates.

The Benefits of WordPress for Startups

Many businesses, established and startups don’t know how beneficial WordPress is. Neither do they know why they need to use it for their businesses. In this article, we give you reasons why it’s a platform worth considering.

Let’s get started!

1. WordPress is Free

Nothing sounds better to a cash-strapped entrepreneur than hearing that WordPress is free. Which begs the question, so what’s the catch? WordPress is open source. Meaning that it’s not owned by anyone.

This website creation platform is backed by a billion-dollar company, Automattic. It also has the backing of volunteers all over the world who’re constantly working to improve it.

The platform is licensed under the General Public License. This makes it free for those who want to build websites. Users have access to free themes, updates, and plugins from the WordPress repository.

Just to make one thing clear. Yes, WordPress software is free. But that doesn’t mean that you will run a website at zero costs. There are costs attached to hosting, the domain name, and customisation.

Startup’s Scalability

As exciting as it can be, starting a business is challenging. So, how do you ensure that you are on the right path? You must integrate professionals and technology to make your business grow. By technology, in this case, we are talking about WordPress.

Apart from WordPress, you also need to seek the services of a startup branding agency. A properly funded startup branding strategy forms a roadmap for the company. It leads the company towards growth in the industry.

Advertising is another important tool for a successful startup. Now, advertising for startups is not as easy considering the limited resources. But that’s not to say that it’s impossible. Especially if you’ve adopted the use of WordPress, a free platform that can be used to talk about your products and services.

When using WordPress, you can display your ads in the sidebar. By using WordPress widgets, you can add Google Adsense in your sidebar. Then choose whether you want your ad to be fixed or responsive. This enables any visitor to your site to get to know more about what you do. In the long term, you start to reap the benefits

WordPress is Secure

When it comes to the security of a website, no platform is 100% safe. Especially when hackers are always devising ways of accessing company websites. WordPress hasn’t been spared either, considering its growing popularity.

What makes it a better platform is that it’s fairly safe. Reason being that it’s constantly monitored for security threats. Aside from that, its users are always quick to raise any security concerns. The platform is also prompt in releasing security updates. It also takes care of minor updates automatically by default.

As a user, it’s important to note that the security of your website is your responsibility. Select a reliable host with quality themes and plugins. Ensure that you have strong usernames and passwords. Also, be sure to update WordPress regularly. You should also backup your website every once in a while to enhance its security.

Extensive Plugins

Websites have different needs depending on different company operations. While some may be selling products, others may want an interactive community. WordPress provides a platform for different kinds of websites. It also allows companies to add functions that will enable them to achieve their goals.

WordPress gives you the liberty to choose a plugin from the more than 50,000 plugins in their repository.

The free plugins are great additions to a startup’s website. They can also add on functions whenever the need arises in business. For instance, a company may not need a live chat on its website at the beginning. But as time goes and the need arises, they can easily add a plugin for the needed functions.

WordPress is Mobile-Friendly and Easy to Use

There are more people today accessing the internet via mobile devices. And just so you know, Google doesn’t take kindly to websites that aren’t compatible with smartphones.

That is not something to worry about though, as WordPress has everyone covered. The technology it uses is compatible and can create web pages for smartphones. It also has a series of free and premium themes, with the ability to adapt to the size of the user’s screen.

When it comes to ease of use, WordPress has one of the best features. You can use it even without knowing any code. It’s just like working with any other processor. A startup can create web pages from a user-friendly interface. Not to pour cold water on the importance of basic coding skills, but even without them, you can still enjoy using WordPress.

The platform has courses, training, videos, podcasts, and blogs to assist you. It excels at Do-it-yourself, and even newbies can create content. It also allows you to embed third-party content like Vimeo and YouTube.

It’s Flexible and Customised

The other best thing about WordPress is its flexibility. The platform comes loaded with Javascript libraries that constitute jQuery.

Every theme on WordPress has in-built customisation characteristics that are easy to customise. The premium themes have built-in drop and drag features which are also easy to customise.

Final Thoughts

If you’re an entrepreneur who’s just launched a startup, this article must have been informative. Now you’re well informed about WordPress and why your business needs it. As an entrepreneur, you certainly know the importance of saving on money and time, which WordPress offers.

The market has different types of content management systems, but they’re expensive. Consider choosing WordPress to help you get your business to the world.

 

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

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

WooCommerce – How to Show a Confirm Message before Removing an Item from the cart / Update Basket on Quantity Change

A super simple one today, a client requested a popup message to confirm if you want to remove something from the cart. How do we achieve this? Pretty simple really, all you need is a bit of jQuery as shown below:


<script>

    jQuery( function($) {       
    $('.remove').click( function( event ) {
        if( ! confirm( 'Are you sure you want to remove the product?' ) ) {
            event.preventDefault();
            event.stopPropagation();
        }  

    });
});
</script>

Along with this amendment, the client asked if we could automatically update the basket on quantity change… Again, a pretty straightforward task here. In terms of UX, some users seem to find the update cart button as unnecessary or confusing; well, if we can make it easier for the users so the basket updates automatically on change, then why not do it?

A simple PHP function followed by two lines of JQuery and a line of CSS and you can quickly implement this!

1. CSS Snippet: Hide the WooCommerce “Update Cart” Button


input[name='update_cart'] {
display: none !important;
}
 
/* SHOULD THAT NOT WORK, TRY THIS */
 
button[name='update_cart'] {
display: none !important;
}

2. PHP Snippet: Auto-update WooCommerce Cart when Quantity Changes

Now that the update cart button is hidden, all we need to do is to ‘click’ the button via jQuery and let WooCommerce do the exact same job (updating cart totals, taxes, etc.).

In detail, when we ‘click’ on any of the quantity inputs, we go and trigger a ‘click’ on the hidden Update Cart button.

Easy, right?

Note: add the following to your functions.php (to the child theme if you using one)


add_action( 'wp_footer', 'silva_cart_refresh_update_qty' ); 
 
function silva_cart_refresh_update_qty() { 
   if (is_cart()) { 
      ?> 
      <script type="text/javascript"> 
         jQuery('div.woocommerce').on('click', 'input.qty', function(){ 
            jQuery("[name='update_cart']").click();
         }); 
      </script> 
      <?php 
   } 
}

If this has helped, leave a comment and share your thoughts! If you require any assistance, we'd love to help; simply drop us an email at [email protected]

 

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

How to Add the Product Price in WooCommerce as a Shortcode

If you are looking to add the WooCommerce product price into your page layout, then you’re in the right place. You can add this as a shortcode using the product ID as an attribute for the correct product.

To do this, we need to add some code into our functions.php file. Once we have done this, we can add the shortcode anywhere you would like to display the price.

So lets begin, first we add the below code to our functions.php file:


/**
 * Shortcode WooCommerce Product Price.
 */

add_shortcode( 'silva_product_price', 'silva_woo_product_price_shortcode' );
function silva_woo_product_price_shortcode( $atts ) {
	
	$atts = shortcode_atts( array(
		'id' => null
	), $atts, 'silva_product_price' );
 
	if ( empty( $atts[ 'id' ] ) ) {
		return '';
	}
 
	$product = wc_get_product( $atts['id'] );
 
	if ( ! $product ) {
		return '';
	}
 
	return $product->get_price_html();
}

Once we have added this, we can then use the shortcode in the layout or template with the product ID number as an attribute as shown below:


    # Add inside WYSIWYG editor
    [silva_product_price id="<insert_product_id>"] // Replace this with the product ID

    # Add within a page template, this has to be performed within the loop to get the unique product ID
    echo do_shortcode('[silva_product_price id="'.get_the_ID().'"]');

 

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

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

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