Overriding Shortcodes

Updated on December 7, 2021

NOTE: If you already had a child theme and overrode some shortcodes before Jupiter 6.3 and Donut plugin, you need to rename your “components” folder in jupiter-child to “wpbakery” to make it work with Donut. 


Shortcodes make the main content on your Jupiter website. Every shortcode has its own functionality and styling, most of it is configurable in the shortcode settings. However, if you need more customization, one way is to override a shortcode in the child theme.

In this article, we’ll explain about overriding shortcodes in the child theme.


Shortcodes Directory (< Jupiter 6.3)

In the Jupiter theme there is a Shortcodes directory which is located in wp-content > themes > jupiter > components > shortcodes in your web host.

The shortcodes directory contains all of the shortcode files, each responsible for a specific shortcode. The names are intuitive and you will be able to identify which file is for which shortcode, simply by checking the name of the file.

Shortcodes Directory (> Jupiter 6.3 and Donut Plugin)

In the Donut Plugin there is a Shortcodes directory which is located in wp-content > plugins > donut > includes > wpbakery > shortcodes in your web host. 

The shortcodes directory contains all of the shortcode files, each responsible for a specific shortcode. The names are intuitive and you will be able to identify which file is for which shortcode, simply by checking the name of the file.


Overriding Shortcodes Directory

In the WordPress world, the term “override” means to copy a file from the parent theme and paste it to a child theme with the same directory hierarchy, then edit the copied file. WordPress loads the edited file automatically.

Below, as an example we will override the contact form shortcode to change the icons displayed on the front-end of your contact form:

1Find components > shortcodes  > mk_contact_form  directory in your theme and copy this folder to your child theme’s wpbakery > shortcodes  > mk_contact_form. Then locate the wpbakery > shortcodes  > mk_contact_form   > components  
  • Parent theme: wp-content > themes > jupiter > components > shortcodes > mk_contact_form > components
  • Child theme: wp-content > themes > jupiter-child > wpbakery > shortcodes > mk_contact_form > components
2On the child theme, find the email-field.php in the components folder
3Open the file in your favorite code editor. Locate the below line of the code around the 12. line.
overriding shortcodes
4Change the “mk-li-mail” to another icon class name to change the icon. To find all icon class names, from WordPress left menu, go to Jupiter > Control Panel > Icon Library. In this example, we’ll choose mk-li-pencil.
overriding shortcodes
5Change the icon class name in the above codes. Your code should look like below.
overriding shortcodes
6Save the changes. If you are editing the file locally, make sure to upload it to your server.
7Clear the theme cache and check your site to see the applied changes.

Overriding the shortcodes in Donut Plugin

Note: If you use Jupiter v6.3 or higher along with the Donut plugin, instead of “components” folder in the child theme, you would need to have a “wpbakery” folder. The rest of the above steps are still valid. So, if you want to override

wp-content/plugins/donut/includes/wpbakery/shortcodes/mk_blog/ 

in a child theme, you would need to copy the above folder to

wp-content/themes/jupiter-child/wpbakery/shortcodes/mk_blog/

Override WooCommerce templates

If you are not using the Shop Customizer, you can easily copy the WooCommerce templates into your child theme’s “woocommerce” folder and start overriding them.

wp-content/themes/jupiter-child/woocommerce/

However, as soon as you enable the Shop Customizer in the Jupiter -> Theme Options -> Shop, the woocommerce override directory will change to:

wp-content/themes/jupiter-child/framework/admin/customizer/woocommerce/

So, you would need to place your overrides in the above directory and if not exist, create the directory first.

Did this answer your question?