How to add custom cart icons / shortcodes to menus

If you'd like to integrate custom cart icons and functionality into Divi's Theme Builder Templates you have two options available to you:

  1. If the plugin has a shortcode option then you may insert the shortcode as a Custom Link in Wordpress' default Menu edit screen.  
  2. You could use a custom Code Module and paste the shortcode into the custom code module of your Theme Builder template.

Both options require the following plugin to work:

  1. You'll first need to install the following plugin to enable shortcodes in menus: https://wordpress.org/plugins/shortcode-in-menus/
  2. Activating the plugin is sufficient to enable shortcodes but you may review the installation instructions here: https://wordpress.org/plugins/shortcode-in-menus/#installation

Option 1. Using shortcodes within the default Wordpress Menu

Provide your plugin has a shortcode option you can use that shortcode as Custom Link within Wordpress' default Menu edit screen via  Appearance → Menus.

It is important to note that using this method will position the cart icon within your menu, not seperate from it. If you want the cart icon to be positioned "outside" or "next to" your menu then using the custom code module is the better option described further down below.

  1. You can now go to your  Appearance → Menus and insert a Custom Link into your menu using # as the input value of the URL field and the shortcode name in the Link Text input field as per the screenshot below:
    2. Be sure to replace the actual name of the shortcode to whatever your shortcode name requires. In the example above I've just used the [woocommerce_cart] shortcode as an example.
    3. Click "Add to Menu" and the custom link will then be added to your menu of choice:

You can now save your Menu and refresh your page to review the changes on the front-end. 

You may need to make CSS changes to any default styles the plugin provides. 

You can do this via adding any custom css into  Divi → Theme Options and then scroll down for the Custom CSS input.  

Option 2. Using Code Modules for the cart shortcode within your Theme Builder Template

If you want the cart icon to be positioned "outside" or "next to" your menu then using a custom code module is the best option. 

Simply Add a Code Module within your desired row and then paste the shortcode within the text field as per the demo screenshot:

You may need to make CSS changes to any default styles the plugin provides. 

You can do this via adding any custom css into  Divi → Theme Options and then scroll down for the Custom CSS input.  

DiviWP's Header Sections provide you with a templated starting point for beautiful, responsive and light-weight header designs. 

While we will endeavour to help you achieve your specific implementation, we cannot guarantee to help you modify or customize your layout, section or template further than its advertised features. Please review our Support Policy for more information.