Woocommerce hide related products

Woocommerce hide related products and solution to this problem

“ Woocommerce hide related products ” is an issue for which lots of people searched. Hiding the whole products on your store is a piece of cake. However, in this article, I will help you understand more about related products, thus you can decide on hiding or focusing on them to improve your revenues.

Woocommerce hide related products

Related products are a list of items that have similar or same price, vendor, category, etc. Or they may have no relevant relation but you want to showcase them together. Showing related products along with the currently viewed item is pretty beneficial. It will persuade your customers to purchase more. Normally, on the product detail page, there exist a main product, “add to cart” button, product description, and a list of related products.

If you want to Woocommerce hide related products, there are two recommended ways as follows:

First method: Apply CSS

This tactic is quite simple as you can use attribute display none. It can be done by all of you. Please follow these steps:

Step 1: Go to a page including related products > right click and select Inspect

Step 2: Select a class wrapping these products, copy the following class related-products-wrapper product-section

.related.related-Products-Wrapper.product-part  {

display :  none  !important;

}

You can absolutely ignore the above steps, copy the code snippet above and add to the end of the CSS file of the theme, and save. In order to make the changes, you can use the edit feature of the theme (however, this feature is unavailable in WordPress version 5.x.x and later ones) or apply FTP software such as phpdegnide, notepad ++ or use file edit feature of hosting.

Second method: Apply PHP code

This method is just suitable for people who are skillful in WordPress, Woocommerce. You should create a backup file so you can revert back if there is any problem with the changes. Now, open file function.php and add the code below to the end of the file.

remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_related_products’, 20 );

Next, please reload the web page and check if it is updated. After that, please check all the functions to make sure there is no effect on your current functions. If yes, please remove the added code and find where the cause is. In case you cannot figure it out yourself, just find a developer for support.

I hope that the article about “  Woocommerce hide related products ” can help you. However, it had better if relevant products are recommended. They will help increase the conversion rate and improve your revenues as well. If you are working with Shopify platform, I would like to recommend this app Related Products  It allows you to configure different relevant conditions such as Same vendor, Same collection, or Manual Recommendation for each products. Please refer to this link for more information.

how to add a drop down menu in Shopify?

Drop down menu is one type of menu including a parent menu and submenus. When you hover or click on the parent menu, a list of submenus belonging to parent menu will show up. Drop down menu makes your websites more tidy, attractive and professional. Drop down menus on Shopify are different from other source codes. So, how to add a drop down menu in Shopify? This article will help you answer this question.

The first step is that you log in the back office of Shopify. The link for you to login is http://yourdomain/admin . Use your account to log in the website. Please make sure that your account has right to create and edit menus. To check this right, you click on Online Store, and click on Navigation. If you can add menu, you are allowed to continue. If not, you should use another account or request for your account to be given extra rights.

how to add a drop down menu in Shopify

Add a parent menu

You can edit a menu in the list of existing menus by adding a drop down menu. Or you can create a new menu.

Title: You input the name of the menu

Add menu item: Here you add menu items. For example, in this article, items are Home, Shop, Sale, Collection, Blog, Pages

how to add a drop down menu in Shopify

After adding menu item, we have a menu as below

how to add a drop down menu in Shopify

Add submenus

You may ask why the question how to add a drop down menu in shopify is related to submenus. If you do not know the answer, I will explain to you. Drop down menu includes a parent menu and submenus. Usually, on the screen, parent menu displays and submenus hides. When you hover mouse cursor to the parent menu, a list of submenus will display.

how to add a drop down menu in Shopify

One special thing of Shopify is that the name of submenu should be set as the same as that of the menu item. In the following example, we create submenus for home item. We will set the name as “home”. We add custom items with names home page 1, home page 2, home page 3, etc. for example.

how to add a drop down menu in Shopify

