Contact Form 7 Issues Tricks and Solution

Contact Form 7 Hidden Field to get the Page or Post URL where the form is used

allaboutbasic

Sometimes you may need to use Hidden Field in Contact Form 7 to get the URL of the Post or page where the form is used.

I have used [hidden url] as field field (screenshot below), to get the URL of the page I used the form.

At last, use this JQuery code to get the URL value Automatically 

<script>

jQuery(document).ready(function(){
var url      = window.location.href;  
console.log("url"+url);		 
jQuery('input.wpcf7-form-control.wpcf7-hidden').attr("value",url) ; 	
 }); 	
</script>
WordPress Tricks

Theme Monet By Pro Theme Design: Customization of Header, footer, fonts , color and More

allaboutbasic

If you are a Creative Photographer then wordpress theme Monet is for you. Monet is a delicate responsive grid-layout theme targeted at photographers and other creatives. Here I am sharing you some css tricks using which you can modify the header color, fonts, font family and more. If you have any Question feel free to ask in comment section.

To change font size, color and font family of Header title in homepage

.main .post-archive article h2.entry-title {
    font-size: 26px !IMPORTANT;
    color: white !IMPORTANT;
    font-family: cursive !important;
}

Continue reading “Theme Monet By Pro Theme Design: Customization of Header, footer, fonts , color and More” →

Web Development

Custom Homepage HTML code section for Shopify

allaboutbasic

Sometimes you may need to put some html code in the Homepage of your shopify site. Here I am sharing you the steps and code to create custom html section.

Create home-custom-html.liquid file under section ( screenshot attached )

Paste this code in the newly created home-custom-html.liquid 

<div id="section-cta">
  <div class="container">
    {{ section.settings.text }}  
    
  </div>
</div>
{% schema %}
{
  "name": "HomePage Custom HTML",
  "settings": [
    {
      "id": "text",
        "type": "html",
        "label": "Add custom html below",
        "default": "<p>Add your text here</p>"
    } 
  ],
  "presets": [
    {
      "name": "HomePage Custom HTML",
      "category": "Custom HTML"
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}
WordPress Tricks

FAQ accordion without plugins: using html, css and JQuery

allaboutbasic

If you want to create a FAQ (Frequently Asked Question) page and want to show the Question & Answers in Accordion ( click and open), then you can use this code. Though there are plugins for that, but here I am sharing you the basic FAQ accordion html css and JQuery code so that you can use it without the use of plugins. Feel Free to message me in Skype if you need help.

JQuery Part

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script>

	jQuery(document).ready(function(){
		 
jQuery('.faq-accordion .faq-content-container').hide();
jQuery('.faq-accordion > div:eq(0) .faq-accordion-title').addClass('active').next().slideDown();
jQuery('.faq-accordion .faq-accordion-title').click(function(j) {
    var dropDown2 = jQuery(this).closest('div').find('.faq-content-container');
    jQuery(this).closest('.faq-accordion').find('.faq-content-container').not(dropDown2).slideUp();
    if (jQuery(this).hasClass('active')) {
        jQuery(this).removeClass('active');
    } else {
        jQuery(this).closest('.faq-accordion').find('.faq-accordion-title').removeClass('active');
        jQuery(this).addClass('active');
    }
    dropDown2.stop(false, true).slideToggle();
    j.preventDefault();
});			
	
 }); 		
</script>

CSS Part

<style>
.faq-accordion{background:rgba(21,20,21,.8);border-bottom:none}
.faq-accordion p{color:white;}
.main-faq-accordion{position:relative;padding:140px 0;background:linear-gradient(to right,#17161a,#242124 50%,#17161a)}
.faq-accordion-box .faq-accordion-title{padding:12px 50px 11px 40px;border-top:1px solid rgba(255,255,255,.05);color:#fff;font-weight:500;font-size:13px;letter-spacing:.06em;text-transform:uppercase;position:relative;cursor:pointer;margin:0;box-sizing:border-box;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);transform:translateZ(0);-webkit-transition:color .2s ease-out,background-color .2s ease-out;-moz-transition:color .2s ease-out,background-color .2s ease-out;transition:color .2s ease-out,background-color .2s ease-out}
.faq-accordion-title .faq-accordion-mark{position:absolute;top:50%;right:40px;transform:translate(0,-50%);color:#fff;font-size:18px;transition:.3s}
.faq-accordion-title:hover .faq-accordion-mark,.faq-accordion-title.active .faq-accordion-mark{transform:translate(0,-50%) rotate(45deg)}
.faq-accordion .faq-accordion-box:first-child .faq-accordion-title{border-top:none}
.faq-accordion .faq-content-container{border-top:1px solid transparent;padding:30px 40px 48px 41px}
.faq-accordion .faq-content-container p{font-size:15px;margin-bottom:0}
.faq-accordion-title.active~.faq-content-container{border-color:#ff0e1f}
</style>

HTML Part

<div class="faq-accordion">
    <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 1</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>1st Question Answer  </p>
        </div>
    </div>
	
 
	     <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 2</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>2nd Question Answer</p>
        </div>
    </div>
	 
	     <div class="faq-accordion-box">
        <p class="faq-accordion-title"> <span class="faq-accordion-tab-title">FAQ Question 3</span> <span class="faq-accordion-mark"><i class="fa fa-plus" aria-hidden="true"></i></span></p>
        <div class="faq-content-container" style="display: none;">
 			<p>3rd Question Answer</p>
        </div>
    </div>
	   
	 
	 
</div>
Web Development

Exclude or Remove specific product to appear in search result : Shopify

allaboutbasic

Sometimes you may need to exclude specific product to appear in search result. Here I am sharing you a tricks which i got in shopify community.

So the tricks is, put a tag , for example “Special” tag in the product and that tagged product will be removed from search result. Here i am sharing the code

{% for item in search.results %}

    {% assign hidden_tag = false %}
    
    {% for tag in item.tags %}
        {% if tag == 'special' %}
            {% assign hidden_tag = true %}
        {% endif %}
    {% endfor %}

    {% if hidden_tag == true %}
        {% comment %}
            If it contains the tag, do this
        {% endcomment %}
                 
    {% else %}
        {% comment %}
            If it doesn't contain the tag, do this
        {% endcomment %}
        
{% endfor %}
Web Development

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

allaboutbasic

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

allaboutbasic

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

allaboutbasic

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

allaboutbasic

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.