Adding support for the new WooCommerce 3.0 gallery features
The good news is that adding support for the new 3.0 gallery features is a piece of cake! If you’re using a WooCommerce supported theme that is maintained by a theme shop or a themeforest author my first recommendation is to get in touch with your theme author and ask them to add WooCommerce 3.0 support asap. If you’re managing your own WooCommerce theme you simply need to add a few lines to your after_setup_theme action. (most likely in your functions.php file).
|
1
2
3
4
5
6
7
|
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’ );
}
|
Once you add those lines head back over to your product page and you should see something like this.
If your theme hasn’t disabled the core WooCommerce styles that should be all you need to do to use the new gallery. But it’s quite common for themes that provide deep WooCommerce support to disable the core WooComerce styles and therefore you’ll need some additional CSS to get things looking nice. The following CSS is a slightly modified version of the css that ships with the Storefront WooCommerce theme. Try adding this to your themes style.css if you manage your own theme.
|
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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
/* WooCommerce 3.0 Gallery */
.woocommerce–product–gallery {
position: relative;
margin–bottom: 3em
}
.woocommerce–product–gallery figure {
margin: 0
}
.woocommerce–product–gallery .woocommerce–product–gallery__image:nth–child(n+2) {
width: 25%;
display: inline–block
}
.woocommerce–product–gallery .flex–control–thumbs li {
list–style: none;
float: left;
cursor: pointer
}
.woocommerce–product–gallery .flex–control–thumbs img {
opacity: .5
}
.woocommerce–product–gallery .flex–control–thumbs img.flex–active,.woocommerce–product–gallery .flex–control–thumbs img:hover {
opacity: 1
}
.woocommerce–product–gallery img {
display: block
}
.woocommerce–product–gallery—columns–3 .flex–control–thumbs li {
width: 33.3333%
}
.woocommerce–product–gallery—columns–4 .flex–control–thumbs li {
width: 25%
}
.woocommerce–product–gallery—columns–5 .flex–control–thumbs li {
width: 20%
}
.woocommerce–product–gallery__trigger {
position: absolute;
top: 1em;
right: 1em;
z–index: 99;
}
a.woocommerce–product–gallery__trigger {
text–decoration: none;
}
.single–product div.product .woocommerce–product–gallery .woocommerce–product–gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border–radius: 3px;
z–index: 99;
text–align: center;
text–indent: –999px;
overflow: hidden;
}
.single–product div.product .woocommerce–product–gallery .woocommerce–product–gallery__trigger {
background–color: #169fda;
color: #ffffff;
}
.single–product div.product .woocommerce–product–gallery .woocommerce–product–gallery__trigger:hover {
background–color: #1781ae;
border–color: #1781ae;
color: #ffffff;
}
.single–product div.product .woocommerce–product–gallery .woocommerce–product–gallery__trigger:before {
font: normal normal normal 1em/1 FontAwesome;
font–size: inherit;
text–rendering: auto;
–webkit–font–smoothing: antialiased;
–moz–osx–font–smoothing: grayscale;
display: block;
content: “\f00e”;
line–height: 2;
text–indent: 0;
}
|