Storefront and “flex slider”

Hi @seanbeee,

Welcome to the wild and wonderful world of Woo and more-so Storefront. I appreciate the warning up-front as well. ??

To help clarify or confirm a few things first, what plugin are you using to add Flexslider to your homepage? Does MegaSlider use the Flexslider javascript to power its slideshow functionality, or is MegaSlider something different from the original plugin you were using for Flexslider.

Right now what I’m seeing in the slider is a white background with a product title, description, and price on the left two thirds while the product image takes up the right one third.

Also, for my clarification, your ultimate goal would be one slider plugin to display your products. What do you mean by managing things at a page level? I think you are saying you’d ideally want to go to edit your homepage and manage all parts of the slider there, correct?

Thanks for any clarification you can provide, we’ll get closer to a solution from here. ??

Thanks for getting back to me

I would ideally like both of those sliders to disappear, and use the coding under something like beaverbuilder to add them in. Flex Slider suddenly appeared from no where when I updated to theme. The only reason I know its using that is from looking at the inspect option. There is an option under customiser that allowed me to add products to the slider, but it wont let me unselect it. And it also brought up the requirement to add in slider shortcode.

Happy to provide an admin logon if you need to. There are a lot of plugins there (I took over from another person, so it can probably all be redone in a single CSS down the track)

Any help is appreciated.

SeanB

Hi @seanbeee,

Ok, great! I’m not real familiar with BeaverBuilder and how it works, but I’d just check with them (or their documentation) to see if their plugin includes a slider and you can put products from WooCommerce and their information in the slider in some way or another. I’m sure you can somehow.

Just to clarify, if I can, there isn’t any included slider (Flexslider) in Storefront itself. There is likely a plugin adding this to your site and thus adding it to Storefront, if that makes sense.

Nonetheless, once you confirm with BeaverBuilder you can do what you’d like to you can simply remove any other slider plugins. ??

Let me know if we can provide any further help or information. Going beyond BeaverBuilder I know we could find a plugin that offers a slideshow block for the new editor in WordPress. You could then build each slide with customizable options like the image, button, text, title, etc… You’d find plenty of options searching the web for something like “woocommerce product slider block” as a back up to BeaverBuilder. ??

Thanks!

• This reply was modified 5 years, 9 months ago by Ryan Ray, a11n.

Thanks for your suggestions.

There were two woocommerce extensions that were causing the issue. Removing both has solved it. The small piece of code that one aided with I have managed around by pinching the CSS it installed.

Thanks again

Howdy @seanbeee,

Great, I’m glad you did some more digging and found the root cause. Let us know if we can help any further again in the future. ??

Hi Again

I have just noticed, and dont know if it to do with the removal of the above plugins, but the “Description Tab” has now lost its transparency. It might have been something I did.

You can see it on this page, the product description now has a white background. I would love it to be clear.

Any idea the setting, or is this easiest fixed by some customer CSS?

This page show it.

https://www.simplyseductive.com.au/shop1/product/strapless-self-adhesive-silicone-invisible-push-up-bra-2/

Again, warning that there may be content some people dont like.

Many thanks for any help. Dead Set novice here (clearly)

SeanB

Hi @seanbeee,

That white background is coming from another plugin on your site. One called “New Facebook Like Share Follow Button.” It adds this background-color: #fff to the panel class. The #fff hex code translates to the color white. ??

Link to image: https://cld.wthms.co/iEectb

You should be able to override that with the following CSS.

.storefront-full-width-content .woocommerce-tabs .panel {
    background: transparent;
}

Thanks, That worked a treat.

So I can stop being a pest, how did you work that out from the code? so I can stop being a pest in the future.

SeanB

@seanbeee,

You’re not a pest, don’t worry about that!

CSS is really fun to troubleshoot or inspect via your browser of choice and its dev tools. I’m pretty familiar with Chrome’s dev tools, but most other browsers should have very similar features. They do usually need enabled though, they don’t come enabled out of the box. –> https://developers.google.com/web/tools/chrome-devtools/

Link to image: https://cld.wthms.co/6vTxm8

Once they are enabled you can right click on areas of a page and inspect them. This opens up your dev tools and highlights the HTML you had selected. It then has many different things you can do, but you’ll notice the right Styles area. This shows you the CSS that is applied to your selected element. It helps to see the HTML as you can see the classes and/or ids added to a part of the site. Those can be targeted or used in your CSS to style them appropriately.

https://cld.wthms.co/XdZJrT

• This reply was modified 5 years, 9 months ago by Ryan Ray, a11n.