Ocean Product Sharing - Version 1.0.3

Version Description

  • Tweak: Icons replaced by SVG so if you disable Font Awesome, the social share icons are still there..
  • Tweak: CSS improvement.
Download this release

Release Info

Developer oceanwp
Plugin Icon 128x128 Ocean Product Sharing
Version 1.0.3
Comparing to
See all releases

Code changes from version 1.0.2.4 to 1.0.3

Files changed (9) hide show
  1. README.md +13 -0
  2. assets/css/style.css +45 -27
  3. assets/css/style.min.css +1 -1
  4. assets/css/style.scss +66 -18
  5. assets/js/customizer.js +2 -2
  6. assets/js/customizer.min.js +1 -1
  7. ocean-product-sharing.php +5 -5
  8. readme.txt +6 -2
  9. template/product-share.php +31 -4
README.md ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Ocean Product Sharing [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
2
+
3
+ **Contributors:** Nick
4
+ **Requires at least:** WordPress 4.4
5
+ **Tested up to:** WordPress 4.8.3
6
+ **Stable tag:** 1.0.3
7
+ **License:** GPLv2 or later
8
+ **License URI:** http://www.gnu.org/licenses/gpl-2.0.html
9
+
10
+ ## Description
11
+
12
+ A simple plugin to add social share buttons to your product page.
13
+ This plugin requires the [OceanWP](https://oceanwp.org/) theme to be installed.
assets/css/style.css CHANGED
@@ -7,11 +7,21 @@
7
  border-bottom: 1px solid #e9e9e9;
8
  }
9
  .woocommerce div.product .product-share ul {
10
- float: none;
 
 
 
 
 
 
 
 
 
 
 
 
11
  }
12
  .woocommerce div.product .product-share ul li {
13
- float: left;
14
- width: 25%;
15
  padding: 20px 30px;
16
  border-style: solid;
17
  border-color: #e9e9e9;
@@ -30,18 +40,36 @@
30
  border: 0;
31
  border-radius: 0;
32
  }
33
- .woocommerce div.product .product-share ul li a .fa {
34
  font-size: 16px;
35
- line-height: 40px;
36
- display: inline-block;
 
 
 
 
37
  width: 40px;
38
  height: 40px;
39
  -webkit-transition: all .3s ease;
40
  transition: all .3s ease;
41
  vertical-align: middle;
42
- color: #fff;
43
  border-radius: 50%;
44
  background-color: #333;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  }
46
  .woocommerce div.product .product-share ul li a .product-share-text {
47
  display: inline-block;
@@ -53,25 +81,25 @@
53
  .woocommerce div.product .product-share ul li.twitter a:hover {
54
  color: #00aced;
55
  }
56
- .woocommerce div.product .product-share ul li.twitter a:hover .fa {
57
  background-color: #00aced;
58
  }
59
  .woocommerce div.product .product-share ul li.facebook a:hover {
60
  color: #3b5998;
61
  }
62
- .woocommerce div.product .product-share ul li.facebook a:hover .fa {
63
  background-color: #3b5998;
64
  }
65
  .woocommerce div.product .product-share ul li.pinterest a:hover {
66
  color: #cb2027;
67
  }
68
- .woocommerce div.product .product-share ul li.pinterest a:hover .fa {
69
  background-color: #cb2027;
70
  }
71
  .woocommerce div.product .product-share ul li.email a:hover {
72
  color: #3fc387;
73
  }
74
- .woocommerce div.product .product-share ul li.email a:hover .fa {
75
  background-color: #3fc387;
76
  }
77
 
@@ -81,20 +109,6 @@
81
  width: calc(80% - 50px);
82
  }
83
 
84
- /* RTL */
85
- .rtl.woocommerce div.product .product-share ul li {
86
- float: right;
87
- }
88
-
89
- .rtl.woocommerce div.product .product-share ul li {
90
- border-right-width: 0;
91
- border-left-width: 1px;
92
- }
93
-
94
- .rtl.woocommerce div.product .product-share ul li:last-child {
95
- border-left-width: 0;
96
- }
97
-
98
  /*------------------------------------*
99
  Responsive
100
  *------------------------------------*/
@@ -102,8 +116,7 @@
102
  .woocommerce div.product .product-share ul li {
103
  padding: 20px 12px;
104
  }
105
- .woocommerce div.product .product-share ul li a .fa {
106
- display: block;
107
  margin: 0 auto 12px auto;
108
  }
109
  .woocommerce div.product .product-share ul li a .product-share-text,
@@ -119,6 +132,11 @@
119
  Phone Portrait and Landscape
120
  *------------------------------------*/
121
  @media only screen and (max-width: 767px) {
 
 
 
 
 
122
  .woocommerce div.product .product-share ul li {
123
  width: 50%;
124
  padding: 20px 0;
7
  border-bottom: 1px solid #e9e9e9;
8
  }
9
  .woocommerce div.product .product-share ul {
10
+ display: -webkit-box;
11
+ display: -webkit-flex;
12
+ display: -ms-flexbox;
13
+ display: flex;
14
+
15
+ -webkit-align-items: center;
16
+ -ms-flex-align: center;
17
+ -webkit-box-align: center;
18
+ align-items: center;
19
+ -webkit-justify-content: center;
20
+ -ms-flex-pack: center;
21
+ -webkit-box-pack: center;
22
+ justify-content: center;
23
  }
24
  .woocommerce div.product .product-share ul li {
 
 
25
  padding: 20px 30px;
26
  border-style: solid;
27
  border-color: #e9e9e9;
40
  border: 0;
41
  border-radius: 0;
42
  }
43
+ .woocommerce div.product .product-share ul li a .ops-icon-wrap {
44
  font-size: 16px;
45
+ line-height: 1;
46
+ display: -webkit-inline-flex;
47
+ display: -ms-inline-flex;
48
+ display: -webkit-inline-box;
49
+ display: -ms-inline-flexbox;
50
+ display: inline-flex;
51
  width: 40px;
52
  height: 40px;
53
  -webkit-transition: all .3s ease;
54
  transition: all .3s ease;
55
  vertical-align: middle;
 
56
  border-radius: 50%;
57
  background-color: #333;
58
+
59
+ -webkit-align-items: center;
60
+ -ms-flex-align: center;
61
+ -webkit-box-align: center;
62
+ align-items: center;
63
+ -webkit-justify-content: center;
64
+ -ms-flex-pack: center;
65
+ -webkit-box-pack: center;
66
+ justify-content: center;
67
+ }
68
+ .woocommerce div.product .product-share ul li a .ops-icon-wrap .ops-icon {
69
+ width: 16px;
70
+ height: 16px;
71
+
72
+ fill: #fff;
73
  }
74
  .woocommerce div.product .product-share ul li a .product-share-text {
75
  display: inline-block;
81
  .woocommerce div.product .product-share ul li.twitter a:hover {
82
  color: #00aced;
83
  }
84
+ .woocommerce div.product .product-share ul li.twitter a:hover .ops-icon-wrap {
85
  background-color: #00aced;
86
  }
87
  .woocommerce div.product .product-share ul li.facebook a:hover {
88
  color: #3b5998;
89
  }
90
+ .woocommerce div.product .product-share ul li.facebook a:hover .ops-icon-wrap {
91
  background-color: #3b5998;
92
  }
93
  .woocommerce div.product .product-share ul li.pinterest a:hover {
94
  color: #cb2027;
95
  }
96
+ .woocommerce div.product .product-share ul li.pinterest a:hover .ops-icon-wrap {
97
  background-color: #cb2027;
98
  }
99
  .woocommerce div.product .product-share ul li.email a:hover {
100
  color: #3fc387;
101
  }
102
+ .woocommerce div.product .product-share ul li.email a:hover .ops-icon-wrap {
103
  background-color: #3fc387;
104
  }
105
 
109
  width: calc(80% - 50px);
110
  }
111
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
112
  /*------------------------------------*
113
  Responsive
114
  *------------------------------------*/
116
  .woocommerce div.product .product-share ul li {
117
  padding: 20px 12px;
118
  }
119
+ .woocommerce div.product .product-share ul li a .ops-icon-wrap {
 
120
  margin: 0 auto 12px auto;
121
  }
122
  .woocommerce div.product .product-share ul li a .product-share-text,
132
  Phone Portrait and Landscape
133
  *------------------------------------*/
134
  @media only screen and (max-width: 767px) {
135
+ .woocommerce div.product .product-share ul {
136
+ -webkit-flex-wrap: wrap;
137
+ -ms-flex-wrap: wrap;
138
+ flex-wrap: wrap;
139
+ }
140
  .woocommerce div.product .product-share ul li {
141
  width: 50%;
142
  padding: 20px 0;
assets/css/style.min.css CHANGED
@@ -1 +1 @@
1
- .woocommerce div.product .product-share{display:block;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;margin-top:70px;padding:0;text-align:center}.woocommerce div.product .product-share ul{float:none}.woocommerce div.product .product-share ul li{float:left;width:25%;border-right-width:1px;border-style:solid;border-color:#e9e9e9;padding:20px 30px}.woocommerce div.product .product-share ul li:last-child{border-right:0}.woocommerce div.product .product-share ul li a{display:block;border:0;width:auto;height:auto;font-size:13px;line-height:1.5;margin:0 !important;border-radius:0}.woocommerce div.product .product-share ul li a .fa{display:inline-block;background-color:#333;color:#fff;width:40px;height:40px;line-height:40px;font-size:16px;border-radius:50%;vertical-align:middle;-webkit-transition:all .3s ease;transition:all .3s ease}.woocommerce div.product .product-share ul li a .product-share-text{display:inline-block;vertical-align:middle;padding:0 0 0 10px;width:-webkit-calc(100% - 50px);width:calc(100% - 50px)}.woocommerce div.product .product-share ul li.twitter a:hover{color:#00aced}.woocommerce div.product .product-share ul li.twitter a:hover .fa{background-color:#00aced}.woocommerce div.product .product-share ul li.facebook a:hover{color:#3b5998}.woocommerce div.product .product-share ul li.facebook a:hover .fa{background-color:#3b5998}.woocommerce div.product .product-share ul li.pinterest a:hover{color:#cb2027}.woocommerce div.product .product-share ul li.pinterest a:hover .fa{background-color:#cb2027}.woocommerce div.product .product-share ul li.email a:hover{color:#3fc387}.woocommerce div.product .product-share ul li.email a:hover .fa{background-color:#3fc387}.content-full-width.woocommerce div.product .product-share ul li a .product-share-text,.content-full-screen.woocommerce div.product .product-share ul li a .product-share-text{width:-webkit-calc(80% - 50px);width:calc(80% - 50px)}.rtl.woocommerce div.product .product-share ul li{float:right}.rtl.woocommerce div.product .product-share ul li{border-left-width:1px;border-right-width:0}.rtl.woocommerce div.product .product-share ul li:last-child{border-left-width:0}@media only screen and (max-width: 1280px){.woocommerce div.product .product-share ul li{padding:20px 12px}.woocommerce div.product .product-share ul li a .fa{display:block;margin:0 auto 12px auto}.woocommerce div.product .product-share ul li a .product-share-text,.content-full-width.woocommerce div.product .product-share ul li a .product-share-text,.content-full-screen.woocommerce div.product .product-share ul li a .product-share-text{display:block;padding:0;width:auto}}@media only screen and (max-width: 767px){.woocommerce div.product .product-share ul li{width:50%;border-right-width:0;padding:20px 0}.woocommerce div.product .product-share ul li:last-child{border-bottom-width:0}.woocommerce div.product .product-share ul li:nth-child(-n+2){border-bottom-width:1px}.woocommerce div.product .product-share ul li:nth-child(2n+1){border-right-width:1px}.woocommerce div.product .product-share ul li a{display:inline-block}.rtl.woocommerce div.product .product-share ul li{border-left-width:0}.rtl.woocommerce div.product .product-share ul li:nth-child(2n+1){border-left-width:1px;border-right-width:0}}@media only screen and (max-width: 320px){.woocommerce div.product .product-share ul li{width:100%;border-top-width:1px}.woocommerce div.product .product-share ul li:first-child{border-top-width:0}.woocommerce div.product .product-share ul li:nth-child(-n+2){border-bottom-width:0}.woocommerce div.product .product-share ul li:nth-child(2n+1){border-right-width:0}.rtl.woocommerce div.product .product-share ul li:nth-child(2n+1){border-left-width:0;border-right-width:0}}
1
+ .woocommerce div.product .product-share{display:block;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;margin-top:70px;padding:0;text-align:center}.woocommerce div.product .product-share ul{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.woocommerce div.product .product-share ul li{border-right-width:1px;border-style:solid;border-color:#e9e9e9;padding:20px 30px}.woocommerce div.product .product-share ul li:last-child{border-right:0}.woocommerce div.product .product-share ul li a{display:block;border:0;width:auto;height:auto;font-size:13px;line-height:1.5;margin:0 !important;border-radius:0}.woocommerce div.product .product-share ul li a .ops-icon-wrap{display:-webkit-inline-flex;display:-ms-inline-flex;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-ms-flex-align:center;-webkit-box-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center;background-color:#333;width:40px;height:40px;line-height:1;font-size:16px;border-radius:50%;vertical-align:middle;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.woocommerce div.product .product-share ul li a .ops-icon-wrap .ops-icon{fill:#fff;width:16px;height:16px}.woocommerce div.product .product-share ul li a .product-share-text{display:inline-block;vertical-align:middle;padding:0 0 0 10px;width:-webkit-calc(100% - 50px);width:calc(100% - 50px)}.woocommerce div.product .product-share ul li.twitter a:hover{color:#00aced}.woocommerce div.product .product-share ul li.twitter a:hover .ops-icon-wrap{background-color:#00aced}.woocommerce div.product .product-share ul li.facebook a:hover{color:#3b5998}.woocommerce div.product .product-share ul li.facebook a:hover .ops-icon-wrap{background-color:#3b5998}.woocommerce div.product .product-share ul li.pinterest a:hover{color:#cb2027}.woocommerce div.product .product-share ul li.pinterest a:hover .ops-icon-wrap{background-color:#cb2027}.woocommerce div.product .product-share ul li.email a:hover{color:#3fc387}.woocommerce div.product .product-share ul li.email a:hover .ops-icon-wrap{background-color:#3fc387}.content-full-width.woocommerce div.product .product-share ul li a .product-share-text,.content-full-screen.woocommerce div.product .product-share ul li a .product-share-text{width:-webkit-calc(80% - 50px);width:calc(80% - 50px)}@media only screen and (max-width: 1280px){.woocommerce div.product .product-share ul li{padding:20px 12px}.woocommerce div.product .product-share ul li a .ops-icon-wrap{margin:0 auto 12px auto}.woocommerce div.product .product-share ul li a .product-share-text,.content-full-width.woocommerce div.product .product-share ul li a .product-share-text,.content-full-screen.woocommerce div.product .product-share ul li a .product-share-text{display:block;padding:0;width:auto}}@media only screen and (max-width: 767px){.woocommerce div.product .product-share ul{-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.woocommerce div.product .product-share ul li{width:50%;border-right-width:0;padding:20px 0}.woocommerce div.product .product-share ul li:last-child{border-bottom-width:0}.woocommerce div.product .product-share ul li:nth-child(-n+2){border-bottom-width:1px}.woocommerce div.product .product-share ul li:nth-child(2n+1){border-right-width:1px}.woocommerce div.product .product-share ul li a{display:inline-block}.rtl.woocommerce div.product .product-share ul li{border-left-width:0}.rtl.woocommerce div.product .product-share ul li:nth-child(2n+1){border-left-width:1px;border-right-width:0}}@media only screen and (max-width: 320px){.woocommerce div.product .product-share ul li{width:100%;border-top-width:1px}.woocommerce div.product .product-share ul li:first-child{border-top-width:0}.woocommerce div.product .product-share ul li:nth-child(-n+2){border-bottom-width:0}.woocommerce div.product .product-share ul li:nth-child(2n+1){border-right-width:0}.rtl.woocommerce div.product .product-share ul li:nth-child(2n+1){border-left-width:0;border-right-width:0}}
assets/css/style.scss CHANGED
@@ -1,3 +1,48 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  .woocommerce div.product .product-share {
2
  display: block;
3
  border-top: 1px solid #e9e9e9;
@@ -7,11 +52,11 @@
7
  text-align: center;
8
 
9
  ul {
10
- float: none;
 
 
11
 
12
  li {
13
- float: left;
14
- width: 25%;
15
  border-right-width: 1px;
16
  border-style: solid;
17
  border-color: #e9e9e9;
@@ -31,17 +76,24 @@
31
  margin: 0 !important;
32
  border-radius: 0;
33
 
34
- .fa {
35
- display: inline-block;
 
 
36
  background-color: #333;
37
- color: #fff;
38
  width: 40px;
39
  height: 40px;
40
- line-height: 40px;
41
  font-size: 16px;
42
  border-radius: 50%;
43
  vertical-align: middle;
44
- transition: all .3s ease;
 
 
 
 
 
 
45
  }
46
 
47
  .product-share-text {
@@ -55,7 +107,7 @@
55
  &.twitter a:hover {
56
  color: #00aced;
57
 
58
- .fa {
59
  background-color: #00aced;
60
  }
61
  }
@@ -63,7 +115,7 @@
63
  &.facebook a:hover {
64
  color: #3b5998;
65
 
66
- .fa {
67
  background-color: #3b5998;
68
  }
69
  }
@@ -71,7 +123,7 @@
71
  &.pinterest a:hover {
72
  color: #cb2027;
73
 
74
- .fa {
75
  background-color: #cb2027;
76
  }
77
  }
@@ -79,7 +131,7 @@
79
  &.email a:hover {
80
  color: #3fc387;
81
 
82
- .fa {
83
  background-color: #3fc387;
84
  }
85
  }
@@ -92,18 +144,13 @@
92
  width: calc(80% - 50px);
93
  }
94
 
95
- /* RTL */
96
- .rtl.woocommerce div.product .product-share ul li { float: right; }
97
- .rtl.woocommerce div.product .product-share ul li { border-left-width: 1px; border-right-width: 0; }
98
- .rtl.woocommerce div.product .product-share ul li:last-child { border-left-width: 0; }
99
-
100
  /*------------------------------------*
101
  Responsive
102
  *------------------------------------*/
103
  @media only screen and (max-width: 1280px) {
104
 
105
  .woocommerce div.product .product-share ul li { padding: 20px 12px; }
106
- .woocommerce div.product .product-share ul li a .fa { display: block; margin: 0 auto 12px auto; }
107
  .woocommerce div.product .product-share ul li a .product-share-text,
108
  .content-full-width.woocommerce div.product .product-share ul li a .product-share-text,
109
  .content-full-screen.woocommerce div.product .product-share ul li a .product-share-text { display: block; padding: 0; width: auto; }
@@ -115,6 +162,7 @@
115
  *------------------------------------*/
116
  @media only screen and (max-width: 767px) {
117
 
 
118
  .woocommerce div.product .product-share ul li { width: 50%; border-right-width: 0; padding: 20px 0; }
119
  .woocommerce div.product .product-share ul li:last-child { border-bottom-width: 0; }
120
  .woocommerce div.product .product-share ul li:nth-child(-n+2) { border-bottom-width: 1px; }
1
+ // Display inline flex
2
+ @mixin display-inline-flex() {
3
+ display: -webkit-inline-flex;
4
+ display: -ms-inline-flex;
5
+ display: inline-flex;
6
+ }
7
+
8
+ // Display flex
9
+ @mixin display-flex() {
10
+ display: -webkit-box;
11
+ display: -webkit-flex;
12
+ display: -ms-flexbox;
13
+ display: flex;
14
+ }
15
+
16
+ // Flex wrap
17
+ @mixin flex-wrap( $args ) {
18
+ -webkit-flex-wrap: $args;
19
+ -ms-flex-wrap: $args;
20
+ flex-wrap: $args;
21
+ }
22
+
23
+ // Align items
24
+ @mixin align-items( $args ) {
25
+ -webkit-align-items: $args;
26
+ -ms-flex-align: $args;
27
+ align-items: $args;
28
+ }
29
+
30
+ // Justify content
31
+ @mixin justify-content( $args ) {
32
+ -webkit-justify-content: $args;
33
+ -ms-flex-pack: $args;
34
+ justify-content: $args;
35
+ }
36
+
37
+ // Transition
38
+ @mixin transition( $args ) {
39
+ -webkit-transition: $args;
40
+ -moz-transition: $args;
41
+ -ms-transition: $args;
42
+ -o-transition: $args;
43
+ transition: $args;
44
+ }
45
+
46
  .woocommerce div.product .product-share {
47
  display: block;
48
  border-top: 1px solid #e9e9e9;
52
  text-align: center;
53
 
54
  ul {
55
+ @include display-flex();
56
+ @include align-items( center );
57
+ @include justify-content( center );
58
 
59
  li {
 
 
60
  border-right-width: 1px;
61
  border-style: solid;
62
  border-color: #e9e9e9;
76
  margin: 0 !important;
77
  border-radius: 0;
78
 
79
+ .ops-icon-wrap {
80
+ @include display-inline-flex();
81
+ @include align-items( center );
82
+ @include justify-content( center );
83
  background-color: #333;
 
84
  width: 40px;
85
  height: 40px;
86
+ line-height: 1;
87
  font-size: 16px;
88
  border-radius: 50%;
89
  vertical-align: middle;
90
+ @include transition( all .3s ease );
91
+
92
+ .ops-icon {
93
+ fill: #fff;
94
+ width: 16px;
95
+ height: 16px;
96
+ }
97
  }
98
 
99
  .product-share-text {
107
  &.twitter a:hover {
108
  color: #00aced;
109
 
110
+ .ops-icon-wrap {
111
  background-color: #00aced;
112
  }
113
  }
115
  &.facebook a:hover {
116
  color: #3b5998;
117
 
118
+ .ops-icon-wrap {
119
  background-color: #3b5998;
120
  }
121
  }
123
  &.pinterest a:hover {
124
  color: #cb2027;
125
 
126
+ .ops-icon-wrap {
127
  background-color: #cb2027;
128
  }
129
  }
131
  &.email a:hover {
132
  color: #3fc387;
133
 
134
+ .ops-icon-wrap {
135
  background-color: #3fc387;
136
  }
137
  }
144
  width: calc(80% - 50px);
145
  }
146
 
 
 
 
 
 
147
  /*------------------------------------*
148
  Responsive
149
  *------------------------------------*/
150
  @media only screen and (max-width: 1280px) {
151
 
152
  .woocommerce div.product .product-share ul li { padding: 20px 12px; }
153
+ .woocommerce div.product .product-share ul li a .ops-icon-wrap { margin: 0 auto 12px auto; }
154
  .woocommerce div.product .product-share ul li a .product-share-text,
155
  .content-full-width.woocommerce div.product .product-share ul li a .product-share-text,
156
  .content-full-screen.woocommerce div.product .product-share ul li a .product-share-text { display: block; padding: 0; width: auto; }
162
  *------------------------------------*/
163
  @media only screen and (max-width: 767px) {
164
 
165
+ .woocommerce div.product .product-share ul { @include flex-wrap( wrap ); }
166
  .woocommerce div.product .product-share ul li { width: 50%; border-right-width: 0; padding: 20px 0; }
167
  .woocommerce div.product .product-share ul li:last-child { border-bottom-width: 0; }
168
  .woocommerce div.product .product-share ul li:nth-child(-n+2) { border-bottom-width: 1px; }
assets/js/customizer.js CHANGED
@@ -12,12 +12,12 @@
12
  } );
13
  wp.customize( 'ops_product_sharing_icons_bg', function( value ) {
14
  value.bind( function( to ) {
15
- $( '.woocommerce div.product .product-share ul li a .fa' ).css( 'background-color', to );
16
  } );
17
  } );
18
  wp.customize( 'ops_product_sharing_icons_color', function( value ) {
19
  value.bind( function( to ) {
20
- $( '.woocommerce div.product .product-share ul li a .fa' ).css( 'color', to );
21
  } );
22
  } );
23
  } )( jQuery );
12
  } );
13
  wp.customize( 'ops_product_sharing_icons_bg', function( value ) {
14
  value.bind( function( to ) {
15
+ $( '.woocommerce div.product .product-share ul li a .ops-icon-wrap' ).css( 'background-color', to );
16
  } );
17
  } );
18
  wp.customize( 'ops_product_sharing_icons_color', function( value ) {
19
  value.bind( function( to ) {
20
+ $( '.woocommerce div.product .product-share ul li a .ops-icon-wrap .ops-icon' ).css( 'color', to );
21
  } );
22
  } );
23
  } )( jQuery );
assets/js/customizer.min.js CHANGED
@@ -1 +1 @@
1
- !function(a){wp.customize("ops_product_sharing_borders_color",function(b){b.bind(function(b){a(".woocommerce div.product .product-share,.woocommerce div.product .product-share ul li").css("border-color",b)})}),wp.customize("ops_product_sharing_icons_bg",function(b){b.bind(function(b){a(".woocommerce div.product .product-share ul li a .fa").css("background-color",b)})}),wp.customize("ops_product_sharing_icons_color",function(b){b.bind(function(b){a(".woocommerce div.product .product-share ul li a .fa").css("color",b)})})}(jQuery);
1
+ !function(a){wp.customize("ops_product_sharing_borders_color",function(b){b.bind(function(b){a(".woocommerce div.product .product-share,.woocommerce div.product .product-share ul li").css("border-color",b)})}),wp.customize("ops_product_sharing_icons_bg",function(b){b.bind(function(b){a(".woocommerce div.product .product-share ul li a .ops-icon-wrap").css("background-color",b)})}),wp.customize("ops_product_sharing_icons_color",function(b){b.bind(function(b){a(".woocommerce div.product .product-share ul li a .ops-icon-wrap .ops-icon").css("color",b)})})}(jQuery);
ocean-product-sharing.php CHANGED
@@ -3,11 +3,11 @@
3
  * Plugin Name: Ocean Product Sharing
4
  * Plugin URI: https://oceanwp.org/extension/ocean-product-sharing/
5
  * Description: A simple plugin to add social share buttons to your product page.
6
- * Version: 1.0.2.4
7
  * Author: OceanWP
8
  * Author URI: https://oceanwp.org/
9
  * Requires at least: 4.5.0
10
- * Tested up to: 4.8
11
  *
12
  * Text Domain: ocean-product-sharing
13
  * Domain Path: /languages/
@@ -86,7 +86,7 @@ final class Ocean_Product_Sharing {
86
  $this->token = 'ocean-product-sharing';
87
  $this->plugin_url = plugin_dir_url( __FILE__ );
88
  $this->plugin_path = plugin_dir_path( __FILE__ );
89
- $this->version = '1.0.2.4';
90
 
91
  register_activation_hook( __FILE__, array( $this, 'install' ) );
92
 
@@ -339,12 +339,12 @@ final class Ocean_Product_Sharing {
339
 
340
  // Add icon background
341
  if ( ! empty( $product_sharing_icons_bg ) && '#333333' != $product_sharing_icons_bg ) {
342
- $css .= '.woocommerce div.product .product-share ul li a .fa{background-color:'. $product_sharing_icons_bg .';}';
343
  }
344
 
345
  // Add icon color
346
  if ( ! empty( $product_sharing_icons_color ) && '#ffffff' != $product_sharing_icons_color ) {
347
- $css .= '.woocommerce div.product .product-share ul li a .fa{color:'. $product_sharing_icons_color .';}';
348
  }
349
 
350
  // Return CSS
3
  * Plugin Name: Ocean Product Sharing
4
  * Plugin URI: https://oceanwp.org/extension/ocean-product-sharing/
5
  * Description: A simple plugin to add social share buttons to your product page.
6
+ * Version: 1.0.3
7
  * Author: OceanWP
8
  * Author URI: https://oceanwp.org/
9
  * Requires at least: 4.5.0
10
+ * Tested up to: 4.8.3
11
  *
12
  * Text Domain: ocean-product-sharing
13
  * Domain Path: /languages/
86
  $this->token = 'ocean-product-sharing';
87
  $this->plugin_url = plugin_dir_url( __FILE__ );
88
  $this->plugin_path = plugin_dir_path( __FILE__ );
89
+ $this->version = '1.0.3';
90
 
91
  register_activation_hook( __FILE__, array( $this, 'install' ) );
92
 
339
 
340
  // Add icon background
341
  if ( ! empty( $product_sharing_icons_bg ) && '#333333' != $product_sharing_icons_bg ) {
342
+ $css .= '.woocommerce div.product .product-share ul li a .ops-icon-wrap{background-color:'. $product_sharing_icons_bg .';}';
343
  }
344
 
345
  // Add icon color
346
  if ( ! empty( $product_sharing_icons_color ) && '#ffffff' != $product_sharing_icons_color ) {
347
+ $css .= '.woocommerce div.product .product-share ul li a .ops-icon-wrap .ops-icon{color:'. $product_sharing_icons_color .';}';
348
  }
349
 
350
  // Return CSS
readme.txt CHANGED
@@ -2,8 +2,8 @@
2
  Contributors: oceanwp
3
  Tags: social, social sharing, social share product, share product, oceanwp
4
  Requires at least: 4.5
5
- Tested up to: 4.8
6
- Stable tag: 1.0.2.4
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
@@ -31,6 +31,10 @@ This plugin will only work with the [OceanWP](https://oceanwp.org/) theme.
31
 
32
  == Changelog ==
33
 
 
 
 
 
34
  = 1.0.2.4 =
35
  - Added: All sanitize_callback for the customizer options.
36
 
2
  Contributors: oceanwp
3
  Tags: social, social sharing, social share product, share product, oceanwp
4
  Requires at least: 4.5
5
+ Tested up to: 4.8.3
6
+ Stable tag: 1.0.3
7
  License: GPLv2 or later
8
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
9
 
31
 
32
  == Changelog ==
33
 
34
+ = 1.0.3 =
35
+ - Tweak: Icons replaced by SVG so if you disable Font Awesome, the social share icons are still there..
36
+ - Tweak: CSS improvement.
37
+
38
  = 1.0.2.4 =
39
  - Added: All sanitize_callback for the customizer options.
40
 
template/product-share.php CHANGED
@@ -36,7 +36,11 @@ $product_img = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
36
 
37
  <li class="twitter">
38
  <a href="https://twitter.com/intent/tweet?status=<?php echo rawurlencode( $product_title ); ?>+<?php echo esc_url( $product_url ); ?>" target="_blank">
39
- <span class="fa fa-twitter"></span>
 
 
 
 
40
  <div class="product-share-text"><?php esc_html_e( 'Tweet This Product', 'ocean-product-sharing' ); ?></div>
41
  </a>
42
  </li>
@@ -47,7 +51,12 @@ $product_img = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
47
 
48
  <li class="facebook">
49
  <a href="https://www.facebook.com/sharer.php?u=<?php echo rawurlencode( esc_url( $product_url ) ); ?>" target="_blank">
50
- <span class="fa fa-facebook"></span>
 
 
 
 
 
51
  <div class="product-share-text"><?php esc_html_e( 'Share on Facebook', 'ocean-product-sharing' ); ?></div>
52
  </a>
53
  </li>
@@ -58,7 +67,18 @@ $product_img = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
58
 
59
  <li class="pinterest">
60
  <a href="https://www.pinterest.com/pin/create/button/?url=<?php echo rawurlencode( esc_url( $product_url ) ); ?>&amp;media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&amp;description=<?php echo rawurlencode( $product_title ); ?>" target="_blank">
61
- <span class="fa fa-pinterest-p"></span>
 
 
 
 
 
 
 
 
 
 
 
62
  <div class="product-share-text"><?php esc_html_e( 'Pin This Product', 'ocean-product-sharing' ); ?></div>
63
  </a>
64
  </li>
@@ -69,7 +89,14 @@ $product_img = wp_get_attachment_url( get_post_thumbnail_id() ); ?>
69
 
70
  <li class="email">
71
  <a href="mailto:?subject=<?php echo rawurlencode( $product_title ); ?>&amp;body=<?php echo esc_url( $product_url ); ?>" target="_blank">
72
- <span class="fa fa-envelope-o"></span>
 
 
 
 
 
 
 
73
  <div class="product-share-text"><?php esc_html_e( 'Mail This Product', 'ocean-product-sharing' ); ?></div>
74
  </a>
75
  </li>
36
 
37
  <li class="twitter">
38
  <a href="https://twitter.com/intent/tweet?status=<?php echo rawurlencode( $product_title ); ?>+<?php echo esc_url( $product_url ); ?>" target="_blank">
39
+ <span class="ops-icon-wrap">
40
+ <svg class="ops-icon" aria-labelledby="ops-twitter-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
41
+ <path d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/>
42
+ </svg>
43
+ </span>
44
  <div class="product-share-text"><?php esc_html_e( 'Tweet This Product', 'ocean-product-sharing' ); ?></div>
45
  </a>
46
  </li>
51
 
52
  <li class="facebook">
53
  <a href="https://www.facebook.com/sharer.php?u=<?php echo rawurlencode( esc_url( $product_url ) ); ?>" target="_blank">
54
+ <span class="ops-icon-wrap">
55
+ <svg class="ops-icon" aria-labelledby="ops-facebook-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
56
+ <path d="M5.677,12.998V8.123h3.575V6.224C9.252,2.949,11.712,0,14.736,0h3.94v4.874h-3.94
57
+ c-0.432,0-0.934,0.524-0.934,1.308v1.942h4.874v4.874h-4.874V24H9.252V12.998H5.677z"/>
58
+ </svg>
59
+ </span>
60
  <div class="product-share-text"><?php esc_html_e( 'Share on Facebook', 'ocean-product-sharing' ); ?></div>
61
  </a>
62
  </li>
67
 
68
  <li class="pinterest">
69
  <a href="https://www.pinterest.com/pin/create/button/?url=<?php echo rawurlencode( esc_url( $product_url ) ); ?>&amp;media=<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>&amp;description=<?php echo rawurlencode( $product_title ); ?>" target="_blank">
70
+ <span class="ops-icon-wrap">
71
+ <svg class="ops-icon" aria-labelledby="ops-pinterest-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
72
+ <path d="M13.757,17.343c-1.487,0-2.886-0.804-3.365-1.717c0,0-0.8,3.173-0.969,3.785
73
+ c-0.596,2.165-2.35,4.331-2.487,4.508c-0.095,0.124-0.305,0.085-0.327-0.078c-0.038-0.276-0.485-3.007,0.041-5.235
74
+ c0.264-1.118,1.772-7.505,1.772-7.505s-0.44-0.879-0.44-2.179c0-2.041,1.183-3.565,2.657-3.565c1.252,0,1.857,0.94,1.857,2.068
75
+ c0,1.26-0.802,3.142-1.216,4.888c-0.345,1.461,0.734,2.653,2.174,2.653c2.609,0,4.367-3.352,4.367-7.323
76
+ c0-3.018-2.032-5.278-5.731-5.278c-4.177,0-6.782,3.116-6.782,6.597c0,1.2,0.355,2.047,0.909,2.701
77
+ c0.255,0.301,0.29,0.422,0.198,0.767c-0.067,0.254-0.218,0.864-0.281,1.106c-0.092,0.349-0.375,0.474-0.69,0.345
78
+ c-1.923-0.785-2.82-2.893-2.82-5.262c0-3.912,3.3-8.604,9.844-8.604c5.259,0,8.72,3.805,8.72,7.89
79
+ C21.188,13.307,18.185,17.343,13.757,17.343z"/>
80
+ </svg>
81
+ </span>
82
  <div class="product-share-text"><?php esc_html_e( 'Pin This Product', 'ocean-product-sharing' ); ?></div>
83
  </a>
84
  </li>
89
 
90
  <li class="email">
91
  <a href="mailto:?subject=<?php echo rawurlencode( $product_title ); ?>&amp;body=<?php echo esc_url( $product_url ); ?>" target="_blank">
92
+ <span class="ops-icon-wrap">
93
+ <svg class="ops-icon" aria-labelledby="ops-email-icon" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
94
+ <path d="M23.674,3.741c-0.338-0.495-0.907-0.823-1.549-0.823H1.876c-0.629,0-1.184,0.316-1.525,0.794l11.687,9.745
95
+ L23.674,3.741z"/>
96
+ <path d="M12.037,16.409L0,6.371v12.836c0,1.031,0.844,1.875,1.875,1.875h20.249c1.031,0,1.875-0.844,1.875-1.875
97
+ V6.421L12.037,16.409z"/>
98
+ </svg>
99
+ </span>
100
  <div class="product-share-text"><?php esc_html_e( 'Mail This Product', 'ocean-product-sharing' ); ?></div>
101
  </a>
102
  </li>