Customize video playback, image galleries, and media display
surecart/product-video-poster/size
add_filter( 'surecart/product-video-poster/size', function( $size ) { return 'full'; } );
surecart/product-video-poster/fallback_src
add_filter( 'surecart/product-video-poster/fallback_src', function( $src ) { return get_template_directory_uri() . '/images/video-placeholder.jpg'; } );
surecart_video_html
Show properties
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
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 } );
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_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 );
Was this page helpful?