Hello,
I managed to use woocommerce shortcodes inside pagebuilder widgets with this simple code:
add_filter('widget_text', 'do_shortcode');
in the function.php.
I have a button with a vertical gradient and a hover effect which works perfectly in every page of the site and also in the “shop” page of woocommerce. It shows perfectly even in IE but there is a graphic problem with Chrome.
If I put the shortcode of the “shop” page in visual editor widget, on Chrome, the button loses the gradient and turns TRANSPARENT (I can see the page background) but maintains the hover effect. This happens ONLY using CHROME and only if the shortcode is in a widget.
Any suggestion?
This is what Chrome inspector says:
element.style { } media="all" .woocommerce #page-wrapper .button, .widget a.button { border-top: solid 1px #d2d2d2; border-left: solid 1px #c3c3c3; border-right: solid 1px #c3c3c3; border-bottom: solid 1px #9f9f9f; background: #404040; background: -moz-linear-gradient(top, #404040 0%, #8f8f8f 20%, #8f8f8f 50%, #8f8f8f 80%, #404040 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#404040), color-stop(20%,#8f8f8f), color-stop(50%,#8f8f8f), color-stop(80%,#8f8f8f), color-stop(100%,#404040)); background: -webkit-linear-gradient(top, #404040 0%,#8f8f8f 20%,#8f8f8f 50%,#8f8f8f 80%,#404040 100%); background: -o-linear-gradient(top, #404040 0%,#8f8f8f 20%,#8f8f8f 50%,#8f8f8f 80%,#404040 100%); background: -ms-linear-gradient(top, #404040 0%,#8f8f8f 20%,#8f8f8f 50%,#8f8f8f 80%,#404040 100%); background: linear-gradient(to bottom, #404040 0%,#8f8f8f 20%,#8f8f8f 50%,#8f8f8f 80%,#404040 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#404040',GradientType=0 ); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #fff; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(0, 0, 0, 0.5); box-shadow: 0 1px 1px rgba(0,0,0,0.125), inset 0 1px 0 rgba(255, 255, 255, 0.5); width: auto; text-decoration: none; cursor: pointer; -webkit-appearance: button; line-height: 1; text-shadow: 2px 1px 0px rgba(0, 0, 0, 0.8); }
I’m using this site http://www.colorzilla.com/gradient-editor/ to generate the gradient I need. I’m trying to use the blue radial one, automatically generated from the site.
Chrome can show the gradient on the site ma in not the one in my page and the have the same code…
Hi Zeitan
Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.
Thanks
Magus
I’m sorry but I’m working in local
Hi Zeitan
Would it be possible for you to try and recreate your CSS by using this tool instead
https://www.assembla.com/code/danny-beckett/subversion/nodes/12/CSS%2520Gradient%2520maker/CSSGradients.exe
Let me know how it goes
Magus