Enable WooCommerce Lightbox for TagDiv Newspaper Theme

Add and ensure that the following code is customized and works in the child theme [login to view URL] file so that the light box appears in pop-up and not in separate tab or window with scroll for multiple photos.

add_action( 'after_setup_theme', 'yourtheme_setup' );

function yourtheme_setup() {

add_theme_support( 'wc-product-gallery-zoom' );

add_theme_support( 'wc-product-gallery-lightbox' );

add_theme_support( 'wc-product-gallery-slider' );

}

2) create the styling layout for the new gallery. The classes you’ll want to work with are;

.woocommerce-product-gallery – The gallery wrapper. This wrapper will also include a class that indicates how many columns thumbnails should be arranged into, e.g. .woocommerce-product-gallery--columns-4

.woocommerce-product-gallery__wrapper – The slider wrapper

.woocommerce-product-gallery__image – The figure that contains the image itself, which is wrapped in an anchor

.woocommerce-product-gallery__trigger – This is the link that triggers the lightbox functionality

.flex-control-thumbs – If you’re using the slider functionality the Flexslider script creates the thumbnails in a ol with this class

A note on the column class; If you anticipate that your users might want to change the columns using the woocommerce_product_thumbnails_columns filter, you might also want to include styles for other column layouts besides the default.

CSS jQuery / 프로토 타입 PHP WooCommerce 워드프레스

프로젝트 ID: #17312888

프로젝트 소개