If you want your website to stand out, you should know how to customize WordPress theme header for your website. Each WordPress theme has its own features for header customization.

In Blocksy and Woodmart theme, you have several elements for the header. One of the most important ones is HTML section, where you can add a wishlist counter to the header.  

To use the wishlist counter and place it in the header, you must install MC wishlist plugin. So first download the MC Wishlist plugin from the WordPress dashboard and activate it. Then navigate to the part related to the theme you are using.

How to customize WordPress theme header for Blocksy? #

There are various elements in the Blocksy theme header customization section.

• Account: Creates quick access to the account for your users.
• Button: Creates a button in the desired shape with the desired style with any link.
• Cart: Creates a mini card for users in the header.
• Contacts: Puts communication methods such as contact numbers, addresses, etc. in the header.
• Divider: Separates the header elements using a vertical line and organize the header
• HTML: Puts an HTML code in the header.
• Logo: Places the logo in the header.
• Menu 1: A special menu for the Main bar that contains sections such as home, products, communication with us, etc.
• Menu 2 and 3: Same as menu 1, except that it has some additional options. You can apply the menu settings to these menus.
• Search: A search tool for your site that adds a search icon to your header, and you can choose what range to search.
• Search box: Same as the search element, except that it has a box for writing text.
• Socials: Adds social media icons and links
• Trigger: Helps you integrate mobile and desktop menus.
• Widget Area: Allows you to place any widget you want in your header.

Add wishlist counter to Blocksy theme header #

1. In the WordPress panel, enter the Themes tab. Click on the theme customization option and select the Header section.
2. The HTML element is one of the most widely used elements by which you can use the features of the MC wishlist wherever you need with the help of wishlist shortcodes.
   
   
3. Click on the HTML element that you dropped on the page to enter the general settings for this element.

General settings includes the following 4 sections:

• Input Box: In this section, you can put the short code related to the counter wish list.
• Stretch container: This option allows you to expand the space that the HTML element takes inside the header row.
• Content Alignment: This option allows you to align the content horizontally.
• User visibility: This option allows you to hide content based on user status.

Design settings include 3 parts:

• Font: To set the font type, font size and font weight
• Font color: To set the color of the text and icon.
• Margin: To adjust the distance of the element from the surrounding.

Customize wishlist counter on Blocksy wordpress theme header #

To personalize the wishlist counter using blocksy theme wordpress shortcodes, go to the general settings tab and the Input Box section.

In this section, you can set the wishlist counter settings with the help of shortcodes that we will review. Make sure that the new blocksy shortcode must be placed instead of the previous shortcode Here is the full guide on how to use MC wishlist shortcodes. 

How to customize WordPress theme header for Woodmart? #

With the help of Header builder of Woodmart theme, you can easily customize your header and set responsive modes for your header. To set the header, follow the path:

Dashboard > Woodmart > Header builder

and in the window that opens, you can create a header Select to edit or create a header. In the Header builder section of the Woodmart theme, there are various elements.

• Logo: To place the logo in the header
• Main menu: A special menu for the Main bar that contains sections such as home, products, communication with us, etc.
• Menu: It is the same as the main menu, with the difference that you can choose which section the content of this menu includes.
• Mobile menu: With the help of this element, you can place a menu for mobile mode.
• Cart: This element creates a mini cart for users in the header.
• Wishlist: This element creates quick access to the wishlist page for the theme.
• Compare: This element provides quick access to the product comparison page.
• Search: A search tool for your site that adds a search icon to your header, and you can select what range to search.
• Account: With the help of this element, create quick access to the account for your users.
• Categories: With the help of this element, you can add a dropdown containing a specific category to the header.
• Divider: To separate the header elements using a vertical line and organize the header
• Space: To create a horizontal distance between two elements
• Text/HTML: With this element, you can put an HTML code or a text in the header.
• HTML Block: To create an HTML block using the WPBakery page builder plugin
• Button: Allows you to create a button in the desired shape with the desired style with any link.
• Information box: an information box where you can put text, icons, buttons, etc.
• Social buttons: to add social media icons and links

Add wishlist counter to Woodmart theme header #

To use the wishlist counter, you can use the HTML block element and put the shortcode of the counter [wlfmc_wishlist_counter] into this element.

1. Go to Dashboard > Woodmart >Header builder and select the header you are using to edit.
2. Add an HTML Block element to the header by clicking on “+”. 
3. Hover over the element you’ve added and click “Edit”.
4. In the window that opens, click on “Create new HTML Block” to enter the WPBakery page builder.
   
   
5. Choose a name for HTML block.
6. Put the counter shortcode in the Input text section and publish the block.
   
7. Go back to the Header Builder page and select the block you’ve created from the HTML block settings section.
   
8. Save the changes from the bottom of the page to see your counter in the header.

Add shortcode to WordPress wishlist counter on Woodmart theme header #

To personalize the counter using woodmart wishlist shortcode, go to the general settings tab and the Input Box section.

In this section, you can set the wishlist counter settings with the help of shortcodes that we will review. Make sure that the new shortcode must be placed instead of the previous shortcode. Here is the full guide on how to use MC wishlist shortcodes.

Also you can check-out our guide on How to add Shortcode to WordPress Page Builder.

Summary #

Add shortcode to WordPress for wishlist counter to your store website is not only a very simple task, but also a necessary one. To add a wishlist counter in the header section, just enter the header settings in the relevant theme and then create an HTML element, then put the MC wishlist shortcode in the content of the HTML element.

It is better to pay attention to points such as color, font, icon, button location, etc. after adding the counter in its appearance. You can customize all of these characteristics using shortcodes mentioned in the guide. Both Blocksy wordpress theme and Woodmart theme use the same process for adding and editing different wishlist elements, using shortcodes.

I hope this guide helped you to successfully customize your website header. If you have any issue with the wishlist, tell us here.