Web Development

Shopify: Crate a Simple Add To Cart Button and Redirect it Directly to the Checkout Page

My knowledge of Shopify is little, but did some little works in Shopify which were little and JQuery and CSS based Job. I am sharing you a piece of code which can help anyone using shopify to create a simple Add To Cart button and put it anywhere and make it redirect to checkout page. Here is the code:

<form  class="product-form" action="/cart/add" data-productid="PRODUCT ID"  method="post"> 
  <input type="hidden" name="id" data-productid="PRODUCT ID" class="product-select" value="VARIANT ID" data-variant-title="VARIANT TITLE" />
  <input type="submit" value="Add To Cart" class="btn btn btn-default" />
<input type="hidden" name="return_to" value="/checkout/" />
</form>
WordPress Tricks

Redirect Website to different pages based on Country

This code i used for one of my client and it works. Based on client’s requirement I redirect his site to different pages based on country ( Denmark, Netherlands, Poland, France and Germany. Here is the code:

<?php
$ip = $_SERVER['REMOTE_ADDR']; // This will contain the ip of the request

// You can use a more sophisticated method to retrieve the content of a webpage with php using a library or something
// We will retrieve quickly with the file_get_contents
$dataArray = json_decode(file_get_contents("http://www.geoplugin.net/json.gp?ip=".$ip));

//var_dump($dataArray);

// outputs something like (obviously with the data of your IP) :

// geoplugin_countryCode => "DE",
// geoplugin_countryName => "Germany"
// geoplugin_continentCode => "EU"

//echo "Hello visitor from: ".$dataArray->geoplugin_countryCode;
if($dataArray->geoplugin_countryCode=='DE'){
echo("<script>location.href = 'http://yoursiteurl.com/DE/';</script>");
 
}
else if($dataArray->geoplugin_countryCode=='NL'){
    echo("<script>location.href = 'http://yoursiteurl.com/NL/';</script>");
}
 else if($dataArray->geoplugin_countryCode=='FR'){
    echo("<script>location.href = 'http://yoursiteurl.com/FR/';</script>");
}
 else if($dataArray->geoplugin_countryCode=='PL'){
    echo("<script>location.href = 'http://yoursiteurl.com/PL/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='IT'){
    echo("<script>location.href = 'http://yoursiteurl.com/IT/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='DK'){
    echo("<script>location.href = 'http://yoursiteurl.com/DK/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='ES'){
    echo("<script>location.href = 'http://yoursiteurl.com/ES/';</script>");
} 
 else if($dataArray->geoplugin_countryCode=='PL'){
    echo("<script>location.href = 'http://yoursiteurl.com/PL/';</script>");
} 
?>
WordPress Tricks

Covid-19 Corona Virus warning message for your website — For wordpress, html and other platform

If you want to show Covid-19 Virus warning in your site, try to use this code. Put this in your header. It will be looked like the screenshot

<div id="icegram_messages_container" class="" style="background: black;text-align: center;color: white;padding: 12px;"><span class="left" style="font-weight: bold;">Important Patient Safety Information: Coronavirus (COVID-19)</span><span><a href="http://fiverr.brraprojects.com/" class="lmr" style="color: white; padding: 5px; background: white; color: black !important;margin-left: 12px;padding-right: 11px;font-weight: 400;border-radius: .25em;float: none;padding: .2em 1.3em;">Learn More</a> </span></div>
WordPress Tricks

Move woocommerce product thumbnail to other place in content section using shortocde

Generally Woocommerce product thumbnail images shows below the main image. But, if you want to show the woocommerce product thumbnail in any places (using shortcode) in the product content or details section then this post will help you. Here are the codes:

Code 1 : This will go in Appearance > Customize >Additional CSS

.bbloomer-thumbs .woocommerce-product-gallery__image {
    width: 32.5%;
    float: left;
    margin-right: 1%;
}
.bbloomer-thumbs {
    overflow: hidden;
    margin-top: 20px;
}
.bbloomer-thumbs * {
    border-radius: 0px !important;
    box-shadow: none;
}
.bbloomer-thumbs .woocommerce-product-gallery__image:nth-child(3n) {
    margin-right: 0px !important;
}

Code 2 :These piece of code will go in your theme’s function.php

remove_action( 'woocommerce_product_thumbnails', 'woocommerce_show_product_thumbnails', 20 );
add_shortcode('thumbg', 'opc');
function opc( $atts) {
 
  ob_start();
    $path = WooCommerce::plugin_path();
    include($path . '/templates/single-product/product-thumbnails.php');
	$output='<div class="bbloomer-thumbs">';
    $output .= ob_get_contents();
	$output .='</div>';
    ob_end_clean();
  return $output;
}

Now Put this shortcode [thumbg] where you want to show the woocommerce product thumbnail images.

WordPress Tricks

In First visit if any of your custom font not loading properly.

If you are using any custom font in your site and during your first visit that font not showing or working, then put this code in your .htaccess file. That will solve the font loading issue.

<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
WordPress Tricks

Twenty Twenty Theme: Modifications of Header, Titles, Links, Widget Section and More

Twenty Twenty  now arrived and become the new WordPress default theme. Mainly it is designed with the flexibility of the block editor at its core but you can use Visual Composer or Elementor too. You can use it for your organization or business and also for your traditional blog, the centered content column and considered typography makes it perfect for that as well. Here I am sharing some CSS Modifications which you can use

Download Twenty Twenty Child Theme

Download Twenty Twenty Parent Theme from wordpress.com

Continue reading “Twenty Twenty Theme: Modifications of Header, Titles, Links, Widget Section and More”

WordPress Tricks

Add additional tab in woocommerce single product page and show Advanced Custom field info as tab info

Here I am sharing you the code which will help to show an additional / extra tab in woocommerce single product page, and show Advanced Custom fields info in the description of that tab . Just change the field info and put it in your theme’s function.php and save it.

if(! function_exists('new_tab')){

add_filter('woocommerce_product_tabs','new_tab');

function new_tab($tabs){
$tabs['my_tab']=array(
"title"=> "Product Review",
 "priority"=> 35,
"callback" =>"tab_desc",
);
return $tabs;
}
function tab_desc(){
	global $product;
$id = $product->get_id();
echo  get_field('review',$id); ;
}


}

Feel free to do comments if you have any question.

WordPress Tricks

Show 4 Post, One in Left and 3 in right with featured image: In Elementor Builder

Mainly I created the shortcode to show 4 post as per the design above, One in left and Three in right based on the request of one of my client. He wanted to show 4 post in such manner in Elementor page builder plugins. You have to use [recent_posts] in Elementor shortcode module to show it.

The code is divided in 2 part. One for Functions.php and other for Style.css

Code for function.php

Continue reading “Show 4 Post, One in Left and 3 in right with featured image: In Elementor Builder”

WordPress Tricks

Map With Different location pins and mouse activity disabled

This is for advanced users, just shared the code. You can use it in your site by changing the Pin Location name and address. Applicable for wordpress, html and php based sites. Feel free to do comments if you have any question regarding this.

Continue reading “Map With Different location pins and mouse activity disabled”