WooCommerce Flexbox/Carousel Styling

Good Day,

We are looking to improve the styling of the Flexbox on a WooCommerce Single Product.

The Flexbox carousel is placed above the Image, I think the standard WooCommerce SP has these placed underneath and includes arrows for nav.

This would mostly likely be edited with functions.php? To reorder the hooks? Then styled via CSS.

On a side note I see somewhere on the forum you are looking at adding a type of customizer for WooCommerce which would make editing a lot easier. Would you know where this is on your Development Timeline? It would be a great feature and would decrease dev time.

Thank you for your help in advance!

Hi there,

That should be doable using only CSS. Please try this in X > Theme Options > CSS:

.flex-control-nav.flex-control-thumbs {
    position: relative;
}

As for the customizer feature for Woocommerce, we cannot provide any ETA when additional features will be implemented.

Hope this helps.

@Jade thank you for the quick response.

Is there no way to get the arrows back to improve UX?

Also styling for breakpoints. Do we have to include each media query for our CSS to ensure the design remains the same or similar?

Kind Regards

Hi @RSI-DEV,

Unfortunately, there is no temporary workaround and I myself isn’t sure what version had the arrow. It could be Woocommerce related itself since the only integration X and Woocommerce has is within the \x\framework\functions\plugins\woocommerce.php and few templates under \x\woocommerce\ and I don’t see any related to slider or flexbox.

You may check this as well https://stackoverflow.com/questions/46353307/navigation-arrows-in-woocommerce-3-x-product-gallery-slider. And looks like it’s been like that even before.

As for the second question, if you wish to position it differently for each device then yes, you’ll have to wrap it with @media query.

Thanks!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.