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

How to Instantly Delete All Your WooCommerce Products With MySQL

They may come a time when you need to remove all the products from your WooCommerce store, in fact, we had to do just that recently! There isn’t an easy way to do this natively in WooCommerce and if you have a lot of products, removing them in steps can be very time-consuming. When deleting products, you need to ensure you’re deleting all the additional data related to the product such as the taxonomy, relationships and so on. Basically, anything that is connecting to the products.

So to remove all your products safely and cleanly, you will need access your phpMyAdmin so that you can run a script on your database.

1. Login to Your phpMyAdmin

Let’s login to phpMyAdmin, before proceeding, make sure you are going to run the script on the correct database. As always, take a backup prior to running the script. To ensure you have the correct database loaded; you can always look for the table wp_options and ensure it has the correct URL for your website.

2. Run the SQL Statement

Ready to remove all your products in an instance? Then now you can click on the SQL tab and you should end up on a page like this:

Now simply paste the following code into the MySQL query to delete all products. NOTE: Ensure you take a backup of the database before proceeding, just in case.


DELETE relations.*, taxes.*, terms.*
FROM wp_term_relationships AS relations
INNER JOIN wp_term_taxonomy AS taxes
ON relations.term_taxonomy_id=taxes.term_taxonomy_id
INNER JOIN wp_terms AS terms
ON taxes.term_id=terms.term_id
WHERE object_id IN (SELECT ID FROM wp_posts WHERE post_type='product');

DELETE FROM wp_postmeta WHERE post_id IN (SELECT ID FROM wp_posts WHERE post_type = 'product');
DELETE FROM wp_posts WHERE post_type = 'product';

Press the ‘Go’ button to execute the above SQL statement.

Another note, if your database prefix is not the default wp_, you will need to replace this with the database prefix you are using.

3. Ensure All Products are Removed

If it all worked out, if you navigate to the products page, you should now end up with an empty Products list. Awesome right?

If you are removing products because you ran an importer than didn’t quite work out, you will now find that you may have duplicate media products if you were to run a fresh import. To remove the duplicated images, have a look at this post and it will solve your issue: How to Clean up Your WordPress Media Library.

As always, we hope you found this tutorial useful if you’ve used it for a project or was not able to run it successfully, let us know in the comments 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