360 Product View in Woocommerce

Hello,

Please try implementing the solution provided in the following topic:
https://xtemos.com/forums/topic/360-product-view-speed/

Best Regards

Hello,

Try to add this code snippet to your child theme functions.php file. There you will be able to change playSpeed parameter

function basel_product_360_view() {
		$images = basel_get_360_gallery_attachment_ids();
		if( empty( $images ) ) return;

		$id = rand(100,999);

		$title = '';

		$frames_count = count( $images );

		$images_js_string = '';

		?>
			<div class="product-360-button">
				<a href="#product-360-view"><span><?php _e('360 product view', 'basel'); ?></span></a>
			</div>
			<div id="product-360-view" class="product-360-view-wrapper mfp-hide">
				<div class="basel-threed-view threed-id-<?php echo esc_attr( $id ); ?>">
					<?php if ( ! empty( $title ) ): ?>
						<h3 class="threed-title"><span><?php echo ($title); ?></span></h3>
					<?php endif ?>
					<ul class="threed-view-images">
						<?php if ( count($images) > 0 ): ?>
							<?php $i=0; foreach ($images as $img_id): $i++; ?>
								<?php 
									$img = wp_get_attachment_image_src( $img_id, 'full' );
									$width = $img[1];
									$height = $img[2];
									$images_js_string .= "'" . $img[0] . "'"; 
									if( $i < $frames_count ) {
										$images_js_string .= ","; 
									}
								?>
							<?php endforeach ?>
						<?php endif ?>
					</ul>
				    <div class="spinner">
				        <span>0%</span>
				    </div>
				</div>
				<script type="text/javascript">
					jQuery(document).ready(function( $ ) {
					    $('.threed-id-<?php echo esc_attr( $id ); ?>').ThreeSixty({
					        totalFrames: <?php echo $frames_count; ?>,
					        endFrame: <?php echo $frames_count; ?>, 
					        currentFrame: 1, 
					        imgList: '.threed-view-images', 
					        progress: '.spinner',
					        imgArray: [<?php echo $images_js_string; ?>],
					        height: <?php echo $height ?>,
					        width: <?php echo $width ?>,
					        responsive: true,
					        playSpeed: 300,
					        navigation: true
					    });
					});
				</script>
			</div>
		<?php
	}

Regards

Hello,

Please provide the admin panel and FTP details of the website to check it myself and help you out accordingly.

Best Regards

Hello,

By default, The speed of the 360 product view depends on the number of images, you have added to the view. The more images, the slower rotation.

If you do not like that, you need to add a custom snippet into the function.php of the child theme as provided by my colleague in #407690

There two ways to find this file: WP admin panel and FTP.

1. You can find the file in the Dashboard > Appearance > Theme file editor: https://gyazo.com/ca2d6f7bb19997e67e393832cdba3e8a

2. Then select the proper theme and the proper file: https://gyazo.com/7a043c001983e3ef54c8c827bc80a903

As soon as you add the code, you need to activate the child theme.

If you want to add the code to the file via FTP, you need to select wp-content folder > themes > select the child theme > find the functions.php file and insert the code.

The child theme should be activated.

If you have any questions please feel free to contact us.

Best Regards

Hello,

We have installed the child theme. Please insert this code into functions.php: https://prnt.sc/gksmFhPbRFJH

You need to enter Appearance > Theme Editor, select the child theme and open functions.php:

add_filter( 'woodmart_three_sixty_prev_next_frames', function () {
	return 2;
});

Best Regards

Hello,

The code we provided reduces the speed when you use the pagination: https://prnt.sc/yhdsSg0e9FP9 and https://prnt.sc/zM8mqyG6oWTA

If you want to use swapping, add this code:

add_filter( 'woodmart_three_sixty_framerate', function () {
	return 20;
});

You can change the speed as per your needs.

Best Regards