How to Add a Currency Selector in the FSE theme?

If you are using the WP Travel plugin and the FSE theme, you might be unable to display the currency selector in the menu.

So, now with the release of WP Travel v8.1.0 and WP Travel Pro v7.1.0, we have come up with the shortcode for displaying the multiple currency selector drop-down.

Firstly, you have to enable the  Currency Exchange Rate module by going to Admin Panel > WP Travel > Settings > Modules Settings > Pro Modules.

 Then you need to go to WP Travel > Settings > Misc Options > Fixer API and enter the API access key.

For detailed assistance regarding how to get the API Layer Fixer API Access Key, please once refer given link.

After that, please make sure that you have enabled  Multiple Currency by going to Admin Panel > WP Travel > Settings > Advanced > Modules Settings > Pro Modules as shown in the screenshot below:

For more details regarding the multiple currency, please refer to the official documentation.

As an example, we will be adding the multiple currency selector dropdown in the menu of the WP Travel FSE theme.

You might be interested: How to edit a single trip template in the FSE theme?

Steps to Add a Currency Selector in the FSE theme

Step 1: Head over to Admin Panel, Appearance and Editor

Note: FSE theme should be activated to use the Editor.

We need to head over to the Admin Panel>>Appearance>>Editor .

Step 2: Proceed to Patterns and Header

We need to proceed to Patterns and Headers as shown in the screenshot below.

Step 3: Edit the Header

Then, you can edit the Header as per your requirements.

Step 4: Redirect to Editor to add more options

We will be redirected to the Editor where you can add more new options to the menu precisely as shown above in the screenshots.

Step 5: Search for Shortcode Block

Then, you need to click the plus ( + ) icon and search for the shortcode block as shown in the screenshot

Step 6: Add Shortcode in Shortcode Block

After clicking the Shortcode Block, you need to add this specific Shortcode in the. The Shortcode Block shown above

 [Multiple_Currency_Selector] 

Step 7: Save the Header Template

When the Shortcode is added to the Shortcode Block, save the Header Template.

Step 8: Currency Selector Displays in Header

So, after completing all the steps from (Step 1-Step 7), you will be able to display the Currency Selector available in the Header as shown above in the screenshots precisely

In your spare time, you can watch the following tutorial to create a travel site using “WP Travel Gutenberg Blocks“

Conclusion

So, in this way, you can add a currency selector in the FSE theme with ease.