Import JS file script to the theme

Hi there,

Where do I need to add my custom JS script & PHP?

In my WC Single Layout I want to add this to the JS custom code option:

<div id="waveform">
  <!-- the waveform will be rendered here -->
</div>

<script type="module">
import WaveSurfer from 'https://unpkg.com/wavesurfer.js@7/dist/wavesurfer.esm.js'

const wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: '#4F4A85',
  progressColor: '#383351',
  url: '/audio.mp3',
})

wavesurfer.on('interaction', () => {
  wavesurfer.play()
})
</script>

Hello @Peter789,

Thanks for writing to us.

You can use the Raw content element on your layout to insert the JS script and HTML code, In case you want to add the PHP code as well you need to use the third-party plugin.

Alternatively, you can use the child to add the custom as well. You can download the child theme from here.

Hope it helps
Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.