Search NITYAM TECH Blog

Thursday, November 18, 2021

Thank you Page || Woocommerce || Wordpress || Ecommerce

Create a impressive Thank you page using page builder 

Creat Page
Go to the create page and click add new 
Type page title and a heading which is showing order received page
Page Title will be your slug/permalink  so name it like
Order Completed, Order Received, Thank you for order

You can add image, video and gif below the title 

Now click publish 
Here I created a page called order completed 

Next step is install the Plugin which is friendly with woocommerce 

Go to Plugins and click add new type thank you page in search box
Click install and Activate the Plugin

Go to the plugin settings click the checkbox to Enable custom thank you page 

And select the thank you page, from select general page options, in my case I created a order completed page so I select this page 

After that Click save then click save changes 

Watch the HD Video of 



All Required steps Done
Click the video link go to the  YouTube channel called NITYAM TECH where you can learn with easy steps 

Search on YouTube nityamtech 

Thank you hope this article helpful to you

Please ask any questions 
Glad to solve as fast as 




PRAVAT NAYAK at No comments:

Thursday, November 4, 2021

Mega Menu

Home News

Mega Menu

Category 1

Link 1 Link 2 Link 3 Link 4 Link 5

Category 2

Link 1 Link 2 Link 3 Link 4 Link 5

Category 3

Link 1 Link 2 Link 3 Link 4 Link 5


<!DOCTYPE html>

<html>

<head> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>

* {

  box-sizing: border-box;

}


body {

  margin: 0;

}


.navbar {

  overflow: hidden;

  background-color: #333;

  font-family: Arial, Helvetica, sans-serif;

}


.navbar a {

  float: left;

  font-size: 16px;

  color: white;

  text-align: center;

  padding: 14px 16px;

  text-decoration: none;

}


.dropdown {

  float: left;

  overflow: hidden;

}


.dropdown .dropbtn {

  font-size: 16px;  

  border: none;

  outline: none;

  color: white;

  padding: 14px 16px;

  background-color: inherit;

  font: inherit;

  margin: 0;

}


.navbar a:hover, .dropdown:hover .dropbtn {

  background-color: red;

}


.dropdown-content {

  display: none;

  position: absolute;

  background-color: #f9f9f9;

  width: 100%;

  left: 0;

  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

  z-index: 1;

}


.dropdown-content .header {

  background: red;

  padding: 16px;

  color: white;

}


.dropdown:hover .dropdown-content {

  display: block;

}


/* Create three equal columns that floats next to each other */

.column {

  float: left;

  width: 33.33%;

  padding: 10px;

  background-color: #ccc;

  height: 250px;

}


.column a {

  float: none;

  color: black;

  padding: 16px;

  text-decoration: none;

  display: block;

  text-align: left;

}


.column a:hover {

  background-color: #ddd;

}


/* Clear floats after the columns */

.row:after {

  content: "";

  display: table;

  clear: both;

}


/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {

  .column {

    width: 100%;

    height: auto;

  }

}

</style>

</head>

<body>


<div class="navbar">

  <a href="#home">Home</a>

  <a href="#news">News</a>

  <div class="dropdown">

    <button class="dropbtn">Select 

      <i class="fa fa-caret-down"></i>

    </button>

    <div class="dropdown-content">

      <div class="header">

        <h2>choose here</h2>

      </div>   

      <div class="row">

        <div class="column">

          <h3>Odisha</h3>

          <a href="#">Cuttack</a>

          <a href="#">Angul</a>

          <a href="#">Khordha</a>

        </div>

        <div class="column">

          <h3>Category 2</h3>

          <a href="#">Link 1</a>

          <a href="#">Link 2</a>

          <a href="#">Link 3</a>

        </div>

        <div class="column">

          <h3>Category 3</h3>

          <a href="#">Link 1</a>

          <a href="#">Link 2</a>

          <a href="#">Link 3</a>

        </div>

      </div>

    </div>

  </div> 

</div>


<div style="padding:16px">

  

</div>


</body>

</html>

PRAVAT NAYAK at No comments:

Multi-Level Dropdowns





 



<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
body {
  background-color: lightblue;
}

</style>
</head>
<body>
<br>
<div class="container">
                                         
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Nityam Tech Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>

</body>
</html>



Note that we have added jQuery to open the multi-level dropdown on click (see script section below).



PRAVAT NAYAK at No comments:
Subscribe to: Posts (Atom)

Featured Post

npx expo install @react-native-async-storage/async-storage

Understanding and Using AsyncStorage in React Native with Expo Introduction In the world of React Native, data persistence is a fundamental ...