View Categories

Template Customization

4 min read

Smart Cycle Discounts uses template files for rendering certain UI elements. This guide explains how to customize these templates in your theme to match your store’s design.

Template Override System #

How Template Overrides Work #

Smart Cycle Discounts follows the WordPress/WooCommerce template override pattern:

  1. Plugin checks your theme for template file
  2. If found in theme, uses theme version
  3. If not found, uses plugin default

Override Location #

Place custom templates in your theme:

your-theme/
└── smart-cycle-discounts/
    └── [template-file.php]

Or in a child theme:

your-child-theme/
└── smart-cycle-discounts/
    └── [template-file.php]

Available Templates #

Frontend Templates #

Template Location Description
sale-badge.php frontend/ Product sale badge
savings-message.php frontend/ “You save X” message
price-display.php frontend/ Price with original/sale format
cart-discount.php frontend/ Cart discount row

Email Templates #

Template Location Description
campaign-expiring.php emails/ Expiration warning email
campaign-activated.php emails/ Activation notification
low-stock-alert.php emails/ Low stock warning (Pro)

Creating Template Overrides #

Step 1: Copy Original Template #

  1. Find the template in wp-content/plugins/smart-cycle-discounts/templates/
  2. Copy to your theme’s smart-cycle-discounts/ folder
  3. Maintain the same folder structure

Step 2: Customize Template #

Edit the copied file. Available variables are documented in each template.

Step 3: Clear Cache #

After changes, clear any page cache to see updates.

Template Examples #

Custom Sale Badge #

File: your-theme/smart-cycle-discounts/frontend/sale-badge.php

<?php
/**
 * Custom Sale Badge Template
 *
 * Available variables:
 * $product_id  - Product ID
 * $campaign    - Campaign object
 * $discount    - Discount percentage or amount
 * $badge_text  - Default badge text
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<div class="custom-sale-badge">
    <span class="badge-text"><?php echo esc_html( $badge_text ); ?></span>
    <span class="badge-discount">-<?php echo esc_html( $discount ); ?>%</span>
</div>

Custom Savings Message #

File: your-theme/smart-cycle-discounts/frontend/savings-message.php

<?php
/**
 * Custom Savings Message Template
 *
 * Available variables:
 * $savings_amount     - Amount saved
 * $savings_percentage - Percentage saved
 * $original_price     - Original price
 * $sale_price         - Sale price
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<div class="custom-savings">
    <strong>Your Discount:</strong>
    <span class="amount"><?php echo wc_price( $savings_amount ); ?></span>
    <span class="percent">(<?php echo esc_html( round( $savings_percentage ) ); ?>% off)</span>
</div>

Custom Price Display #

File: your-theme/smart-cycle-discounts/frontend/price-display.php

<?php
/**
 * Custom Price Display Template
 *
 * Available variables:
 * $original_price - Original price (float)
 * $sale_price     - Discounted price (float)
 * $product_id     - Product ID
 * $campaign_name  - Name of the campaign
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<div class="custom-price-display">
    <span class="was-price">
        Was: <del><?php echo wc_price( $original_price ); ?></del>
    </span>
    <span class="now-price">
        Now: <strong><?php echo wc_price( $sale_price ); ?></strong>
    </span>
</div>

CSS Customization #

Default CSS Classes #

The plugin adds these CSS classes you can target:

Class Element
.wsscd-discount-badge Sale badge container
.wsscd-original-price Original price (strikethrough)
.wsscd-sale-price Discounted price
.wsscd-savings-message Savings display
.wsscd-price-wrapper Price container
.wsscd-cart-discount Cart discount row

Adding Custom CSS #

Option 1: Theme Customizer

  1. Go to Appearance → Customize → Additional CSS
  2. Add your custom CSS

Option 2: Theme Stylesheet

/* In your theme's style.css or custom CSS file */

.wsscd-discount-badge {
    background: #ff4444;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-weight: bold;
}

.wsscd-savings-message {
    color: #28a745;
    font-size: 0.9em;
    margin-top: 5px;
}

Option 3: Display Settings

Use the custom CSS field in SC Discounts → Settings → Display.

JavaScript Customization #

JavaScript Events #

The plugin emits namespaced events. Common ones:

// Fired when dynamic content/DOM is refreshed.
$( document ).on( 'wsscd:content-updated', function() {
    console.log( 'Re-bind custom UI after plugin refresh.' );
} );

// Fired when a frontend countdown/offer expires.
$( document.body ).on( 'wsscd_discount_expired', function( e, $element ) {
    console.log( 'Discount expired for element:', $element );
} );

// Wizard event (admin).
$( document ).on( 'wsscd:wizard:stepLoaded', function( e, stepName ) {
    console.log( 'Wizard step loaded:', stepName );
} );

Modifying Display via JavaScript #

jQuery( function( $ ) {
    // Re-apply custom behavior after plugin-driven content updates.
    $( document ).on( 'wsscd:content-updated', function() {
        $( '.wsscd-discount-badge' ).addClass( 'is-enhanced' );
    } );
} );

Template Variables Reference #

Campaign Object #

When $campaign is available:

$campaign->get_id();           // Campaign ID
$campaign->get_name();         // Campaign name
$campaign->get_status();       // Status string
$campaign->get_discount_type(); // 'percentage' or 'fixed'
$campaign->get_discount_value(); // Discount amount
$campaign->get_priority();     // Priority level
$campaign->get_start_date();   // Start datetime
$campaign->get_end_date();     // End datetime

Price Variables #

$original_price    // Float: Original product price
$sale_price        // Float: Discounted price
$savings_amount    // Float: Amount saved
$savings_percentage // Float: Percentage saved

Product Variables #

$product_id        // Integer: WooCommerce product ID
$product           // WC_Product object (when available)

Email Template Customization #

Custom Email Template #

File: your-theme/smart-cycle-discounts/emails/campaign-expiring.php

<?php
/**
 * Campaign Expiring Email Template
 *
 * Available variables:
 * $campaign       - Campaign object
 * $days_remaining - Days until expiration
 * $site_name      - WordPress site name
 * $admin_url      - URL to campaign in admin
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit;
}
?>

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: Arial, sans-serif; }
        .header { background: #f8f9fa; padding: 20px; }
        .content { padding: 20px; }
        .button { background: #0073aa; color: white; padding: 10px 20px; text-decoration: none; }
    </style>
</head>
<body>
    <div class="header">
        <h1>Campaign Expiring Soon</h1>
    </div>
    <div class="content">
        <p>Your campaign "<?php echo esc_html( $campaign->get_name() ); ?>"
           will expire in <?php echo esc_html( $days_remaining ); ?> days.</p>

        <p><a href="<?php echo esc_url( $admin_url ); ?>" class="button">View Campaign</a></p>
    </div>
</body>
</html>

Best Practices #

Do’s #

  • Always escape output with esc_html(), esc_attr(), etc.
  • Check if variables exist before using
  • Use WordPress/WooCommerce functions where possible
  • Test in multiple browsers
  • Keep templates minimal and focused

Don’ts #

  • Don’t modify plugin files directly
  • Don’t include business logic in templates
  • Don’t hardcode URLs or IDs
  • Don’t forget to clear cache after changes

Updating After Plugin Updates #

When the plugin updates:

  1. Check changelog for template changes
  2. Compare your templates with updated originals
  3. Merge any new functionality into your overrides
  4. Test thoroughly after merging
Updated on February 17, 2026

What are your Feelings

  • Happy
  • Normal
  • Sad