The Better Subscription Switcher uses a robust template override system that allows you to completely customize the modal interface, product details, and all visual elements without modifying plugin files. This ensures your customizations survive plugin updates.
Step 1: Create Theme Directory
Create a `better-sub-switcher` folder in your active theme:
File Structure:
your-theme/
├── style.css
├── functions.php
├── index.php
└── better-sub-switcher/ ← Create this folder
├── bss-modal.php ← Override files go here
└── bss-product-details.php ← Override files go hereStep 2: Copy Template Files
Copy the original templates from the plugin to your theme directory and customize them.
Step 3: Test Your Changes
- Clear any caching
- Test the subscription switching functionality
- Verify changes appear correctly
- Test on different devices and browsers
Template Reference Guide
Main Modal Template (`bss-modal.php`)
Available Variables
The modal template receives the following data:
<?php
$subscription_data = array(
'current' => array(
'subscription_id' => 123,
'product_id' => 456,
'variation_id' => 789, // 0 for simple products
'name' => 'Current Plan Name',
'price' => '$19.99/month',
'image' => '<img src="..." alt="..." />', // HTML string
'type' => 'subscription', // Product type
'regular_price' => '19.99',
'subscription_details' => array(
'period' => 'month',
'interval' => 1
)
),
'available' => array(
// Array of available plans with same structure as current
array(
'id' => 789, // Plan/item ID
'subscription_id' => 123,
'product_id' => 789,
'variation_id' => 0,
'name' => 'Basic Plan',
'price' => '$9.99/month',
'image' => '<img src="..." alt="..." />',
'type' => 'subscription',
'regular_price' => '9.99',
'signup_fee' => '0.00',
'current_quantity' => 1,
'subscription_details' => array(
'period' => 'month',
'interval' => 1
)
)
)
);
?>Template Helper Functions
Access powerful helper functions in your templates:
<?php
// Render a plan (current or available)
echo Better_Sub_Switcher::template()->plan($plan_data, 'current');
echo Better_Sub_Switcher::template()->plan($plan_data, 'available');
// Render product gallery
echo Better_Sub_Switcher::template()->gallery($product_data);
// Render gallery thumbnails
echo Better_Sub_Switcher::template()->thumbnails($product_data);
// Render variation selectors
echo Better_Sub_Switcher::template()->variations($product_data);
// Render action button
echo Better_Sub_Switcher::template()->button($product_data);
// Render quantity controls
echo Better_Sub_Switcher::template()->quantity($product_data);
?>Action Hooks for Extensions
<?php
// Add content to modal header
do_action('better_sub_switcher_modal_header');
// Add content before current plan
do_action('better_sub_switcher_before_current_plan');
// Add content before modal footer
do_action('better_sub_switcher_before_modal_footer');
// Add content after modal
do_action('better_sub_switcher_after_modal');
// Fires after every plan title, regardless of which plan
// Use for content that should appear after ALL plan titles
do_action('better_sub_switcher_after_plan_title', $plan_data, $type);
// Fires after plan title for a specific product ID only
// Hook name is dynamic: better_sub_switcher_after_plan_title_product_123
// Use for content specific to certain products
do_action('better_sub_switcher_after_plan_title_product_' . $product_id, $plan_data, $type);
// Fires after plan title for a specific variation ID only
// Hook name is dynamic: better_sub_switcher_after_plan_title_variation_789
// Use for content specific to product variations (size, color, tier, etc.)
do_action('better_sub_switcher_after_plan_title_variation_' . $variation_id, $plan_data, $type);
?>Product Details Template (`bss-product-details.php`)
Available Variables
The product details template receives comprehensive product data:
<?php
$product_data = array(
'product_id' => 123,
'variation_id' => 456, // For variable products (0 for simple products)
'name' => 'Premium Plan',
'description' => 'Complete product description HTML content',
'price' => '$29.99/month', // HTML price string
'type' => 'variable-subscription', // Product type
'regular_price' => '29.99', // Raw price value
'rating_html' => '<div class="star-rating">...</div>',
'review_count' => 47,
// Image data
'main_image' => array(
'src' => 'product-image.jpg',
'full_src' => 'product-image-large.jpg', // For zoom
'alt' => 'Product image description',
'id' => 789 // WordPress attachment ID (when available)
),
'gallery_images' => array(
array(
'src' => 'gallery-1.jpg',
'full_src' => 'gallery-1-large.jpg',
'alt' => 'Gallery image 1',
'id' => 790 // WordPress attachment ID (when available)
),
// Additional gallery images...
),
// Variable product data (only for variable products)
'variations' => array(
array(
'variation_id' => 789,
'name' => 'Small - Red',
'price_html' => '$29.99/month',
'regular_price' => '29.99',
'signup_fee' => '0.00',
'is_in_stock' => true
)
)
'source_variation_id' => 456, // Original variation being switched from
'current_quantity' => 1
);
?>Product Template Helper Functions
Specific functions available for product details customization:
<?php
// Render product image gallery with zoom
Better_Sub_Switcher::template()->gallery($product_data)
// Returns: Escaped HTML for main product image with zoom link
// Render gallery thumbnails
Better_Sub_Switcher::template()->thumbnails($product_data)
// Returns: Escaped HTML for thumbnail navigation
// Render variation dropdowns (for variable products)
Better_Sub_Switcher::template()->variations($product_data)
// Returns: <select> dropdown for product variations (if variable product)
// Render quantity +/- controls
Better_Sub_Switcher::template()->quantity($product_data)
// Returns: Quantity controls HTML (if enabled in settings)
// Render action button (Select Plan/Configure)
Better_Sub_Switcher::template()->button($product_data)
// Returns: "Select this plan" button with data attributes
?>