Home>Support>Pege Builder widgets and woocommerce shortcodes – transparent buttons

Pege Builder widgets and woocommerce shortcodes – transparent buttons

By zeitan, 9 years ago. Last reply by Magus, 9 years ago.

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

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 4 months ago zeitan

    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…

  2. 9 years, 4 months ago Magus
    Hi, I Work Here

    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

  3. 9 years, 4 months ago zeitan

    I’m sorry but I’m working in local

  4. 9 years, 4 months ago Magus
    Hi, I Work Here

    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

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More