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

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 4 years, 10 months ago by Ryan Ray, a11n.

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

@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 4 years, 10 months ago by Ryan Ray, a11n.