Shoptimizer originally included a vertical version of the core WooCommerce product gallery. This was lost in the transition to the newer CommerceKit product gallery but you can re-apply it with some custom code if you wish.
Firstly, within CommerceKit, ensure that the Product Gallery and the Attributes Gallery modules are both disabled.
Then, via the Code Snippets plugin, or within the functions.php file of a child theme, include the following.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
add_action( 'woocommerce_after_single_product', 'cg_core_gallery_vertical' ); function cg_core_gallery_vertical() { ?> <style> @media (min-width: 600px) { .woocommerce div.product div.images.woocommerce-product-gallery { position: relative; } .woocommerce div.product div.images:not(.ckit-mobile-pdp-gallery-active) { position: relative; overflow: hidden; padding-left: 100px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } div.product .woocommerce-product-gallery .flex-viewport { margin-bottom: 0; } .woocommerce div.product div.images .flex-control-thumbs li { -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0 0 15px; display: block; width: 100%; margin: 0; } .woocommerce div.product div.images .flex-control-thumbs { position: absolute; z-index: 1; top: 0; left: 0; margin: 0; width: 100px; padding: 0 0px 0 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 100%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } ul.flex-direction-nav { margin-top: -21px; margin-left: 100px; width: calc(100% - 100px); } } </style> <?php } |