We have run through the article how to add a drop down menu in shopify. If you have the same question such as how to make a drop down menu in shopify , or how to create a drop down menu in shopify, I believe you have your own answer. It is too easy to create a drop down menu on Shopify. I believe that you can do that.

If you want to create a drop down menu with unlimited submenus, I suggest that you should mega menu app. It supports to add not only unlimited submenus but also contact form, html, image, and best-selling products, which makes your website more lively, increasing customers’ experiences and your revenues.

If you are good at html, css code, please read this article which will help you to create a menu with code

 

How to create shopify mega menu code

shopify mega menu code is a combination of html, css, js source codethat you can add to your website. You can use this free mega menu code to add to your project. This article will guide you on how to create and insert mega menu code in your website.

In this example, I will create a simple mega menu including a drop down menu, and images. Based on this example, you can customize it so that it can be suitable for your store and your hobby as well.

Create mega menu code

To facilitate the process of editing code, you could use software such as như note notepad++, phpdesigner, etc. Or you can open directly the Shopify’s file in the back end of Shopify.

In this example, we use phpdesigner to edit code. We will add shopify mega menu code to the website if everything is okay after testing.

Create index.html file with the following content

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Mega Menu</h2>
</div>
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</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>

Create style-megamenu.css file with the following content

* Navbar container */
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial;
}
/* Links inside the navbar */
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* The dropdown container */
.dropdown {
float: left;
overflow: hidden;
}
/* Dropdown button */
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit; /* Important for vertical align on mobile phones */
margin: 0; /* Important for vertical align on mobile phones */
}
/* Add a red background color to navbar links on hover */
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
/* Dropdown content (hidden by default) */
.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;
}
/* Mega Menu header, if needed */
.dropdown-content .header {
background: red;
padding: 16px;
color: white;
}
/* Show the dropdown menu on hover */
.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;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}

We will test the menu by opening index.html file on the browser. If there is any problem that needs to be edited, you edit it the file you have created.

Add code to Shopify

To keep your website safe, you duplicate the theme, and try this mega menu on the duplicated theme.

shopify mage menu code

We can use Preview status of Shopify by clicking on Action button. In the list of drop down menu, you click on preview as below. In this status, only you can see the changes on the website when you add mega menu code. This will be safe because your customers are not affected. And if there is something wrong with the interface, nobody knows this.

shopify mage menu code

Next, we will edit code

shopify mage menu code

Depending on the place you want the menu to be displayed, you select a proper file to edit. In this example, I use the default Debut theme. I will add Shopify mega menu code to the existing main menu of the theme.

Add html code to theme

In the Debut theme, the following code helps display the menu {% include ‘site-nav’ %}

Now, you open header.liquid file, search for code {% include ‘site-nav’ %} in line 177 of the original theme. We will edit this code as {% include ‘mega-menu’ %}

shopify mage menu code

Next, in Snippets, you click on Add a new snippet, enter texts “mega-menu”, and click on Create snippet

shopify mage menu code

In mega-menu.liquid file, you add all the html contents in index.html file we have prepared in the first step and save them.

shopify mage menu code

Add css to theme

Add these codes {{ ‘mega-menu.css’ | asset_url | stylesheet_tag }} to theme.liquid file

shopify mage menu code

In Assets, click on Add a new asset. A popup shows up, you click on Create a blank file. Enter the name of “mega-menu” file, choose format as “.css”, click on Add asset bordered in red.

shopify mage menu code

Next, enter the content of style.css file to mega-menu.css file just created, then save this.

shopify mage menu code

 

Now, you enjoy the result in the front end.

We have just created shopify mega menu code and add it to the website. This way in not time-consuming, you just need to copy and use the codes. But it is extremely difficult for people who do not know about codes. If you do not know about codes, I suggest that you should use mega menu app. When you use this app, you just need to drag and drop to create a menu. There are many menu types so that you can show your creativity. You can refer to this link https://apps.shopify.com/globo-mega-menu to try using the demo. Of course, your menu will be much more attractive. I really recommend you to use this app.