FWW Shortcode for filters

You may be using a theme builder that lets you customise your WooCommerce templates, like Elementor, Beaver Builder/Beaver Themer, WP Bakery, Divi or Oxygen. If this is the case, it’s possible there will be areas where they don’t allow you to add widgets or perhaps where they don’t let you edit the widgets.

For example, with Oxygen, you can add widgets but if those widgets use JavaScript in the admin area then you cannot customise them. Some of our widgets use JavaScript, e.g. our colour filters that let you pick colour swatches using JavaScript.

To get around this, you can add widgets to our FWW Shortcode area. This widget area will not display anywhere specific on your shop page, but the widgets that you put inside the FWW Shortcode widget will appear wherever you put our [fww_sidebar] shortcode. This sidesteps any JavaScript issues that any third-party theme editors or theme-builders may have by allowing you to order and customise your widgets in the traditional way while still being able to use all the functionality you desire from your theme builder.

Adding widgets to the FWW Shortcode area

To get started, go to your Dashboard > Appearance > Widgets and on the right, you will see the FWW Shortcode widget area. Add the widgets you want to display into this widget area.

                     blank

Adding FWW widgets to Oxygen using their Widget Area Widget

Once you have added and configured all your widgets under the FWW Shortcode area, visit your Oxygen template editor, click your sidebar, then click the blue +Add button and search for ‘shortcode’. With Oxygen, you can actually add the widget area rather than the shortcode which will be very slightly less overhead.

blank

Adding FWW Widgets to other template editors

For other template editors, click in your sidebar area and either add a shortcode widget, or add a text box. Normally, text boxes will interpret shortcodes and generate the sidebar widgets.

The shortcode you need to add in order to see all the widgets you added to the FWW Shortcode widget area is:

[fww_sidebar]

This approach works with all of the following theme builders:

  • Elementor
  • Beaver Builder and Beaver Themer
  • Divi
  • WP Bakery (formerly Visual Composer)
  • Themify
  • Oxygen

 

 

 

 

 

 

Did this article answer your question?

Leave a Reply

Your email address will not be published. Required fields are marked *


We use cookies

We use cookies for various things on our site, including our on-site chat bubble (if you use it), our comment forms (if you use them) and for session handling (if you log in).

Other than that, we use cookies to identify where traffic came from to help us understand which traffic turns into sales, we use a cookie for Google Analytics traffic analysis and we use a cookie to customise adverts for our own products we think you'll be interested in.

You can read more detail in our privacy policy page. Please click 'Accept' or 'Decline' to continue.