Skip to main content

Documentation Index

Fetch the complete documentation index at: https://developer.surecart.com/llms.txt

Use this file to discover all available pages before exploring further.

These filters allow you to customize how media elements like videos and image galleries are displayed throughout SureCart.

Video Filters

surecart/product-video-poster/size

Filter the video poster image size.
add_filter( 'surecart/product-video-poster/size', function( $size ) {
    return 'full';
} );

surecart/product-video-poster/fallback_src

Filter the fallback video poster image.
add_filter( 'surecart/product-video-poster/fallback_src', function( $src ) {
    return get_template_directory_uri() . '/images/video-placeholder.jpg';
} );

surecart_video_html

Filter the video HTML output for complete customization.
Parameters
Filter Parameters
add_filter( 'surecart_video_html', function( $html, $video, $media, $metadata ) {
    // Use custom video player
    return sprintf(
        '<div class="custom-video-player" data-src="%s" data-poster="%s"></div>',
        esc_url( $video['src'] ),
        esc_url( $video['poster'] ?? '' )
    );
}, 10, 4 );

surecart/image-slider/active-breakpoint

Filter the breakpoint for gallery slider activation.
add_filter( 'surecart/image-slider/active-breakpoint', function( $breakpoint ) {
    return 768; // Change breakpoint pixel value
} );

// Or disable slider on desktop
add_filter( 'surecart/image-slider/active-breakpoint', function( $breakpoint ) {
    return 1024; // Only activate slider below 1024px
} );

Use Cases

Custom Video Player Integration

add_filter( 'surecart_video_html', function( $html, $video, $media, $metadata ) {
    // Use Plyr video player
    wp_enqueue_script( 'plyr' );
    wp_enqueue_style( 'plyr' );
    
    return sprintf(
        '<video class="plyr" playsinline controls data-poster="%s">
            <source src="%s" type="video/mp4" />
        </video>',
        esc_url( $video['poster'] ?? '' ),
        esc_url( $video['src'] )
    );
}, 10, 4 );

Add Video Analytics Tracking

add_filter( 'surecart_video_html', function( $html, $video, $media, $metadata ) {
    $processor = new WP_HTML_Tag_Processor( $html );
    
    if ( $processor->next_tag( 'video' ) ) {
        // Add tracking attributes for analytics
        $processor->set_attribute( 'data-track', 'product-video' );
        $processor->set_attribute( 'data-video-id', esc_attr( $media->id ?? '' ) );
        $processor->set_attribute( 'data-duration', esc_attr( $metadata['duration'] ?? '' ) );
    }
    
    return $processor->get_updated_html();
}, 10, 4 );

Products

Customize product display and images.

Templates

Modify block output and inject content.