Understood. Then the meter should be Voice-only, and it should say that Text (VCV) is free without implying Voice is free.
Use this drop-in replacement for the shortcode output (same MU-plugin file), adjusting only the copy + links:
<?php
/**
* Plugin Name: Verolex — VVC Meter (MU)
* Description: Shows a minimal Voice (VVC) TimePass meter + dropdown only when Voice mode is selected.
* Author: Verolex
* Version: 1.0.1
*
* FILE NAME:
* /wp-content/mu-plugins/verolex-vvc-meter.php
*/
if (!defined('ABSPATH')) exit;
add_action('init', function () {
add_shortcode('vx_vvc_meter', function ($atts = []) {
$a = shortcode_atts([
// Must match your switch storage_key, e.g. vx_employer_mode
'storage_key' => 'vx_employer_mode',
// What value the switch stores for Voice
'voice_value' => 'voice',
// TimePass / voice time location
'plans_url' => home_url('/subscription-levels/'),
// Optional: direct checkout endpoints (TimePass levels)
'level_15' => home_url('/checkout/?pmpro_level=161'),
'level_30' => home_url('/checkout/?pmpro_level=162'),
'level_60' => home_url('/checkout/?pmpro_level=163'),
// Copy
'headline' => 'Voice (VVC) runs on TimePass.',
'subline' => 'Text assessment (VCV) is free. Voice activates when you add time.',
'btn_manage' => 'TimePass & access',
'btn_add' => 'Add time',
], (array)$atts, 'vx_vvc_meter');
$id = 'vx-vvc-meter-' . wp_rand(1000, 9999);
ob_start(); ?>
<style>
.vx-vvc-meter{max-width:980px;margin:12px auto 0;padding:0 16px;font:650 14px/1.35 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif;color:#0C3D54}
.vx-vvc-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vx-vvc-pill{display:inline-flex;align-items:center;gap:10px;border:1px solid #D6E3EC;border-radius:12px;background:#fff;padding:10px 12px}
.vx-vvc-k{color:#003F63;font-weight:900}
.vx-vvc-v{color:#36586b;font-weight:800}
.vx-vvc-actions{display:inline-flex;gap:8px;flex-wrap:wrap;align-items:center}
.vx-vvc-btn{
display:inline-flex;align-items:center;justify-content:center;
min-height:40px;padding:0 14px;border-radius:10px;
border:1px solid #0C3D54;background:#fff;color:#0C3D54;
text-decoration:none;font-weight:900;white-space:nowrap;line-height:1;
}
.vx-vvc-btn.soft{border-color:#cfe1ea;background:#edf5f8}
.vx-vvc-btn.primary{background:#0C3D54;color:#fff}
.vx-vvc-dd{position:relative}
.vx-vvc-dd > button{
display:inline-flex;align-items:center;justify-content:center;
min-height:40px;padding:0 14px;border-radius:10px;
border:1px solid #cfe1ea;background:#edf5f8;color:#0C3D54;
cursor:pointer;font-weight:900;white-space:nowrap;line-height:1;
}
.vx-vvc-menu{
position:absolute;z-index:9999;top:44px;left:0;
min-width:220px;background:#fff;border:1px solid #D6E3EC;border-radius:12px;
padding:6px;display:none;
}
.vx-vvc-menu a{
display:flex;justify-content:space-between;gap:10px;
padding:10px 10px;border-radius:10px;text-decoration:none;
color:#0C3D54;font-weight:900;
}
.vx-vvc-menu a:hover{background:#F7FAFC}
.vx-vvc-muted{font-size:13px;color:#5F707D;font-weight:650;margin-top:8px;max-width:920px}
</style>
<div id="<?php echo esc_attr($id); ?>" class="vx-vvc-meter" style="display:none" aria-label="Voice TimePass meter">
<div class="vx-vvc-row">
<div class="vx-vvc-pill" aria-label="Voice status">
<span class="vx-vvc-k"><?php echo esc_html($a['headline']); ?></span>
<span class="vx-vvc-v" data-vx-vvc-value>sign in to view balance</span>
</div>
<div class="vx-vvc-actions" aria-label="TimePass actions">
<a class="vx-vvc-btn" href="<?php echo esc_url($a['plans_url']); ?>"><?php echo esc_html($a['btn_manage']); ?></a>
<div class="vx-vvc-dd" aria-label="Add time dropdown">
<button type="button" data-vx-vvc-toggle><?php echo esc_html($a['btn_add']); ?></button>
<div class="vx-vvc-menu" data-vx-vvc-menu>
<a href="<?php echo esc_url($a['level_15']); ?>"><span>15 minutes</span><span>→</span></a>
<a href="<?php echo esc_url($a['level_30']); ?>"><span>30 minutes</span><span>→</span></a>
<a href="<?php echo esc_url($a['level_60']); ?>"><span>60 minutes</span><span>→</span></a>
</div>
</div>
</div>
</div>
<div class="vx-vvc-muted">
<?php echo esc_html($a['subline']); ?>
</div>
</div>
<script>
(function(){
const root = document.getElementById(<?php echo json_encode($id); ?>);
if(!root) return;
const storageKey = <?php echo json_encode((string)$a['storage_key']); ?>;
const voiceValue = <?php echo json_encode((string)$a['voice_value']); ?>;
const valEl = root.querySelector('[data-vx-vvc-value]');
const toggleBtn = root.querySelector('[data-vx-vvc-toggle]');
const menu = root.querySelector('[data-vx-vvc-menu]');
function getMode(){
try { return (localStorage.getItem(storageKey) || '').toLowerCase(); }
catch(e){ return ''; }
}
function voiceSelected(){
return getMode() === voiceValue; // expected: "voice"
}
function closeMenu(){ if(menu) menu.style.display='none'; }
if(toggleBtn && menu){
toggleBtn.addEventListener('click', function(){
menu.style.display = (menu.style.display === 'block') ? 'none' : 'block';
});
document.addEventListener('click', function(e){
if(!menu.contains(e.target) && e.target !== toggleBtn) closeMenu();
});
}
// Optional hook: if you later expose remaining minutes, we display it.
function setMeterText(){
let txt = 'sign in to view balance';
try{
const tp = window.VX_TIMEPASS || window.VXTimePass || null;
const remaining = tp && (tp.remaining_minutes ?? tp.remaining ?? null);
if(remaining !== null && remaining !== undefined && remaining !== ''){
txt = String(remaining) + ' min remaining';
}
}catch(e){}
if(valEl) valEl.textContent = txt;
}
function sync(){
const on = voiceSelected();
root.style.display = on ? 'block' : 'none';
if(on){
setMeterText();
}else{
closeMenu();
}
}
sync();
setInterval(sync, 450);
window.addEventListener('storage', function(e){
if(e && e.key === storageKey) sync();
});
})();
</script>
<?php
return ob_get_clean();
});
}, 20);Put this shortcode widget right under your 3-way switch:
[vx_vvc_meter storage_key=”vx_employer_mode”]
Result:
Text (VCV): no TimePass language.
File: no TimePass language.
Voice (VVC): meter + dropdown appears, and it states plainly VCV is free and VVC is TimePass.
If your switch stores something other than voice for the voice selection, change:
voice_value=”voice” to the exact stored value.