• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Dominate Marketing

Why Dabble When You Can DOMINATE

  • Blog
  • Contact

Adding support for the new WooCommerce 3.0 gallery features

July 24, 2017 by Dominate Marketing

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).

PHP

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.

The new WooCommerce 3.0 Product gallery in all it's glory!
The new WooCommerce 3.0 Product gallery in all it’s glory!

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.

PHP

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;
}

Enjoy your new gallery!

Filed Under: Woocommerce

Categories

  • css tricks
  • Errors
  • Fixes & F**ups
  • Formidable Forms
  • Genesis
  • Google Apps Mail
  • How To's & Tips n Tricks
  • MailChimp
  • Media
  • Plugins
  • Scam Alert
  • Shipping
  • Shopping Cart Modules
  • Videos
  • Widgets
  • Woocommerce

Recent Posts

  • font gradient
  • Horizontal Genesis eNews E-Mail Opt In Subscribe Box Inline
  • Hide shipping rates when free shipping is available
  • How to Create a WooCommerce Wholesale System
  • Imagify vs EWWW vs Kraken vs WP Smush vs ShortPixel: The 5 Best WordPress Image Optimization Plugins Compared
  • Formidable Forms & Mod Security
  • Genesis Slide-in Widget
  • Genesis Plugins
  • Genesis overlay widget
  • Add refined CTA & Announcement widget areas etc
  • Migrate Weebly to WordPress: A Step-by-Step Guide
  • Sparkle
  • Remove WordPress Default Widgets
  • Some great css tricks on this website
  • Border Around A Button
  • Adding support for the new WooCommerce 3.0 gallery features
  • 100 WooCommerce Tips and Tricks
  • Woocommerce – Change number of products displayed
  • Genesis Footer Widgets
  • 3 Ways to integrate WooCommerce with Genesis
  • Emails fail on multisite setup
  • Video Embed & Thumbnail Generator
  • WP MS User Roles
  • Setup Gmail for Domain – Google Apps Mail
  • Remove default WordPress widgets
  • Re-Order Single Product Template
  • Change SKU Text
  • Don’t Get Caught by an Invitation To Register Domain – Fake Domain Renewal Letters Can Cost You
  • WooCommerce MailChimp Integration
  • Hide the shipping methods if the cart does not have the specific shipping class

Handcrafted with by Dominate Marketing
Web Design & Development, SEO & Ultra Nerdyness!
Sitemap | Terms of Service | Privacy Policy | Delivery Policy | Refund Policy | Owner Login