Show Unlock Count on Front-end

assets/css/paywall-styles.css

@@ -18,4 +18,14 @@
 
 .unlocked-indicator span {
   padding: 0 1rem;                           /* Space between text and lines */
+}
+
+/* Show Unlock Count on Front-end */
+.pb-frontend-unlock-count {
+  color: var(--pb-frontend-unlock-color, #0074C2);
+  margin-bottom: 1em;
+  text-align: center;
+  font-family: inherit;
+  font-size: 1.2em;
+  font-style: italic;
 }

assets/js/paybutton-admin.js

@@ -16,4 +16,21 @@ jQuery(document).ready(function($) {
     toggleColorFields();
     // On checkbox change
     unlockedCheckbox.on('change', toggleColorFields);
+
+    //NEW: Toggle the “Unlock Count Color” row visibility
+    var enableUnlockCountCheckbox   = $('#paybutton_enable_frontend_unlock_count');
+    var frontendUnlockColorRow      = $('#paybutton_frontend_unlock_color_row');
+
+    function toggleFrontendUnlockColorRow() {
+    if ( enableUnlockCountCheckbox.is(':checked') ) {
+        frontendUnlockColorRow.show();
+    } else {
+        frontendUnlockColorRow.hide();
+    }
+    }
+
+    // On page load
+    toggleFrontendUnlockColorRow();
+    // On checkbox change
+    enableUnlockCountCheckbox.on('change', toggleFrontendUnlockColorRow);
 });

includes/class-paybutton-admin.php

@@ -295,7 +295,17 @@ private function save_settings() {
         if ( isset( $_POST['paybutton_public_key'] ) ) {
             $public_key = sanitize_text_field( $_POST['paybutton_public_key'] );
             update_option( 'paybutton_public_key', $public_key );
-        }    
+        }
+
+        //Front‐end unlock count toggle
+        $enable_frontend_unlock_count = isset( $_POST['paybutton_enable_frontend_unlock_count'] ) ? '1' : '0';
+        update_option( 'paybutton_enable_frontend_unlock_count', $enable_frontend_unlock_count );
+
+        //Front‐end unlock count text color
+        $frontend_unlock_color = isset( $_POST['paybutton_frontend_unlock_color'] )
+            ? sanitize_hex_color( wp_unslash( $_POST['paybutton_frontend_unlock_color'] ) )
+            : '#0074C2';
+        update_option( 'paybutton_frontend_unlock_color', $frontend_unlock_color );
     }
 
     /**

includes/class-paybutton-public.php

@@ -45,6 +45,9 @@ public function enqueue_public_assets() {
         // Read the admin-chosen color for the unlocked content indicator from options
         $pb_indicator_color = get_option('paybutton_unlocked_indicator_color', '#000000');
 
+        // Read the admin-chosen color for the frontend unlock label
+        $frontend_label_color = esc_attr( get_option( 'paybutton_frontend_unlock_color', '#0074C2' ) );
+
         // Add inline CSS variables.
         $custom_css = "
             :root {
@@ -55,6 +58,7 @@ public function enqueue_public_assets() {
                 --logout-button-bg-color: " . esc_attr( get_option('paybutton_logout_button_bg_color', '#d9534f') ) . ";
                 --logout-button-text-color: " . esc_attr( get_option('paybutton_logout_button_text_color', '#fff') ) . ";
                 --pb-unlocked-indicator-color: {$pb_indicator_color};
+                --pb-frontend-unlock-color: {$frontend_label_color};
             }
         ";
         wp_add_inline_style( 'paybutton-sticky-header', esc_attr( $custom_css ) );
@@ -222,8 +226,41 @@ public function paybutton_paywall_shortcode( $atts, $content = null ) {
             ),
             'opReturn'    => (string) $post_id //This is a hack to give the PB server the post ID to send it back to WP's DB
         );
+
+        //NEW: If the admin enabled “Show Unlock Count on Front‐end,” and this post is NOT yet unlocked then display unlock count on the front end.
+        $unlock_label_html = '';
+
+        if ( '1' === get_option( 'paybutton_enable_frontend_unlock_count', '0' ) ) {
+            global $wpdb;
+            $unlock_table_name = $wpdb->prefix . 'paybutton_paywall_unlocked';
+
+            $unlock_count = (int) $wpdb->get_var( $wpdb->prepare(
+                "SELECT COUNT(*) FROM {$unlock_table_name} WHERE post_id = %d",
+                $post_id
+            ) );
+
+            if ( $unlock_count < 1 ) {
+                $unlock_text = '🔓 Be the first to unlock this content!';
+            } elseif ( $unlock_count === 1 ) {
+                $unlock_text = '🔥 1 unlock and counting...';
+            } else {
+                $unlock_text = "🔥 {$unlock_count} unlocks and counting...";
+            }
+
+            // Build the <p> into a variable, but do not echo yet:
+            $unlock_label_html = '<p class="pb-frontend-unlock-count">' 
+                            . esc_html( $unlock_text ) 
+                            . '</p>';
+        }
+
         ob_start(); //When ob_start() is called, PHP begins buffering all subsequent output instead of printing it to the browser.
         ?>
+
+        <?php
+        //Print the unlock‐count HTML (if enabled) before the PayButton container.
+        echo $unlock_label_html;
+        ?>
+
         <div id="paybutton-container-<?php echo esc_attr( $post_id ); ?>" class="paybutton-container" data-config="<?php echo esc_attr( json_encode( $config ) ); ?>" style="text-align: center;"></div>
         <?php
         return ob_get_clean(); // ob_get_clean() Returns the HTML string to WordPress so it is inserted properly.

templates/admin/paywall-settings.php

@@ -95,6 +95,44 @@
                     </td>
                 </tr>
             </tbody>
+            <!-- Show Unlock Count on Front‐end -->
+            <tr>
+                <th scope="row">Show Unlock Count on Front‐end</th>
+                <td>
+                    <label>
+                        <input 
+                            type="checkbox" 
+                            name="paybutton_enable_frontend_unlock_count" 
+                            id="paybutton_enable_frontend_unlock_count"
+                            value="1"
+                            <?php checked( get_option( 'paybutton_enable_frontend_unlock_count', '0' ), '1' ); ?>
+                        >
+                        <span>Enable unlock‐count label above PayButton on public posts</span>
+                    </label>
+                </td>
+            </tr>
+
+            <!-- Unlock Count Color Picker (hidden until above box is checked) -->
+            <tr id="paybutton_frontend_unlock_color_row">
+                <th scope="row">
+                    <label for="paybutton_frontend_unlock_color">Unlock Count Label Color</label>
+                </th>
+                <td>
+                    <input 
+                    type="color" 
+                    name="paybutton_frontend_unlock_color" 
+                    id="paybutton_frontend_unlock_color"
+                    value="<?php echo esc_attr( get_option( 'paybutton_frontend_unlock_color', '#0074C2' ) ); ?>"
+                    >
+                    <button type="button"
+                    onclick="document.getElementById('paybutton_frontend_unlock_color').value = '#0074C2';">
+                    Reset
+                    </button>
+                    <p class="description">
+                    Pick the hex color for the unlock count label.
+                    </p>
+                </td>
+            </tr>
             <!-- Sticky Header Settings -->
             <tr>
                 <th colspan="2"><h2>Sticky Header Settings</h2></th>