When it comes to eCommerce, one of the most important factors is shipping. Customers want to know how much it will cost to have their purchase delivered, and they also want to know how long it will take.
If you’re using WooCommerce to sell products online, you can offer free shipping in a number of ways. In this article, we’ll show you how to make one product free shipping in WooCommerce.
There are a few different methods you can use to make one product free shipping in WooCommerce. The first is by using a plugin.
There are a few different plugins that offer this functionality, but we recommend using the WooCommerce Free Shipping plugin. Once you’ve installed and activated the plugin, go to WooCommerce > Settings > Shipping and select the Free Shipping method.
On the next screen, you’ll need to configure the plugin settings. First, you’ll need to enter a method title and description.
This is what will be displayed to customers on the checkout page. Next, you’ll need to choose which countries you want to offer free shipping to. You can also exclude certain states or zip codes if you need to.
First, WooCommerce offers two different types of free shipping: flat rate and per-item. Flat rate free shipping means that all products in your store will be shipped for free, regardless of how many items the customer orders. Per-item free shipping means that each individual item in the order will be shipped for free.
Second, when you offer free shipping, you need to make sure that your shipping costs are covered. Otherwise, you will end up losing money on each sale. To do this, you can either increase the price of your products or add a surcharge to orders that qualify for free shipping.
Third, keep in mind that customers may be more likely to abandon their carts if they see that they will have to pay for shipping. To avoid this, make sure that your free shipping offer is prominently displayed on your website and in your checkout process.
Finally, remember that free shipping
Once you’ve configured the plugin settings, go to WooCommerce > Products. Select the product that you want to offer free shipping for and scroll down to the Shipping section.
Tick the box next to “Free shipping”. Save your changes and that’s it!
If you don’t want to use a plugin, you can also add code snippets to your functions.php file. First, you’ll need to add this code snippet:
add_action( 'woocommerce_package_rates', 'wf_free_shipping_on_one_product', 10, 2 );
function wf_free_shipping_on_one_product( $rates, $package ) {
$has_free = false;
// loop through all products in the cart
foreach( WC()->cart->get_cart() as $item ) {
// check if we have found a product with "Free Shipping"
if( $item['data']->needs_shipping() && $item['data']->get_shipping_class() == 'free-shipping' ) {
// set our flag so we don't unset any other rates later on
$has_free = true;
}
}
// unset all rates except for "Free Shipping" if we found at least one free product in our cart
if( $has_free ) {
foreach( $rates as $rate_key => $rate ) {
if( 'free-shipping' != $rate->method_id ) {
unset( $rates[$rate_key] );
}
}
} else { // no free products found so remove "Free Shipping" rate from available rates (if it exists)
unset( $rates['free-shipping'] );
}
return $rates;
}
add_action( 'wp_footer', 'wfspopup' );
function wfspopup() {
echo '<div id="popup1" class="overlay"> <div class="popup"> <h2>"Get Free Shipping on your order of 1 item!"</h2><a class="close" href="#">×</a><div class="content">Continue Shopping!</div></div></div>';
echo '<style>.overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 99999999999999 !important;} .overlay:Target { visibility: visible; opacity: 1;} .popup{ margin: 70px auto;} .popup h2{ margin-top: 0; color:#333;} .popup .close{ position: absolute; top:-30px ; right:-30px ; font-size: 50px ; line-height : 50px ; text-decoration : none ; padding : 0px 30px ; font-weight : bolder;} .content{ text-align : center;} @media only screen and (max-width :480px){ .box{ width : 80% ;}} </style>';
echo '<script type="text/javascript">window.onload=function(){document.getElementById("popup1").style.display="block";}</script>';
echo '<a href="#popup1"></a>';
}